Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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.

debugging_uvod - Debugging

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:

konzole_zmena_odstavce - Debugging

Otvoríme preto konzolu, napíšeme:

document.getElementById("hello").textContent = "Hello, World!";

A potvrdíme klávesou Enter:

konzole_getElementById - Debugging

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

konzole_queryselector - Debugging

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:

Debugging

Po kliknutí naň sa dozvieme odkiaľ presne výzva o napísanie do konzoly prišla a zobrazí sa nám náš skript:

Debugging

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:

chyba syntaxe - Debugging

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:

Chybová hláška debugger - Debugging

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

konzola nesúvisiace so stránkou - Debugging

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:

sources_tree - Debugging

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:

Debugging

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

tlacitka_debugging - Debugging

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:

debugging_chyba_scope - Debugging

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

watches_datovy_typ - Debugging

Skúsme si otvoriť konzolu inú, než ktorú sme používali doteraz. Ak nemáme otvorenú priehradku, urobme tak klávesou ESC:

console_paused - Debugging

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:

Debugging

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.


 

Predchádzajúci článok
Debugging: Úvod a terminológie
Všetky články v sekcii
Debugging
Preskočiť článok
(neodporúčame)
Ladenie programu a hraničnými
Článok pre vás napísal Filip Zeman
Avatar
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