Lekce 2 - Nástroje pro debugging a internetové prohlížeče
V minulé lekci, Debugging: Úvod a terminologie, jsme si prošli základní pojmy a koncepty na téma debugging a ukázali si přehled o tomto kurzu.
V dnešní lekci si ukážeme, jaké nástroje pro ladění můžeme použít a také si řekneme pár slov o tom, jak funguje JavaScript.
Jak funguje JavaScript
Rozdíl, který překvapí i hodně programátorů je ten, že JavaScriptu
nerozumí počítače, ovšem ale až webové prohlížeče. Nejedná se tedy o
kompilovaný, ale o interpretovaný jazyk. Kompilovaný jazyk
je po kompilaci programu vyjádřen v instrukcích pro cílový počítač. Tedy
metoda pro sčítání může být přímo vyjádřena jako instrukce
ADD ve zdrojovém kódu. Naopak v interpretovaném jazyce program
není přímo přeložen cílovým počítačem, ovšem až nějakým jiným
programem zvaný interpreter. V našem případě jde o prohlížeč. Naši
zmíněnou funkci pro sčítání by interpreter poznal až při běhu aplikace
a zavolal by si svoji vlastní funkci add(a,b), která by
samozřejmě byla zase přeložena do zdrojového kódu. Tenhle překlad se
děje za sebou řádek po řádku. Samozřejmě existují určité způsoby,
které překlad kódu zrychlují, jako například rozeznání již známého
kódu.
Konzole
Moderní prohlížeče již mají zabudované vývojářské nástroje pro JavaScript a konzole je nedílnou součástí. Můžeme ji využít k záznamu informací a také pomoci ní přímo manipulovat s příkazy, proměnnými a vytvářet nové funkce.
V prohlížečích Google Chrome a Opera se ke konzoli dostaneme stisknutím klávesové zkratky Ctrl + Shift + J,
V prohlížeči Mozilla Firefox využijeme zkratky Ctrl + Shift + K. Obrázky dále v článku budou sice pocházet z prohlížeče Chrome, ovšem konzole v obou prohlížečích jsou téměř totožné a pokud se naskytne nějaký větší rozdíl, bude na něj upozorněno.
Změna obsahu stránky pomocí konzole
Protože do konzole jde psát i klasický JavaScript, můžeme změnit obsah stránky "za běhu programu". Vytvořme si soubor HTML a v něm odstavec:
<p id="hello"></p>
Když stránku otevřeme, nepřekvapivě se nám zobrazí prázdná stránka:
Otevřeme proto konzoli, napíšeme:
document.getElementById("hello").textContent = "Hello, World!";
A potvrdíme klávesou Enter:
Můžeme vidět, že se nám okamžitě na stránce námi napsaná slova objevila. To samozřejmě funguje i na ostatní příkazy. Pokud si do našeho souboru přidáme prázdný nadpis:
<p id="hello"></p> <h1></h1>
Není problém i ten později změnit v naši konzoli (musíme stránku nejdříve znovu načíst):
Vytváření a čtení výstupu
Do konzole lze také zapisovat přímo ze zdrojového kódu a to pomocí
zavolání funkce console.log(). Vytvořme si jednoduchý skript,
který nám do konzole zapíše nějakou větičku. Nejprve si tedy vytvoříme
soubor script.js, který naimportujeme do naší HTML stránky:
<!DOCTYPE html> <html> <head> <title>Test</title> <script src="script.js"></script> <meta charset="utf-8"> </head> <body> </body> </html>
Do souboru script.js vložíme následující obsah:
console.log("Hello world!");
Když stránku otevřeme, nejde si nevšimnout, že se nám do konzole něco
vypsalo. Taky napravo od tohoto textu si všimněte proklikávacího textu
script.js:1:
Po kliknutí na něj se dozvíme, odkud přesně výzva o výstup do konzole přišla a zobrazí se nám náš skript:
Tenhle výstup můžeme formátovat za použití
console.table(). Vytvořme si jednoduché pole:
let lidi = ["Petr Novák", "Jana Čechová", "Petr Nejedlý"];
To si následně můžeme pomocí již zmíněné funkce přímo v konzoli vypsat a vidíme, že se nám výpis sám naformátuje do tabulky:
Nedílnou součástí je taky sledování chyb a upozornění. Pokud váš program nefunguje, je velká šance, že k tomu najdete nějaké dodatečné informace v konzoli. Do našeho skriptu přidáme následující kód:
document.getElementById("left").textContent = "Hi!";
Háček je ovšem v tom, že žádný element s ID left na
naší stránce neexistuje. JavaScript nám proto v konzoli vyhodí chybu:
Pokud bychom podle intuitivní chybové hlášky nepřišli na to, kde je
chyba, může nám debugger ještě více pomoct. Může nám pomoct v tom, co u
chybové hlášky klikneme na již zmiňovaný text script.js:1.
Zobrazí se nám nová záložka a chyba se podtrhne červeně:
Příkazy nesouvisející se stránkou
Konzoli lze také využít jako testovací prostor pro náš kód. Můžeme v konzoli vytvářet celé funkce a ty pak následně zavolat. Napíšeme do konzole jednoduchou funkci na sčítání a potvrdíme:
function add(a, b) { return a + b; }
Funkci, kterou jsme právě deklarovali zase v konzoli zavoláme:
add(25, 35);
Dvě čísla se nám sečtou:
Do konzole můžeme psát i triviální příkazy. Zkuste si
napsat třeba 10 + 10.
V další lekci, Ladění programu a breakpointy, si vyladíme malý program v JavaScriptu. Také si ukážeme, co je to debugger a breakpointy.
