5. diel - Debugging vo vývojovom prostredí webstore
V minulej lekcii, Úvod do vývojového prostredia webstore , sme sa pozreli na funkcie IDE webstore a na jeho výhody.
Dnes si ukážeme, ako používať webstore pri Debugging tak, ako Visual Studio Code. Znova pripomeniem, že je debuggovania podobné vo všetkých programoch. Po týchto dvoch lekciách by ste sa mali teda ľahko zorientovať aj v iných vývojových prostrediach.
Pre ukážku využijeme zase príklad z minulej lekcie. Pokiaľ ho nemáte, prikladám ho tu:
<!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); }
Popr. je k stiahnutiu pod lekcií.
Webstore
Vývojári JetBrains prezentujú webstore ako "najchytrejší IDE pre Javascript". Debugguje sa v ňom podobne, avšak má nejaké funkcie navyše. Webstore má mesačnú skúšobnú dobu, prípadne je pre študentov zadarmo. Komerčná verzia je za 1399 Sk (€ 59) na rok, druhý rok cena klesne, tretí rok ešte viac a drží stabilne. Webstore stiahneme z oficiálnych stránok na Windows, Linux alebo MacOS. Inštalácia je taktiež jednoduchá. Odsúhlasíme zmluvné podmienky, vyberieme zložku pre inštaláciu a potom môžeme vybrať doplňujúce "funkcie" ako pridanie skratky do kontextového menu zložky. Pravým kliknutím na priečinok potom budeme mať možnosť niečo ako "Otvoriť zložku ako webstore projekt" (ang. "Open Folder as webstore Project"), čo nám ušetrí hľadanie projektovej zložky pri zapnutí programu.
Nastavenie prostredia
Najprv otvoríme zložku s projektom (alebo súbor). Urobíme to pravým kliknutím na priečinok a otvoríme zložku ako webstore projekt. Popr. zapneme webstore a vľavo hore klikneme na File-> Open a vyberieme zložku s projektom.
Presunutie sa do módu Debugging je v tomto programe veľmi jednoduché.
Stačí nám naľavo v stromovej ponuke vybrať súbor index.html,
kliknúť naň pravým tlačidlom a zvoliť možnosť Debug
index.html. Otvorí sa nám prostredie pre debugging spoločne s
webovým prehliadačom, podobne, ako sme už videli u Visual štúdio Code:
Konfiguráciu, teda prehliadač a zmenu URL súborov môžeme editovať vpravo hore po kliknutí na názov súboru a zvolenie Edit configurations ....
Ukážka Debugging
Debugging ako za pomocou prehliadača, tak vo Webstormu veľmi podobný, my
si predstavíme základné funkcie za pomocou Debugging v prehliadači Chrome.
Medzi debuggováním v Node.js a v prehliadači môžeme
prepínať podľa toho, v akom type súboru začneme debuggovat. Ak v súbore
*.html, bude sa jednať o debugging s prehliadačom, súbor
*.js naznačuje debugging pomocou Node.js. Node.js je prostredie, v
akom sa debugguje väčšinou serverová časť JavaScriptu. Ak ste úplní
nováčikovia v JavaScripte, netreba si to všímať či báť.
Pridanie Breakpoint je veľa podobné vo všetkých programoch. Proste klikneme na voľné miesto vedľa čísla, ktoré označuje poradie riadku. Umiestnime si ho klasicky na riadok starajúci sa o sčítaní dvoch čísel:
Program si môžeme zapnúť a breakpoint zaktivovať zadaním dvoch čísel a kliknutím na tlačidlo. Kód sa nám na danom mieste skutočne zastaví. Všimnime si, že vidíme hodnoty premenných. Nepotrebujeme taky prehliadač reštartovať alebo obnovovať. Po zatvorení súboru alebo celého programu, hraničnými zostanú stále uložené. To môže zapríčiniť to, že sa v Breakpoint môžeme stratiť. Na vyriešenie tohto problému nám slúži tlačidlo View breakpoints ...:
To isté dosiahneme klávesovou skratkou Ctrl + Shift +
F8. Tu vidíme prehľadne hraničnými v celom našom projekte. V
rovnakom dialógovom okne môžeme tiež nastaviť breakpoint zakaždým, keď
dôjde k nejakej výnimke (kľúčové slovo throw v programe).
Urobíme tak zaškrtnutím poľa JavaScript Exception
Breakpoints.
Ak chceme k Breakpoint dodať podmienku, urobíme tak po kliknutí na breakpoint v kóde pravým tlačidlom. Breakpoint sa nám tak spustí len vtedy, keď je podmienka splnená. Je to rovnaký spôsob ako vo Visual Studio Code.
Nič nám nebráni v tom, aby sme nevyužili konzolu pre debugging:
Watches pridávame tlačidlom + alebo tiež klávesovou skratkou Insert:
Ako som písal na začiatku, hoci sme si predstavili špecifické programy, funkcie pre debugging má skoro každé vývojové prostredie podobné. Pre dnešný lekciu to je ale už všetko.
V ďalšej lekcii, Automatické testovanie v JavaScripte , sa pozrieme na automatické testovanie.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 28x (640 B)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript
