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é 55x (1.18 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísal Filip Zeman

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Autor se věnuje vývoji aplikací v jazyce C# a Swift jak už ve sféře desktopové, tak mobilní či herní. Jako mladý člověk s nadšením sleduje nové technologie a postupy.

Aktivity