4. diel - Debugging vo vývojovom prostredí Visual Studio Code

V predchádzajúcej lekcii, Ladenie programu a hraničnými , sme vyladili malý program v JavaScripte. Tiež sme si vysvetlili, čo je to debugger a vieme, čo sú to hraničnými.

Rôzne vývojové prostredie nám priamo alebo prostredníctvom rozšírenia ponúkajú už integrované nástroje pre debugging. V tejto lekcii sa pozrieme na program Visual Studio Code. Ukážeme si, ako ho môžeme pri Debugging využiť a nahradiť väčšinu nástrojov, ktoré sme museli hľadať až v prehliadači. Dosiahneme tým vyššej produktivite, rýchlosti a pohodlia. Hoci sa budeme baviť o konkrétnom programe, podobné funkcie existujú skoro vo všetkých vývojových prostrediach.

Pre ukážku využijeme 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. k stiahnutiu pod lekcií.

Visual Studio Code

Visual Studio Code je editor zdrojového kódu, ktorý vyvíja spoločnosť Microsoft. Dostupné je ako na operačnom systéme Windows, tak aj Linux či MacOS. Softvér je zadarmo a pre zaujímavosť je naprogramovaný v jazykoch JavaScript a TypeScript. Stiahnuť ho môžeme cez oficiálne stránky code.visualstudio.com. Inštalácia je jednoduchá, len odklikneme licenčné podmienky a následne si zvolíme cestu, kde sa má program nainštalovať. Je tiež vhodné odkliknúť možnosti pridania skratky do kontextového menu (pravé kliknutie na súbor alebo priečinok). Po pravom kliknutí na priečinok môžeme zložku otvoriť vo VS Code a nemusíme ručne cestu hľadať po zapnutí programu. Samo o sebe je VS Code "k ničomu", ale pomocou rozšírenie nám umožňuje previesť väčšinu nástrojov priamo do vývojového prostredia a podporovať tak rôzne jazyky, skratky a ďalšie. Poďme si to teraz nastaviť.

Nastavenie prostredia

Ako prvý musíme otvoríme svoju pracovnú zložku. Pripomínam, že súbory sú z minulej lekcie a je taktiež k stiahnutiu nižšie pod článkom. Menu rozšírenie začneme hľadať kliknutím na poslednú ikonku naľavo. Menu je tiež možné rozbaliť pomocou klávesovej skratky Ctrl + Shift + X. Následne do vyhľadávania zadáme chrome a nainštalujeme rozšírenie Debugger for Chrome s počtom stiahnutí v miliónoch:

Ako ďalšie je nutné nastaviť samotný debugger. Vyberieme vľavo rubriku Run (klávesová skratka Ctrl + Shift + D) a klikneme na modré tlačidlo Run and Debug. Následne zvolíme možnosť Chrome:

Teraz nezostáva nič iné, než po kliknutí na šípku vybrať možnosť Add configuration .... (Táto ponuka nemusí byť pri prvom spustení vôbec nutná, namiesto toho sa nás IDE opýta, či chceme konfiguráciu vytvoriť.) Znova potom vyberme možnosť Chrome:

Zobrazí sa nám tiež editácie súboru launch.json. Berme ohľad na parametre a skontrolujme si, že je všetko v poriadku:

Súbor samozrejme nebude a ani nesmie byť rovnaký ako vyššie, dokonca niektoré parametre sa môžu líšiť. V skratke sa však stačí iba pozrieť, či cesta k súboru je správna. To si môžeme skontrolovať, ak sa pokúsime spustiť súbor zelenou šípkou vľavo hore. Ak sa nám nič nenačíta, skontrolujte si, akú adresu máme v prehliadači napísanú. Poradí nám to, čo môže byť zle. Môžeme sa nám vygenerovať tiež tento univerzálny súbor s premenný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 prípade tam musíme špecifikovať súbor, ktorý chceme spustiť - parameter file. Konfigurácia bude teda napríklad taká:

{
    // 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 ceste musí byť vždy dve spätné lomky. Jedno spätné lomítko sa využíva taktiež v programovaní či v regulárnych výrazoch. Po spätnom lomítkom je vždy špeciálny znak. V našom prípade je špeciálny znak taktiež spätné lomítko, preto píšeme dve za sebou.

Ukážka Debugging

Vo Visual Studio Code môžeme teraz pridávať hraničnými priamo v programe a to po kliknutí na číslo riadku, ako sme zvyknutí. Poďme si to vyskúšať pridaním Breakpoint na riadok, kde dochádza k súčtu možností:

Keď potom náš program spustíme a vyvoláme breakpoint po zadaní dvoch hodnôt a stlačení tlačidla Sečíst, dostaneme vo Visual Studio Code do módu Debugging, ktorý by nám už mal byť známy z prehliadača Chrome. Naľavo vidíme hodnoty premenných, možnosť pridať Watches a v dolnej časti tiež konzolu, v ktorej môžeme ďalej debuggovat. Taky samozrejme tlačidla na znovu zapnutie kódu a na jeho zastavenie:

Vo Visual Studio Code môžeme nastavovať aj podmienené hraničnými. Podmienený breakpoint pridáme tak, že klikneme pravým tlačidlom na breakpoint a zvolením ponuky Edit breakpoint .... Do riadku potom následne napíšeme podmienku, ktorá musí byť splnená, aby sa breakpoint aktivoval. Trebárs aby sa prvé zadané číslo rovnalo desiatich:

Teraz skúsme sčítať na stránke čísla 10 a 10. Program sa nezastaví. Skúsenejší z vás asi vie, že tri rovná sa znamenajú okrem rovnosti hodnoty tiež rovnosť dátového typu. Keďže sme číslo prevzali s textového poľa, dátový typ je string (textový reťazec) "10". Tento string však porovnávame s dátovým typom int (celé číslo) a tieto dva dátové typy nie sú seberovných. Ak by sme teda chceli, nech sa breakpoint spustí, je potrebné zadať miesto troch rovnítok rovná sa dve == a alebo zanechania troch rovnítok, ale napred naparsujeme číslo number1:

parseInt(number1) === 10

V ďalšej lekcii, Debugging vo vývojovom prostredí webstore , si ukážeme konkrétne vývojové prostredie webstore a ako ho možno využiť pri Debugging.

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é 48x (1.35 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísal Filip Zeman

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

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