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

Lekce 4 - Debugging ve vývojovém prostředí Visual Studio Code

V předchozí lekci, Ladění programu a breakpointy, jsme vyladili malý program v JavaScriptu. Také jsme si vysvětlili, co je to debugger a víme, co jsou to breakpointy.

Různá vývojové prostředí nám přímo nebo prostřednictvím rozšíření nabízejí již integrované nástroje pro debugging. V tomto tutoriálu ladění v JavaScriptu se podíváme na vývojové prostředí Visual Studio Code. Ukážeme si, jak ho můžeme při debuggingu využít a nahradit většinu nástrojů, které jsme museli hledat až v prohlížeči. Dosáhneme tím vyšší produktivity, rychlosti a pohodlí. Ač se budeme bavit o konkrétním programu, podobné funkce existují skoro ve všech vývojových prostředích.

Pro ukázku využijeme příklad z lekce Ladění programu a breakpointy. Nejprve HTML kód ze souboru 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>

A ještě JavaScript ze souboru script.js:

function add() {
    let number1 = document.getElementById("a").value;
    let number2 = document.getElementById("b").value;

    document.getElementById("result").innerHTML = parseInt(number1) + parseInt(number2);
}

Oba soubory jsou k dispozici ke stažení pod lekcí.

Visual Studio Code

Visual Studio Code je editor zdrojového kódu, který vyvíjí společnost Microsoft. Dostupný je na operačních systémech Windows, Linux i MacOS. Software je zdarma a pro zajímavost je naprogramován v jazycích JavaScript a TypeScript. Stáhnout ho můžeme přes oficiální stránky code.visualstu­dio.com. Instalace je jednoduchá, pouze odklikneme licenční podmínky a následně si zvolíme cestu, kde se má program nainstalovat. Je také vhodné odkliknout možnosti přidání zkratky do kontextového menu (pravé kliknutí na soubor či složku). Po pravém kliknutí na složku můžeme složku otevřít ve VS Code a nemusíme ručně cestu hledat po zapnutí programu.

Nastavení prostředí

Jako první otevřeme svou pracovní složku se soubory index.html a script.js. Klikneme na Run, dále na Start Debugging:

Run and Start debugging - Visual Studio Code, WebStorm a debuggování JS

VS Code nás vyzve k výběru debuggeru. Vybereme možnost Web app (Chrome):

Výběr debuggeru – Web App Chrome - Visual Studio Code, WebStorm a debuggování JS

Zobrazí se nám také editace souboru launch.json. Berme zřetel na parametry a zkontrolujme si, že je vše v pořádku:

Launch file - Visual Studio Code, WebStorm a debuggování JS

Soubor samozřejmě nebude a ani nesmí být stejný jako na obrázku výše, některé parametry mohou být jiné či dokonce nepřítomné. Ve zkratce se ovšem stačí pouze podívat na to, zda je správně cesta k souboru. To si můžeme zkontrolovat, pokud se pokusíme spustit soubor zelenou šipkou vlevo nahoře. Pokud se nám nic nenačte, zkontrolujme si, jakou adresu máme v prohlížeči napsanou. Poradí nám, co může být špatně. Může se nám vygenerovat také tento univerzální soubor s proměnnými:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

V takovém případě v něm musíme specifikovat soubor, který chceme spustit - parametr file. Konfigurace bude tedy například taková:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "file": "C:\\Users\\elisk\\Documents\\ITnetwork\\debugging\\index.html", // zde doplníme cestu k souboru index.html
            "webRoot": "${workspaceFolder}"
        }
    ]
}

V cestě musí být vždy dvě zpětná lomítka. Jedno zpětné lomítko se využívá pro vkládání tzv. escape sekvencí s tím, že po něm vždy následuje speciální znak. Zdvojením lomítek dáváme najevo, že nechceme vložit nějakou sekvenci, ale právě jen znak \.

Ukázka debuggingu

Ve Visual Studio Code můžeme nyní přidávat breakpointy přímo v programu a to po kliknutí na číslo řádku, jak jsme zvyklí. Pojďme si to vyzkoušet přidáním breakpointu na řádek, kde dochází k součtu možností:

Breakpoint ve VS Code - Visual Studio Code, WebStorm a debuggování JS

Když pak náš program spustíme a vyvoláme breakpoint po zadání dvou hodnot a zmáčknutí tlačítka Sečíst, dostaneme ve Visual Studio Code do módu debuggingu. Nalevo vidíme hodnoty proměnných, možnost přidat Watch a v dolní části také konzoli, ve které můžeme dále debuggovat. K dispozici máme samozřejmě i tlačítka na opětovné spuštění kódu a na jeho zastavení:

Debugging mód ve VS Code - Visual Studio Code, WebStorm a debuggování JS

Podmíněný breakpoint

Ve Visual Studio Code můžeme nastavovat i podmíněné breakpointy. Podmíněný breakpoint přidáme tak, že klikneme pravým tlačítkem na breakpoint a zvolíme nabídku Edit breakpoint.... Do řádku pak následně napíšeme podmínku, která musí být splněna, aby se breakpoint aktivoval. Vyzkoušíme si to tak, že budeme chtít aktivovat breakpoint, pokud se první zadané číslo rovná deseti:

Podmíněný breakpoint - Visual Studio Code, WebStorm a debuggování JS

Nyní zkusme sečíst na stránce čísla 10 a 10. Program se nezastaví. Je tomu tak proto, že tři rovnítka znamenají kromě rovnosti hodnoty také rovnost datového typu. Jelikož jsme číslo převzali s textového pole, datový typ je string (textový řetězec): "10". Tento string však porovnáváme s datovým typem int (celé číslo) a tyto dva datové typy nejsou sobě rovné. Pokud bychom tedy chtěli, aby se breakpoint spustil, musíme zadat místo tří rovnítek rovnítka dvě ==. Případně zanechat rovnítka tři, ale nejprve naparsovat proměnnou number1:

parseInt(number1) === 10

To je k dnešní lekci vše.

V příští lekci, Úvod do vývojového prostředí WebStorm, se podíváme na funkce IDE WebStorm a na jeho výhody.


 

Měl 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 47x (1.35 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Ladění programu a breakpointy
Všechny články v sekci
Visual Studio Code, WebStorm a debuggování JS
Přeskočit článek
(nedoporučujeme)
Úvod do vývojového prostředí WebStorm
Článek pro vás napsal Filip Zeman
Avatar
Uživatelské hodnocení:
108 hlasů
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