Lekce 6 - Debugging ve vývojovém prostředí WebStorm
V minulé lekci, Úvod do vývojového prostředí WebStorm, jsme se podívali na funkce IDE WebStorm a na jeho výhody.
Dnes si ukážeme, jak používat WebStorm při debuggingu tak, jako Visual Studio Code. Znova připomenu, že je debuggování podobné ve všech programech. Po těchto dvou lekcích byste se měli tedy lehce zorientovat i v jiných vývojových prostředích.
Pro ukázku využijeme zase 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ř. je ke stažení pod lekcí.
WebStorm
Vývojáři JetBrains prezentují WebStorm jako „nejchytřejší IDE pro Javascript“. Debugguje se v něm podobně, ovšem má nějaké funkce navíc. WebStorm má měsíční zkušební dobu, popřípadě je pro studenty zdarma. WebStorm stáhneme z oficiálních stránek na Windows, Linux či MacOS. Instalace je taktéž jednoduchá. Odsouhlasíme smluvní podmínky, vybereme složku pro instalaci a poté můžeme vybrat doplňující "funkce" jako přidání zkratky do kontextového menu složky. Pravým kliknutím na složku pak budeme mít možnost něco jako "Otevřít složku jako WebStorm projekt" (ang. "Open Folder as WebStorm Project"), což nám ušetří hledání projektové složky při zapnutí programu.
Nastavení prostředí
Nejprve otevřeme složku s projektem (nebo soubor). Uděláme to pravým kliknutím na složku a otevřeme složku jako WebStorm projekt. Popř. zapneme WebStorm a vlevo nahoře klikneme na File >Open a vybereme složku s projektem.
Přesunutí se do módu debuggingu je v tomto programu velmi jednoduché.
Stačí nám nalevo ve stromové nabídce vybrat soubor index.html,
kliknout na něj pravým tlačítkem a zvolit možnost Debug
index.html. Otevře se nám prostředí pro debugging společně s
webovým prohlížečem, podobně, jako jsme už viděli u Visual studio
Code:
Konfiguraci, tedy prohlížeč a změnu URL souborů můžeme editovat vpravo nahoře po kliknutí na název souboru a zvolení Edit configurations….
Ukázka debuggingu
Debugging jak za pomocí prohlížeče, tak ve Webstormu velmi podobný, my
si představíme základní funkce za pomocí debuggingu v Chromu. Mezi
debuggováním v Node.js a v prohlížeči můžeme
přepínat podle toho, v jakém typu souboru začneme debuggovat. Pokud v
souboru *.html, bude se jednat o debugging s prohlížečem, soubor
*.js naznačuje debugging pomocí Node.js. Node.js je prostředí,
v jakém se debugguje většinou serverová část JavaScriptu. Pokud jste
úplní nováčci v JavaScriptu, není třeba si toho všímat či bát.
Přidání breakpointu je hodně podobné ve všech programech. Prostě klikneme na volné místo vedle čísla, které označuje pořadí řádku. Umístíme si ho klasicky na řádek starající se o sčítání dvou čísel:
Program si můžeme zapnout a breakpoint zaktivovat zadáním dvou čísel a kliknutím na tlačítko. Kód se nám na daném místě skutečně zastaví. Povšimněme si, že vidíme hodnoty proměnných. Nepotřebujeme taky prohlížeč restartovat nebo obnovovat. Po zavření souboru či celého programu, breakpointy zůstanou stále uloženy. To může zapříčinit to, že se v breakpointech můžeme ztratit. K vyřešení tohoto problému nám slouží tlačítko View breakpoints…:
To samé dosáhneme klávesovou zkratkou
Ctrl+Shift+F8. Zde vidíme přehledně
breakpointy v celém našem projektu. Ve stejném dialogovém okně můžeme
také nastavit breakpoint pokaždé, když dojde k nějaké výjimce (klíčové
slovo throw v programu). Uděláme tak zaškrtnutím pole
JavaScript Exception Breakpoints.
Pokud chceme k breakpointu dodat podmínku, uděláme tak po kliknutí na breakpoint v kódu pravým tlačítkem. Breakpoint se nám tak spustí pouze tehdy, kdy je podmínka splněna. Je to stejný způsob jak ve Visual Studio Code.
Nic nám nebrání v tom, abychom nevyužili konzoli pro debugging:
Watches přidáváme tlačítkem + nebo také klávesovou zkratkou Insert:
Jak jsem psal na začátku, přestože jsme si představili konkrétní programy, funkce pro debugging má skoro každé vývojové prostředí podobné. Pro dnešní lekci to je ale již vše.
V další lekci, Pokročilá nastavení ve vývojovém prostředí WebStorm, si projdeme nastavení WebStormu.
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 24x (640 B)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
