2. diel - Nástroje pre debugging a internetové prehliadače
V minulej lekcii, Debugging: Úvod a terminológie , sme si prešli základné pojmy a koncepty na tému debugging a ukázali si prehľad o tomto kurze.
V dnešnej lekcii budeme hovoriť o ladenie skriptov, ukážeme si, aké nástroje pri tom môžeme použiť a tiež si povieme pár slov o tom, ako funguje JavaScript.
Ako funguje javascript
Rozdiel, ktorý prekvapí aj veľa programátorov je ten, že JavaScriptu
nerozumie počítače, avšak ale až webové prehliadače. Nejedná sa teda o
kompilovaný, ale o interpretovaný jazyk. Kompilovaný jazyk
je po kompilácii programu vyjadrený v inštrukciách pre cieľový počítač.
Teda metóda pre sčítanie môže byť priamo vyjadrená ako inštrukcie
ADD v zdrojovom kóde. Naopak v interpretovanom jazyku program nie
je priamo preložený cieľovým počítačom, avšak až nejakým iným
programom zvaný interpreter. V našom prípade ide o prehliadač. Naši
zmienenú funkciu pre sčítanie by interpreter spoznal až pri behu aplikácie
a zavolal by si svoju vlastnú funkciu add(a,b), ktorá by bola
samozrejme zase preložená do zdrojového kódu. Tento preklad sa deje za sebou
riadok po riadku. Samozrejme existujú určité spôsoby, ktoré preklad kódu
zrýchľujú, ako napríklad rozoznanie už známeho kódu.
Konzola
Moderné prehliadače už majú zabudované vývojárske nástroje pre JavaScript a konzola je neoddeliteľnou súčasťou. Môžeme ju využiť k záznamu informácií a tiež pomôcť nej priamo manipulovať s príkazmi, premennými a vytvárať nové funkcie.
V prehliadačoch Google Chrome a Opera sa ku konzole dostaneme stlačením klávesovej skratky Ctrl + Shift + J,
V prehliadači Mozilla Firefox využijeme skratky Ctrl + Shift + K. Obrázky ďalej v článku budú síce pochádzať z prehliadača Chrome, avšak konzoly v oboch prehliadačoch sú takmer totožné a ak sa naskytne nejaký väčší rozdiel, bude na neho upozornené.
Zmena obsahu stránky pomocou konzoly
Pretože do konzoly ide písať aj klasický JavaScript môžeme zmeniť obsah stránky "za behu programu". Vytvorme si súbor HTML a v ňom odsek:
<p id="hello"></p>
Keď stránku otvoríme, prekvapivá sa nám zobrazí prázdna stránka:
Otvoríme preto konzolu, napíšeme:
document.getElementById("hello").textContent = "Hello, World!";
A potvrdíme klávesou Enter:
Môžeme vidieť, že sa nám okamžite na stránke nami napísané slová objavila. To samozrejme funguje aj na ostatné príkazy. Pokiaľ si do nášho súboru pridáme prázdny nadpis:
<p id="hello"></p> <h1></h1>
Nie je problém aj ten neskôr zmeniť v našu konzolu (musíme stránku najskôr znova načítať):
Vytváranie a čítanie výstupu
Do konzoly možno tiež zapisovať priamo zo zdrojového kódu a to pomocou
zavolanie funkcie console.log(). Vytvorme si jednoduchý skript,
ktorý nám do konzoly zapíše nejakú vetičku. Najprv si teda vytvoríme
súbor script.js, ktorý importujete do našej HTML stránky:
<!DOCTYPE html> <html> <head> <title>Test</title> <script src="script.js"></script> <meta charset="utf-8"> </head> <body> </body> </html>
Do súboru script.js vložíme nasledujúci obsah:
console.log("Hello world!");
Keď stránku otvoríme, nejde si nevšimnúť, že sa nám do konzoly niečo
vypísalo. Taky napravo od tohto textu si všimnite proklikávacího textu
script.js:1:
Po kliknutí naň sa dozvieme odkiaľ presne výzva o napísanie do konzoly prišla a zobrazí sa nám náš skript:
Neoddeliteľnou súčasťou je taky sledovanie chýb a upozornenia. Ak váš program nefunguje, je veľká šanca, že na to nájdete nejaké dodatočné informácie v konzole. Do nášho skriptu pridáme nasledujúci kód:
document.getElementById("left").textContent = "Hi!";
Háčik je však v tom, že žiadny element s ID left na našej
stránke neexistuje. JavaScript nám preto v konzole vyhodí chybu:
Ak by sme podľa intuitívne chybové hlášky neprišli na to, kde je chyba,
môže nám debugger ešte viac pomôcť. Môže nám pomôcť v tom, čo u
chybové hlášky klikneme na už spomínaný text script.js:1.
Zobrazí sa nám nová záložka a chyba sa podčiarkne červeno:
Príkazy nesúvisiace so stránkou
Konzolu možno tiež využiť ako testovací priestor pre náš kód. Môžeme v konzole vytvárať celej funkcie a tie potom následne zavolať. Napíšeme do konzoly jednoduchú funkciu na sčítanie a potvrdíme:
function add(a, b) { return a + b; }
Funkciu, ktorú sme práve deklarovali zase v konzole zavoláme:
add(25, 35);
Dve čísla sa nám spočítajú:
Do konzoly môžeme písať aj triviálne príkazy. Skúste si
napísať treba 10 + 10.
Debuggovania
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 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, Ladenie programu a hraničnými , si vyladíte malý program v JavaScripte. Tiež si ukážeme, čo je to debugger a hraničnými.
