Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy
Discount week - May - 50

Lekce 5 - Debugging ve vývojovém prostředí WebStorm Nové

V minulé lekci, Debugging ve vývojovém prostředí Visual Studio Code, jsme si řekli něco o debuggingu přímo ve vývojovém prostředí Visual Studio Code.

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. Komerční verze je za 1399 Kč (€59) na rok, druhý rok cena klesne, třetí rok ještě víc a drží stabilně. 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í

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

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:

wsdebugging

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:

debuggingbreakpointWS

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

wsdebuggingwb
dialogzobrazbreakpointy

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:

debugkonzolews

Watches přidáváme tlačítkem + nebo také klávesovou zkratkou Insert:

watchesjs

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.


 

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 1x (640 B)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Debugging ve vývojovém prostředí Visual Studio Code
Všechny články v sekci
Visual Studio Code, WebStorm a debugování JS
Č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 (2)

 

 

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