Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Hledáme fulltime PHP programátora do ITnetwork týmu - 100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!
Python týden

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.

debugging_uvod

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:

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

Otevřeme proto konzoli, napíšeme:

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

A potvrdíme klávesou Enter:

konzole_getElementById

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

konzole_queryselector

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:

ctable

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:

Syntaktická chyba

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

Chybová hláška debugger

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:

konzole nesouvisející se stránkou

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.


 

Předchozí článek
Debugging: Úvod a terminologie
Všechny články v sekci
Debugging
Článek pro vás napsal Filip Zeman
Avatar
Jak se ti líbí článek?
2 hlasů
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 (8)

 

 

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