Pouze tento týden sleva až 80 % na e-learning týkající se JavaScriptu
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Discount week - April - 30

Lekce 3 - Ladění programu a breakpointy Nové

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:

sources_tree

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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í:

tlacitka_debugging

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:

debugging_chyba_scope

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):

watches_datovy_typ

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:

console_paused

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ěla 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 4x (1.18 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Nástroje pro debugging a internetové prohlížeče
Všechny články v sekci
Debugging
Článek pro vás napsal Filip Zeman
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje vývoji aplikací v jazyce C# jak už ve sféře desktopové, tak mobilní či herní. Jako mladý člověk s nadšením sleduje nové technologie a postupy.
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!