1. diel - Debugging: Úvod a terminológie - Online kurz

Skôr alebo neskôr sa každý, kto sa zaoberá programovaním, stretne s termínom debugging. Ale čo to vlastne je? Pôvod pojmu debugging, doslova z angličtiny "odhmyzenie", sa dnes pripisuje Grace Hopperove. V roku 1940, kedy pracovala s počítačom Mark II, totiž jej spolupracovníci objavili uviaznutú moru v stroji, ktorý vďaka tomu nefungoval správne. Proces "opravy" pomenovali ako debugging, čiže odstraňovanie hmyzu. Dnes tento termín označuje proces odstraňovania chýb v našich programoch, konkrétne tento kurz bude jednať o debuggovania v JavaScripte.

Pre koho je debuggovania?

Debuggovania patrí k základným znalostiam každého dobrého programátora. Rovnako ako sa nikto nezaobíde bez cyklu for, while alebo if, tak by každý mal poznať aspoň základy debuggovania. Cieľom každého programátora je písať predovšetkým správne programy. Programátor hier síce môže napísať kód tak, že mu hra beží pri 240 FPS, ak môže ale hráč prestreliť múr cez celú mapu, nikoho hra nebude nijako zvláštne zaujímať.

Mobilná aplikácia môže vyzerať tiež úplne super. Pokiaľ ale spadne pri zobrazení nejakých špeciálnych znakov, čo sa už niekoľkokrát stalo napr. S aplikáciou iMessage, to bude určite sekundárne záležitosť. Skrátka nezáleží na tom, v akom prostredí vyvíjame. Sme vývojári a musíme vedieť debuggovat svoj kód.

O čo ide?

My, ako ľudia, nie sme perfektné. Nikto nepíše perfektný kód, preto sa v ňom často nájdu chyby. Je tým pádom dôležité vedieť, ako tieto chyby riešiť. To je vlastne podstata tohto kurzu. Všeobecne rozlišujeme medzi dvoma typmi chýb:

• syntaktické a
• logické.

Syntaktické chyby

Formát programového jazyka sa nazýva syntax, tj. Pravidlá, ktorými JavaScript (hovoríme o abstraktnom koncepte jazyka) rozhoduje, čo náš kód znamená. Trebárs:

console.log("ahoj");

Text console znamená "Objekt s názvom console ", .log znamená "Člen objektu console s názvom log " (v tomto prípade funkcie), ("ahoj") znamená "Zavolaj funkciu log objektu console s parametrami "ahoj" ". bodkočiarka ; na konci označuje koniec riadku.

Výsledkom porušenie týchto pravidiel znamená, že náš program je nefunkčný a vyhodí sa SyntaxError výnimka. Príklady syntaktických chýb sú napríklad:

• nevybalancované zátvorky,
• chýbajúce bodkočiarka,
• preklep v názve funkcie či premennej atď.

JavaScript tým, že je dynamicky typizovanom, nám dovoľuje písať kód, ktorý na prvý pohľad dáva syntaktický zmysel, ale dôjde k error až po nejakej dobe bazén programu a to často len za nejakých podmienok.

Nedávno som napísal moje prvé Discord topánky v JavaScripte ( Node.js + discord.js). Jeden z nich umožňoval skupinke ľudí vykonávať anonymné hlasovanie. Bot mal takú funkciu, ktorá dovoľovala užívateľovi zadať do chatu $$majority (anglicky väčšina), a či teda väčšina bola dosiahnutá, potom by boli zobrazené výsledky. Bol v tom ale jeden háčik a to síce v tomto úryvku:

//...
        } else
        {
            msg.channel.send("There is no majority!".catch(err => console.log(err)));
        }
//...

Všimli ste si ho? Po druhých úvodzovkách chýba zátvorka, ktorá sa mi záhadným spôsobom dostala na koniec riadku. Tento kód je syntakticky správny. Ak dôjde ale na vykonanie tohto kódu, vznikne tzv. Uncaught TypeError, pretože objekt typu string nemá metódu catch(). Namiesto toho, aby môj topánok odoslal text There is no majority! a keby niečo, tak error vypísal do konzoly, tak v tej situácii program ihneď spadol.

Našťastie som chybu našiel pomerne jednoducho a rýchlo. Tento typ error je spôsobený tým, že premenná môže mať teoreticky akýkoľvek typ, to je v JavaScripte asi najbežnejšie. Existuje treba TypeScript (vrelo ho odporúčam), ktorý má statické typovanie, v ktorom by sa takéto chyby triviálne našli. Sú ale aj iné a zákernejší chyby, pretože nevypisujú žiadne ERROR, len ticho zlyhajú ...

Logické chyby

Logické chyby sú špeciálne tým, že na prvý pohľad vôbec nie sú jasné a niekedy si ani nie sme vedomí toho, že takéto chyby v našich programoch máme. Často sa stane, že naše algoritmy fungujú pre pomerne jednoduché vstupy, ale chyby v premýšľaní sa ukážu až v komplexnejších situáciách. Nájsť logické chyby je často ťažké a mnohokrát sa skrývajú tam, kde by sme to najmenej čakali. Avšak si čo najlepšie vysvetlíme, ako tieto chyby riešiť, ale tiež ako sa im vyhýbať. Ľahšie kategórie logických chýb sú prepisy, napríklad:

function min(a, b)
{
    return a > b ? a : b;
}

V tomto prípade autor celkom určite mienil tohle:

function min(a, b)
{
    return a < b ? a : b;
}

Rozdiel, čisto textovo, je jedno znamienko, ale logicky kód vydáva opačné výsledky. Alebo, absolútna klasika:

for(let i = 0; i <= a.length; i++)
{
    console.log(a[i]);
}

Autor omylom napísal <= miesto <. Konkrétne v JavaScripte bude napr .: a[7] (teda element hneď za koncom) hodnoty undefined. V iných jazykoch, ako napr. C ++, by toto mohlo mať katastrofálne následky pre náš program. Ale o veľa horšie je riešiť prípad, keď náš program jednoducho nie je logicky správny. Potom totiž opraviť chybu nie je vôbec triviálne, ale musíme nájsť nové riešenie pre daný problém.

Debugging - Postupy & Pojem "bug"

Pojmom bug označujeme logické chyby. Rovnako ako hmyz, tieto chyby sú často pomerne malé, môžu ale mať rozsiahly dopad na náš program. Ak chceme byť dobrí debugger, musíme mať správny postup. Táto lekcia má byť len úvod do tejto témy. V ďalších lekcii si prejdeme, ako vlastne JavaScript funguje a ako s ním komunikovať cez konzolu. Potom si prejdeme:

• JavaScript enginy Programy, ktoré prekladajú a vykonávajú náš kód. Naučíme sa o základných funkciách, aké enginy existujú a v čom sa líšia.
• Programy, ktoré prekladajú a vykonávajú náš kód. Naučíme sa o základných funkciách, aké enginy existujú a v čom sa líšia.
• konzolu Konzola je základný interface, cez ktorý komunikujeme s enginom a prehliadačom.
• Konzola je základný interface, cez ktorý komunikujeme s enginom a prehliadačom.
• Všeobecné postupy debuggovania Taktiky, ako identifikovať chybu, nájsť ju v kóde a ako ju opraviť.
• Taktiky, ako identifikovať chybu, nájsť ju v kóde a ako ju opraviť.
• Používanie prehliadača Chrome a Firefoxu V tejto lekcii si prejdeme, ako používať moderné prehliadače a ich funkcie pre vývojárov.
• V tejto lekcii si prejdeme, ako používať moderné prehliadače a ich funkcie pre vývojárov.
• testovanie Testovanie je jedna z vecí, ktoré sa často prehliadnu. Je ale veľa dôležité! Testovaním sa snažíme chyby nájsť preventívne a ihneď ich opraviť. Testovanie je lepšie, než keď sa chyba prejaví v aplikácii, ktorá už niekde beží a my potom musíme napraviť náhly problém.
• Testovanie je jedna z vecí, ktoré sa často prehliadnu. Je ale veľa dôležité! Testovaním sa snažíme chyby nájsť preventívne a ihneď ich opraviť. Testovanie je lepšie, než keď sa chyba prejaví v aplikácii, ktorá už niekde beží a my potom musíme napraviť náhly problém.

Dalej je potrebné potreba mať na mysli, že dobré porozumenie jazyka je dobré mať, ale nie je to nutnosťou. Práve v JavaScriptu máme zaujímavosti ako undefined == null vs. undefined === null. Nechcem tým povedať, že musíme nejako zrovna vynikať v JavaScripte, aby sme ho zvládli debuggovat, ale aby sme nepodcenili aj pomerne dôležitú úlohu, ktorú zohráva skúsenosť s jazykom.

Čo budeme potrebovať

Aby sme aplikovali praktiky z týchto tutoriálov, budeme potrebovať:

• naše normálne programovacie prostredie (IDE)
• moderný webový prehliadač (Firefox alebo Chrome)

K otestovaniu kódu môžeme použiť aj rôzne frameworky. Až sa budeme baviť o testovaní, pár z nich si ukážeme. Aby sme ich ale používali, je samozrejmosťou je nainštalovať.

V ďalšej lekcii, Nástroje pre debugging a internetové prehliadače , si popíšeme funkciu JavaScriptu a povieme si, ako využiť nástroje v prehliadačoch pre debugging.