Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
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í.
BF extended 2022

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

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 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 21x (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
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í:
22 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

 

 

Komentáře

Avatar
Romana Vavřichová:10. února 1:19

Debugger for Chrome je už Deprecated.

 
Odpovědět
10. února 1:19
Avatar
Blanka Svobodová:4. srpna 0:49

nemožnost stáhnutí debuggeru pro chrome činí lekci de facto zbytečnou. V JS debuggeru, který už v VSC mám je vše jinak, ještě česky, takže se mi nepodařilo ve výsledku nic. Už jen to, že namísto možnosti Chrome je tam Chrome Launhch a Chrome Attach. Pridani breakpointu taky nejde. :-(

Odpovědět
4. srpna 0:49
Kdy, když né teď. Kdo, když né já?
Avatar
Tomáš Jakubec :27. října 12:02

Bylo by dobré aktualizovat.... Odkazovaný doplněk je zastaralý.....

 
Odpovědět
27. října 12:02
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.

Zobrazeno 3 zpráv z 3.