Jak efektivně ladit JavaScript přímo v prohlížeči

Na závěr si osvojte práci s konzolí. Kromě běžného console.log, console.warn a console.error využijte také console.table pro zobrazení polí a objektů v přehledné tabulce, což je mnohem čitelnější než dlouhý výpis. Pomocí console.time a console.timeEnd změříte dobu provádění úseku kódu, což je užitečné při hledání výkonnostních problémů. Nezapomínejte ani na možnost kopírovat objekt z konzole do schránky pomocí příkazu copy(), který se hodí při testování nebo posílání dat kolegům. Tyto zdánlivé drobnosti výrazně urychlí vaše každodenní ladění a pomohou vám rychleji najít i ty nejzákeřnější chyby.

Časté chyby a jak je odstranit Jednou z typických chyb je dynamické sestavování dotazů pomocí řetězců, zejména když potřebujete řadit podle sloupce zvoleného uživatelem. Pokud uživatel může ovlivnit název sloupce nebo směr řazení, parametrizace nepomůže. V takovém případě vždy použijte seznam povolených hodnot, který ověří, že zadaný řetězec odpovídá skutečnému názvu sloupce. Druhou častou chybou je zapomínání na vstupy vstupující do LIKE, IN nebo ORDER BY klauzulí. I zde platí, že místo přímého vkládání vstupu použijte placeholder a pro dynamické části aplikujte whitelist.

Při růstu codebase sledujte dva varovné signály: když jednotkové testy začnou vyžadovat složité mockování (např. pět úrovní mocků), je to známka špatné architektury – testy vás tlačí k refaktoringu. Když integrační testy začnou být pomalé a nestabilní (flaky), rozdělte je podle domén nebo použijte testovací kontajnery, ale neodstraňujte je. Důležité je také testy pravidelně profilovat – pokud jeden integrační test trvá minutu, zatímco ostatní sekundy, podívejte se, jestli nezpůsobuje zbytečné čekání na síti nebo na disku.

Jako první krok si zvolte testovací framework. Pokud píšete v Javě, sáhněte po JUnit, v Pythonu po pytestu, v JavaScriptu po Jestu. Nezáleží na tom, který si vyberete, důležitý je princip. Vytvořte nový soubor, který má v názvu slovo „test", aby ho framework automaticky našel. Do něj napište funkci nebo metodu, která začíná slovem „test". Uvnitř zavolejte testovanou funkci a výsledek porovnejte s očekávanou hodnotou pomocí aserce. Například: assert(secitani(2, 3) == 5).

Než napíšete první unit test, zapomeňte na představu, že testy jsou něco navíc. Jsou to spustitelné dokumentace vašeho kódu. Začněte u malé, izolované funkce, která nemá vedlejší účinky. Ideální je čistá funkce, která přijímá vstup a vrací výstup. Vyhněte se psaní testů pro třídy s databází, souborovým systémem nebo síťovými voláními. To je integrační testování a na to budete potřebovat jiné nástroje.

Nejčastější začátečnická chyba je commitovat až po 200 změnách najednou. Git je pak k ničemu, protože když se něco rozbije, nevíte, která z těch 200 změn to způsobila. Commit by měl být malý a logicky uzavřený: jedna funkce, jeden opravený překlep, jeden styl. Pokud máte pocit, že je toho moc, rozdělte si práci na menší kroky. A nikdy necommitnete do hlavní větve (obvykle master nebo main) bez předchozí kontroly, co se v ní děje. K tomu slouží větve.

Další technikou, kterou oceníte při ladění složitějších aplikací, je použití logpointů. Logpoint je hybrid mezi console.log a breakpointem – místo zastavení běhu programu pouze vypíše hodnotu do konzole. To je ideální pro situace, kdy potřebujete sledovat hodnoty ve smyčce, ale nechcete při každé iteraci ručně pokračovat. Nastavíte ho stejně jako breakpoint, ale v menu zvolíte možnost Add logpoint a napíšete výraz, který se má vypsat. Tím získáte rychlý přehled bez zbytečného přerušování běhu.

Pokročilé techniky, které vám ušetří čas Kromě klasických breakpointů vyzkoušejte podmíněné breakpointy – stačí kliknout pravým tlačítkem na číslo řádku a zvolit možnost přidat podmínku. Breakpoint se pak aktivuje pouze tehdy, když je splněna vámi zadaná podmínka, například když proměnná dosáhne určité hodnoty. To je neocenitelné při ladění cyklů nebo častých funkcí. Dalším užitečným nástrojem je watch expression – v panelu Watch si můžete přidat libovolný výraz, jehož hodnota se průběžně aktualizuje při každém kroku. Tím sledujete klíčové hodnoty bez nutnosti vypisovat je do konzole.

Nejdůležitější částí testu není samotný kód, ale to, co testujete. Zaměřte se na hraniční případy: co se stane, když funkce dostane nulu, záporné číslo, prázdný řetězec nebo null? Právě tam se nejčastěji skrývají chyby. Napište tři testy pro jednu funkci: jeden pro běžný vstup, jeden pro hraniční hodnotu a jeden pro neočekávaný vstup. Tím zajistíte, že váš kód nefunguje jen pro příklad z tutoriálu, ale i v reálném nasazení.