Ladění JavaScriptu v prohlížeči (s příklady)

V tomto kurzu se naučíte o ladění v JavaScriptu pomocí příkladů.

Při psaní programů se můžete setkat s chybami. Chyby nemusí být nutně špatné. Ve skutečnosti nám většinou pomáhají identifikovat problémy s naším kódem. Je nezbytné, abyste věděli, jak ladit svůj kód a opravit chyby.

Ladění je proces zkoumání programu, hledání chyby a její opravy.

Program JavaScript můžete ladit různými způsoby.

1. Používání console.log ()

console.log()Metodu můžete použít k ladění kódu. Do console.log()metody můžete předat hodnotu, kterou chcete zkontrolovat, a ověřit, zda jsou data správná.

Syntaxe je:

 console.log(object/message);

Můžete předat objekt console.log()nebo jednoduše řetězec zprávy.

V předchozím kurzu jsme použili console.log()metodu pro tisk výstupu. Tuto metodu však můžete použít také k ladění. Například,

 let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )

Pomocí console.log()metody v prohlížeči se otevře hodnota v okně debuggeru.

Fungování metody console.log () v prohlížeči

The console.log()is not specific to browsers. Je k dispozici také v jiných motorech JavaScriptu.

2. Pomocí ladicího programu

debuggerKlíčové slovo zastaví provádění kódu a volá funkci ladění.

Je debuggerk dispozici téměř ve všech motorech JavaScriptu.

Podívejme se na příklad,

 let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);

Podívejme se, jak můžete použít ladicí program v prohlížeči Chrome.

Práce ladicího programu v prohlížeči

Výše uvedený program pozastaví provádění programu v řádku obsahujícím debugger.

Poté můžete po prozkoumání programu obnovit řízení toku.

Zbytek kódu se spustí, když skript obnovíte stisknutím klávesy play v konzole.

Práce ladicího programu v prohlížeči

3. Nastavení hraničních hodnot

V okně debuggeru můžete nastavit zarážky pro kód JavaScript.

JavaScript se zastaví v každém zarážce a umožní vám zkontrolovat hodnoty. Potom můžete pokračovat v provádění kódu.

Podívejme se na příklad nastavením zarážky v prohlížeči Chrome.

Práce s zarážkami v prohlížeči

Zarážky můžete nastavit pomocí nástroje pro vývojáře kdekoli v kódu.

Nastavení zarážek je podobné jako uvedení ladicího programu do kódu. Zde stačí nastavit zarážky kliknutím na číslo řádku zdrojového kódu namísto ručního volání funkce ladicího programu.

Ve výše uvedených metodách jsme pro zjednodušení zobrazili procesy ladění pomocí prohlížeče Chrome. Není to však vaše jediná možnost.

Všechny dobré IDE poskytují způsob, jak ladit kód. Proces ladění se může trochu lišit, ale koncepce ladění je stejná.

Zajímavé články...