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.visualstudio.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:
VS Code nás vyzve k výběru debuggeru. Vybereme možnost Web app (Chrome):
Zobrazí se nám také editace souboru launch.json. Berme
zřetel na parametry a zkontrolujme si, že je vše v pořádku:
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í:
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í:
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:
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 57x (1.35 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
