tento tutoriál vás naučí základní pracovní postup pro ladění jakéhokoli problému JavaScriptu v DevTools. Čtěte dále, nebo se podívejte na video verzi tohoto tutoriálu, níže.

# Krok 1: reprodukovat chybu

nalezení řady akcí, které důsledně reprodukují chybu, je vždy prvním krokem k ladění.

1. Klikněte Na Otevřít Demo. Demo se otevře na nové kartě.

   otevřít Demo

2. do textového pole číslo 1 Zadejte 5.

3. do textového pole číslo 2 Zadejte 1.

4. klikněte na Přidat číslo 1 a číslo 2. Štítek pod tlačítkem říká 5 + 1 = 51. Výsledek by měl být 6. To je chyba, kterou se chystáte opravit.

   

   Obrázek 1. Výsledek 5 + 1 je 51. Mělo by to být 6.

# Krok 2: Seznamte se s uživatelským rozhraním panelu zdrojů

DevTools poskytuje mnoho různých nástrojů pro různé úkoly,jako je změna CSS, profilování výkonu načítání stránky a monitorování požadavků na síť. Panel zdroje je místo, kde ladíte JavaScript.

1. otevřete DevTools stisknutím Command + Option+I (Mac) nebo Control+Shift+I (Windows, Linux). Tato zkratka otevře panel konzoly.

   

   Obrázek 2. Panel konzoly

2. klikněte na kartu Zdroje.

   

   obrázek 3. Panelu zdrojů

uživatelské rozhraní panelu zdrojů má 3 části:

obrázek 4. 3 části uživatelského rozhraní panelu zdrojů

1. podokno navigátor souborů. Zde je uveden každý soubor, který stránka požaduje.
2. podokno editoru kódu. Po výběru souboru v podokně navigátor souborů se zde zobrazí obsah tohoto souboru.
3. podokno ladění JavaScriptu. Různé nástroje pro kontrolu JavaScriptu stránky. Pokud je okno DevTools široké, zobrazí se tento panel vpravo od podokna editoru kódu.

# Krok 3: pozastavte kód pomocí zarážky

běžnou metodou pro ladění problému, jako je tento, je vložit do kódu mnoho příkazů console.log(), aby bylo možné zkontrolovat hodnoty při spuštění skriptu. Příklad:

