Lekce 3 - Ladění programu a breakpointy
V předchozí lekci, Nástroje pro debugging a internetové prohlížeče, jsme si ukázali, jak využít nástroje ve webových prohlížečích pro debugging.
Při programování někdy narazíme na tu nepříjemnou chvíli, kdy nám něco nefunguje. Program obsahuje chyby anebo se nestane to, co by se stát mělo. Procesu hledání a pak následnému opravování chyb se říká debugging.
Debuggování
Debuggování není jednoduché, ovšem naštěstí všechny moderní
prohlížeče již obsahují svoje vlastní nástroje na jeho razantní
zlehčení. Pro účely tohoto článku jsem si vytvořil jednoduchý projekt na
sčítání dvou čísel. Kód má logickou chybu, kterou se pokusíme později
pomocí nástrojů opravit. Kód pro soubor script.js:
function add() { let number1 = document.getElementById("a").value; let number2 = document.getElementById("b").value; document.getElementById("result").innerHTML = number1 + number2; }
Soubor index.html:
<!DOCTYPE html> <html> <head> <title>Sčítač</title> <script src="script.js"></script> <meta charset="utf-8"> </head> <body> <p>Číslo 1</p> <input id="a" type="number"> <p>Číslo 2</p> <input id="b" type="number"> <br /> <br /> <input class="button" type="button" onclick="add()" value="Sečíst"> <p id="result">0</p> </body> </html>
Otevřeme si zase konzoli, ovšem nahoře vyberme rubriku
Sources (V Mozilla Firefox rubrika Debugger). Zde se
můžeme proklikat k našemu souboru:
Pokud si vyzkoušíme naši "kalkulačku", tak rázem zjistíme, že nám
nefunguje. Očekávané chování bylo, že po zadání dvou čísel se nám po
zmáčknutí tlačítka Sečíst čísla sečtou. Ovšem pokud
zadáme třeba 5 a 6, po zmáčknutí tlačítka se
nám zobrazí 56. Zkusme si pomocí nástrojů v rubrice
Sources program opravit.
Breakpointy
Můžeme předpokládat, že tahle chyba by byla viditelná, kdybychom zastavili interpretaci kódu před tím, než dojde k zavolání funkce z důvodu stisku tlačítka. To nám umožní takzvané Event Listener Breakpoints úplně napravo:
Po pravé straně máme možnost rozkliknout Event Listener
Breakpoints, nalézt rubriku Mouse a následně zvolit
event click. Vyzkoušejme si, že se nám doopravdy interpretace
kódu po kliknutí na tlačítko zastaví.
Tohle není jediný typ breakpointu, které jsme schopni nastavit. Zastavit můžeme i na konkrétním řádku kódu, stačí, když při prohlížení souboru klikneme na číslo symbolizující určitý řádek. Kód se nám na daném řádku zastaví:
V pravém horním rohu si také všimněme tlačítek. První tlačítko jenom obnoví chod kódu. Druhé tlačítko přeskočí aktuální funkci, ve které se nachází a skočí funkcí k další. Třetí tlačítko slouží ke skoku k dalšímu zavolání jakékoliv funkce. Další tlačítko již podle názvu vystoupí z aktuální funkce a poslední jenom udělá "o krok dopředu vykonání kódu". Poslední dvě oddělená tlačítka slouží k zakázání všech breakpointů a nastavení, jestli chceme automaticky zastavit kompilaci při výjimce (erroru).
Informace, změny za běhu programu a watches
Je tedy pravděpodobné, že se chyba děje na řádku, kde by se obě čísla měla sčítat. Zkusíme na daný řádek tedy dát breakpoint a vyvolat ho:
Napravo lze vidět informace o funkcích a proměnných. Taky si můžeme
všimnout chyby. Vypadá to, že naše čísla jsou uložena v datovém typu
string. Díky tomu se stane, že řetězce (čísla) spojíme
namísto toho, abychom čísla sečetli. To si můžeme potvrdit i pomocí
takzvaných watches. Když klikneme nahoře vpravo u rubriky
Watches na tlačítko + a napíšeme
typeof number1. Skutečně vidíme, že proměnná je uložena v
datovém typu string (textový řetězec):
Zkusme si otevřít konzoli jinou, než kterou jsme používali doposud. Pokud nemáme otevřenou přihrádku, udělejme tak klávesou ESC:
Chyby se konečně můžeme zbavit pomocí převedení obou čísel do jiného datového typu. Provedeme to přímo z konzole napsáním:
parseInt(number1) + parseInt(number2);
Všechno již funguje, jak má. Můžeme to vyzkoušet přepsat i přímo ve
script.js v prohlížeči:
Soubor uložíme pomocí kláves CTRL + S. Teď můžeme otestovat i naši "kalkulačku" v prohlížeči. Jen si dejme pozor na to, že soubor neukládáme lokálně, ale pouze v prohlížeči!! Úpravu souboru musíme provést tedy lokálně, jak jsme zvyklí.
debugger;
Breakpoint můžeme přidat i přímo v kódu, a to klíčovým slovem
debugger;. Pokud máme otevřenou konzoli, prohlížeč nám na
tomto místě zastaví stejně, jako bychom klikli na číslo vedle řádku.
Pro dnešek je to vše. Hodně štěstí při debuggování!
V další lekci, Debugging ve vývojovém prostředí Visual Studio Code, si ukážeme konkrétní vývojové prostředí Visual Studio Code a jak ho lze využít při debuggingu.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 63x (1.18 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
