3. diel - Ladenie programu a hraničnými
V predchádzajúcej lekcii, Nástroje pre debugging a internetové prehliadače , sme si ukázali, ako využiť nástroje vo webových prehliadačoch pre debugging.
Pri programovaní niekedy narazíme na tú nepríjemnú chvíľu, kedy nám niečo nefunguje. Program obsahuje chyby alebo sa nestane to, čo by sa stať malo. Procesu hľadania a potom následnému opravovanie chýb sa hovorí debugging.
Debuggovania
Debuggovania nie je jednoduché, avšak našťastie všetky moderné
prehliadače už obsahujú svoje vlastné nástroje na jeho razantné
zľahčenie. Na účely tohto článku som si vytvoril jednoduchý projekt na
sčítanie dvoch čísel. Kód má logickú chybu, ktorou sa pokúsime neskôr
pomocou nástrojov opraviť. Kód pre súbor script.js:
function add() { let number1 = document.getElementById("a").value; let number2 = document.getElementById("b").value; document.getElementById("result").innerHTML = number1 + number2; }
Súbor 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>
Otvoríme si zase konzolu, avšak hore vyberme rubriku Sources
(V Mozilla Firefox rubrika Debugger). Tu sa môžeme preklikať k
nášmu súboru:
Pokiaľ si vyskúšame našu "kalkulačku", tak razom zistíme, že nám
nefunguje. Očakávané správanie bolo, že po zadaní dvoch čísel sa nám po
stlačení tlačidla Sečíst čísla spočítajú. Ovšem ak
zadáme potrebné 5 a 6, po stlačení tlačidla sa
nám zobrazí 56. Skúsme si pomocou nástrojov v rubrike
Sources program opraviť.
Hraničnými
Môžeme predpokladať, že táto chyba by bola viditeľná, keby sme zastavili interpretáciu kódu pred tým, než dôjde k zavolanie funkcie z dôvodu stlačení tlačidla. To nám umožní takzvané Event Listener Breakpoints úplne napravo:
Po pravej strane máme možnosť rozkliknúť Event Listener
Breakpoints, nájsť rubriku Mouse a následne zvoliť
event click. Vyskúšajme si, že sa nám naozaj interpretácia
kódu po kliknutí na tlačidlo zastaví.
Toto nie je jediný typ Breakpoint, ktoré sme schopní nastaviť. Zastaviť môžeme aj na konkrétnom riadku kódu, stačí, keď pri prezeraní súboru klikneme na číslo symbolizujúce určitý riadok. Kód sa nám na danom riadku zastaví:
V pravom hornom rohu si tiež všimnime tlačidiel. Prvé tlačidlo jenom obnoví chod kódu. Druhé tlačidlo preskočí aktuálnu funkciu, v ktorej sa nachádza a skočí funkcií k ďalšej. Tretie tlačidlo slúži k skoku k ďalšiemu zavolanie akejkoľvek funkcie. Ďalšie tlačidlo už podľa názvu vystúpi z aktuálnej funkcie a posledný len urobí "o krok dopredu vykonaní kódu". Posledné dve oddelené tlačidlá slúžia na zakázanie všetkých Breakpoint a nastavení, či chceme automaticky zastaviť kompiláciu pri výnimke (error).
Informácie, zmeny za behu programu a watches
Je teda pravdepodobné, že sa chyba deje na riadku, kde by sa obe čísla mala sčítať. Skúsime na daný riadok teda dať breakpoint a vyvolať ho:
Napravo možno vidieť informácie o funkciách a premenných. Tiež si
môžeme všimnúť chyby. Vyzerá to, že naše čísla sú uložené v
dátovom typu string. Vďaka tomu sa stane, že reťazca (čísla)
spojíme namiesto toho, aby sme čísla sčítali. To si môžeme potvrdiť aj
pomocou takzvaných watches. Keď klikneme hore vpravo u rubriky
Watches na tlačidlo + a napíšeme
typeof number1. Skutočne vidíme, že premenná je uložená v
dátovom typu string (textový reťazec):
Skúsme si otvoriť konzolu inú, než ktorú sme používali doteraz. Ak nemáme otvorenú priehradku, urobme tak klávesou ESC:
Chyby sa konečne môžeme zbaviť pomocou prevedenie oboch čísel do iného dátového typu. Vykonáme to priamo z konzoly napísaním:
parseInt(number1) + parseInt(number2);
Všetko už funguje, ako má. Môžeme to vyskúšať prepísať aj priamo vo
script.js v prehliadači:
Súbor uložíme pomocou klávesov CTRL + S. Teraz môžeme otestovať aj naši "kalkulačku" v prehliadači. Len si dajme pozor na to, že súbor neukladáme lokálne, ale iba v prehliadači !! Úpravu súboru musíme vykonať teda lokálne, ako sme zvyknutí.
debugger;
Breakpoint môžeme pridať aj priamo v kóde, a to kľúčovým slovom
debugger;. Ak máme otvorenú konzolu, prehliadač nám na tomto
mieste zastaví rovnako, ako by sme klikli na číslo vedľa riadku.
Pre dnešok je to všetko. Veľa šťastia pri debuggovania!
V ďalšej lekcii, Debugging vo vývojovom prostredí Visual Studio Code , si ukážeme konkrétne vývojové prostredie Visual Studio Code a ako ho možno využiť pri Debugging.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 63x (1.18 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript
