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 4 - Debugging ve vývojovém prostředí Visual Studio Code Nové

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 této lekci se podíváme na program 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šší produktivitě, 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 minulé lekce. Pokud ho nemáte, přikládám ho zde:

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

JS:

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

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

Popř. 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 jak na operačním systému Windows, tak i 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. Samo o sobě je VS Code "k ničemu", ale pomocí rozšíření nám umožňuje převést většinu nástrojů přímo do vývojového prostředí a podporovat tak různé jazyky, zkratky a další. Pojďme si to nyní nastavit.

Nastavení prostředí

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

Jako první musíme otevřeme svou pracovní složku. Připomínám, že soubory jsou z minulé lekce a je taktéž ke stažení níže pod článkem. Menu rozšíření začneme hledat kliknutím na poslední ikonku nalevo. Menu je také možné rozbalit pomocí klávesové zkratky Ctrl+Shift+X. Následně do vyhledávání zadáme chrome a nainstalujeme rozšíření Debugger for Chrome s počtem stažení v milionech:

instalace_rozsireni

Jako další je nutno nastavit samotný debugger. Vybereme vlevo rubriku Run (klávesová zkratka Ctrl+Shift+D) a klikneme na modré tlačítko Run and Debug. Následně zvolíme možnost Chrome:

nastaveni_debuggeru

Teď nezbývá nic jiného, než po kliknutí na šipku vybrat možnost Add configuration…. (Tato nabídka nemusí být při prvním spuštění vůbec nutná, namísto toho se nás IDE zeptá, zda chceme konfiguraci vytvořit.) Znova poté vyberme možnost Chrome:

nastaveni_konfigurace

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

launchjson

Soubor samozřejmě nebude a ani nesmí být stejný jako výše, dokonce některé parametry se mohou lišit. Ve zkratce se ovšem stačí pouze podívat, zda cesta k souboru je správná. 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 to, co může být špatně. Můžeme 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": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

V tomto případě tam 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": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "file": "C:\\Users\\Filip\\Documents\\itndebugging\\index.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

V cestě musí být vždy dvě zpětná lomítka. Jedno zpětné lomítko se využívá taktéž v programování či v regulárních výrazech. Po zpětném lomítku je vždy speciální znak. V našem případě je speciální znak taktéž zpětné lomítko, proto píšeme dvě za sebou.

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

breakpointVS

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, který by nám již měl být známý z Chromu. Nalevo vidíme hodnoty proměnných, možnost přidat Watches a v dolní části také konzoli, ve které můžeme dále debuggovat. Taky samozřejmě tlačítka na znovu zapnutí kódu a na jeho zastavení:

debugging_mod

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 zvolením nabídky Edit breakpoint.... Do řádku pak následně napíšeme podmínku, která musí být splněna, aby se breakpoint aktivoval. Třeba aby se první zadané číslo rovnalo deseti:

podminene_breakpointy

Nyní zkusme sečíst na stránce čísla 10 a 10. Program se nezastaví. Zkušenější z vás asi ví, ž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, ať se breakpoint spustí, je třeba zadat místo tří rovnítek rovnítka dvě == a nebo zanechání třech rovnítek, ale napřed naparsujeme číslo number1:

parseInt(number1) === 10

V další lekci, Debugging ve vývojovém prostředí WebStorm, si ukážeme konkrétní vývojové prostředí WebStorm 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 2x (640 B)
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
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 (4)

 

 

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