function updateLabel() {
var addend1 = getNumber1();
console.log('addend1:', addend1);
var addend2 = getNumber2();
console.log('addend2:', addend2);
var sum = addend1 + addend2;
console.log('sum:', sum);
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

metoda console.log() může provést práci, ale body přerušení ji mohou provést rychleji. Zarážka umožňuje pozastavit kód ve středu jeho provádění, a zkoumat všechny hodnoty v daném okamžiku v čase. Zarážky mají oproti metodě console.log() několik výhod:

• s console.log() musíte ručně otevřít zdrojový kód, najít příslušný kód, vložit příkazy console.log() a znovu načíst stránku, abyste viděli zprávy v konzole. Pomocí zarážek můžete pozastavit příslušný kód, aniž byste věděli, jak je Kód strukturován.
• ve svých příkazech console.log() musíte explicitně zadat každou hodnotu, kterou chcete zkontrolovat. S zarážkami vám DevTools zobrazuje hodnoty všech proměnných v daném okamžiku. Někdy existují proměnné ovlivňující váš kód, o kterých ani nevíte.

Stručně řečeno, zarážky vám mohou pomoci najít a opravit chyby rychleji než metoda console.log().

pokud uděláte krok zpět a přemýšlíte o tom, jak aplikace funguje, můžete udělat vzdělaný odhad, že nesprávná částka (5 + 1 = 51) se vypočítá v posluchači událostí click, který je přidružen k tlačítku přidat číslo 1 a číslo 2. Proto pravděpodobně budete chtít pozastavit kód v době, kdy posluchač provede click. Zarážky posluchače událostí vám umožní přesně to udělat:

1. v podokně ladění JavaScriptu rozbalte sekci kliknutím na body přerušení posluchače událostí. DevTools odhaluje seznam rozšiřitelných kategorií událostí, jako je animace a Schránka.

2. vedle kategorie událostí myši klikněte na rozbalit . DevTools odhaluje seznam událostí myši, jako je click a mousedown. Každá událost má vedle ní zaškrtávací políčko.

3. zaškrtněte políčko kliknout. DevTools je nyní nastaven tak, aby automaticky pozastavit, když některý click posluchač událostí spustí.

   

   obrázek 5. Zaškrtávací políčko je povoleno

4. zpět na ukázku klikněte znovu přidat číslo 1 a číslo 2. DevTools pozastaví demo a zvýrazní řádek kódu v panelu zdroje. DevTools by měl být pozastaven na tomto řádku kódu:

   function onClick() {

   pokud jste pozastaveni na jiném řádku kódu, stiskněte Resume Script Execution , dokud nebudete pozastaveni na správném řádku.

   Poznámka: Pokud jste se pozastavili na jiném řádku, máte rozšíření prohlížeče, které registruje click posluchače událostí na každé stránce, kterou navštívíte. Byl jste pozastaven v posluchači rozšíření click. Pokud používáte anonymní režim k procházení v soukromí, který zakáže všechna rozšíření, můžete vidět, že pokaždé pozastavíte správný řádek kódu.

zarážky posluchače událostí jsou jen jedním z mnoha typů zarážek dostupných v DevTools. Stojí za to zapamatovat si všechny různé typy, protože každý typ vám nakonec pomůže co nejrychleji ladit různé scénáře. Podívejte se na pozastavení kódu pomocí zarážek, abyste zjistili, kdy a jak používat každý typ.

# Krok 4: Krok přes kód

jednou z běžných příčin chyb je, když se skript spustí ve špatném pořadí. Procházením kódu můžete projít prováděním kódu po jednom řádku a zjistit, kde přesně se provádí v jiném pořadí, než jste očekávali. Zkuste to teď:

1. na panelu zdroje DevTools klepněte na tlačítko Krok do další funkce volání krok přes provedení funkce onClick(), jeden řádek najednou. DevTools zdůrazňuje následující řádek kódu:

   if (inputsAreEmpty()) {

2. klikněte na krok přes další volání funkce . DevTools spustí inputsAreEmpty(), aniž by vstoupil do něj. Všimněte si, jak DevTools přeskočí několik řádků kódu. Je to proto, že inputsAreEmpty() bylo vyhodnoceno jako false, takže blok kódu příkazu if nebyl spuštěn.

to je základní myšlenka projít kódem. Pokud se podíváte na kód v get-started.js, můžete vidět, že chyba je pravděpodobně někde ve funkci updateLabel(). Spíše než procházet každý řádek kódu, můžete použít jiný typ zarážky k pozastavení kódu blíže k pravděpodobnému umístění chyby.

# Krok 5: Nastavit řádek kódu zarážky

Line-of-kódu zarážky jsou nejběžnější typ zarážky. Pokud máte určitý řádek kódu, na kterém chcete pozastavit, použijte bod přerušení řádku kódu:

1. podívejte se na poslední řádek kódu v updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

2. vlevo od kódu vidíte číslo řádku tohoto konkrétního řádku kódu, což je 32. Klikněte na 32. DevTools klade modrou ikonu na vrcholu 32. To znamená, že na tomto řádku je zarážka kódu. DevTools nyní vždy pozastaví před provedením tohoto řádku kódu.

3. klikněte na Obnovit spuštění skriptu . Skript pokračuje v provádění, dokud nedosáhne řádku 32. Na řádcích 29, 30 a 31 DevTools vytiskne hodnoty addend1, addend2 a sum napravo od dvojtečky každého řádku.

   

   obrázek 6. DevTools pozastaví na řádku-of-kódu zarážky na lince 32

# Krok 6: Zkontrolujte hodnoty proměnných

hodnoty addend1, addend2 a sum vypadají podezřele. Jsou zabalené v uvozovkách, což znamená, že jsou to řetězce. To je dobrá hypotéza pro vysvětlení příčiny chyby. Nyní je čas shromáždit více informací. DevTools poskytuje mnoho nástrojů pro zkoumání proměnných hodnot.

# Metoda 1: podokno rozsahu

když jste pozastaveni na řádku kódu, podokno rozsahu vám ukáže, jaké místní a globální proměnné jsou aktuálně definovány, spolu s hodnotou každé proměnné. To také ukazuje uzavírací proměnné, pokud je to možné. Poklepejte na proměnnou hodnotu a upravte ji. Pokud nejste pozastaveni na řádku kódu, podokno rozsahu je prázdné.

Obrázek 7. Podokno rozsahu

# Metoda 2: výrazy sledování

karta výrazy sledování umožňuje sledovat hodnoty proměnných v průběhu času. Jak název napovídá, výrazy hodinek se neomezují pouze na proměnné. Můžete uložit libovolný platný výraz JavaScript ve výrazu hodinek. Zkuste to teď:

1. klikněte na kartu sledovat.

2. Klikněte Na Přidat Výraz .

3. typ typeof sum.

4. Stiskněte Klávesu Enter. DevTools ukazuje typeof sum: "string". Hodnota napravo od dvojtečky je výsledkem vašeho výrazu hodinek.

   

   Obrázek 8. Podokno výrazu hodinek (vpravo dole) po vytvoření výrazu typeof sum. Pokud je vaše okno DevTools velké, panel výrazů hodinek je vpravo nad podoknem Breakpoints posluchače událostí.

podle podezření se sum vyhodnocuje jako řetězec, kdy by to mělo být číslo. Nyní jste potvrdili, že to je příčina chyby.

# Metoda 3: Konzola

kromě prohlížení zpráv console.log() můžete také použít konzolu k vyhodnocení libovolných příkazů JavaScriptu. Pokud jde o ladění, můžete pomocí konzoly vyzkoušet možné opravy chyb. Zkuste to teď:

1. pokud zásuvku konzoly nemáte otevřenou, otevřete ji stisknutím klávesy Escape. Otevře se ve spodní části okna DevTools.

2. do konzoly zadejte parseInt(addend1) + parseInt(addend2). Toto prohlášení funguje, protože jste pozastaveni na řádku kódu, kde jsou v rozsahu addend1 a addend2.

3. Stiskněte Klávesu Enter. DevTools vyhodnotí prohlášení a vytiskne 6, což je výsledek, který očekáváte od dema.

   

   obrázek 9. Zásuvka konzoly po vyhodnocení parseInt(addend1) + parseInt(addend2).

# Krok 7: použijte opravu

našli jste opravu chyby. Zbývá jen vyzkoušet opravu úpravou kódu a opětovným spuštěním dema. Nemusíte opustit DevTools použít opravu. Kód JavaScript můžete upravovat přímo v uživatelském rozhraní DevTools. Zkuste to teď:

1. klikněte na Obnovit spuštění skriptu .
2. v editoru kódu nahraďte řádek 31, var sum = addend1 + addend2 var sum = parseInt(addend1) + parseInt(addend2).
3. stiskněte Command + S (Mac) nebo Control+S (Windows, Linux) pro uložení změny.
4. klikněte na deaktivovat zarážky . Změní se modře, což znamená, že je aktivní. I když je toto nastaveno, DevTools ignoruje všechny zarážky, které jste nastavili.
5. vyzkoušejte demo s různými hodnotami. Demo nyní počítá správně.

Gratulujeme! Nyní víte, jak co nejlépe využít Chrome DevTools při ladění JavaScriptu. Nástroje a metody, které jste se naučili v tomto tutoriálu, vám mohou ušetřit nespočet hodin.

tento tutoriál vám ukázal pouze dva způsoby, jak nastavit zarážky. DevTools nabízí mnoho dalších způsobů, včetně:

• podmíněné zarážky, které se spouštějí pouze tehdy, je-li podmínka, kterou poskytnete, pravdivá.
• zarážky na ulovených nebo nezachycených výjimkách.
• XHR zarážky, které se spustí, když požadovaná adresa URL odpovídá podřetězci, který poskytnete.

viz pozastavit kód s zarážkami zjistit, kdy a jak používat každý typ.

existuje několik krokových ovládacích prvků kódu, které nebyly vysvětleny v tomto tutoriálu. Viz krok přes řádek kódu se dozvědět více.