Tipy pro ladění JavaScriptu, část II – Google Chrome a záložka Console

Noah Sager

<\/HEAD>Tento blogový příspěvek je druhý v sérii tipů a triků pro ladění JavaScriptu, které vám pomohou na vaší cestě. Viz JavaScript Debugging Tips Part I 1111 Google Chrome and the Network Tab<\/A><\/STRONG><\/EM> pro náš první díl.<\/EM>

Nejzábavnější část jakéhokoli programovacího úkolu je hned na začátku, když si sednete s hromadou nástrojů a zdrojů a začnete bušit do surových kusů kódu. Obtížnější část přichází, když se pokusíte spustit aplikaci, jen abyste sledovali, jak se ten pečlivě napsaný kód rozpadá do několika pozdních nocí strávených před obrazovkou počítače. Nicméně není vše ztraceno, protože máme pro vás vynikající doporučení, které je tématem tohoto blogu: záložka Console uvnitř vývojářských nástrojů vašeho oblíbeného prohlížeče.

Pokud se cítíte rozrušeně nebo emocionálně, záložka Console je pro vás ideální volbou. Možná někdo ve vaší rodině prochází těžkým obdobím a mohl by ocenit trochu povzbuzení. Zvažte záložku Console v Google Chrome (jsou k dispozici i bezlepkové možnosti). Uživatelé, kteří mají rádi záložku Console, by mohli také ocenit ArcGIS API for JavaScript.<\/A>

Zjevně nerozumím homografům<\/P><\/DIV>

Jak jsme psali v části I, přístup k Chrome Developer Tools je snadný pomocí klávesových zkratek (Control + Shift + I) nebo navigací do pravého horního rohu prohlížeče, kliknutím na hamburger a výběrem „More Tools“, poté „Developer tools“.

Jakmile jsou Developer Tools otevřeny (jiné Developer Tools jsou dostupné v jiných prohlížečích), máte přístup k několika záložkám. Zde se zaměříme na Console. Pokud chcete otevřít záložku Console přímo v Chrome Developer Tools, použijte tuto klávesovou zkratku: Control + Shift + J (písmeno „J“ znamená jocular). Pro další užitečné tipy si prosím přečtěte oficiální dokumentaci Google o

Chrome DevTools: Using the console<\/A><\/STRONG>.

Console slouží ke dvěma účelům: 1) zobrazovat zaznamenané informace z JavaScriptu aplikace (obvykle během vývoje aplikace) a 2) interaktivně zkoumat objekty a spouštět JavaScript. V tomto blogu se podíváme na oba typy příkladů a rozvedeme některé další tipy a triky, které používáme v Technické podpoře.

První věc, kterou můžeme udělat, je přidat několik příkazů „console.log“ do naší aplikace. Vezmeme upravený vzorek hostovaný na GitHubu, který najdete zde: Sample Console Application<\/A><\/STRONG>. Klidně si to vyzkoušejte doma.

Na řádcích 60-62 a znovu na řádku 66 jsme přidali několik těchto příkazů „console.log“ pro zobrazení informací o našem Feature Layer. Náš případ použití je takový, že vytváříme webovou mapovou aplikaci a během testování chceme zajistit, že data, která získáváme z ArcGIS Online, jsou správná data k zobrazení na mapě. Za tímto účelem vypisujeme několik vybraných informací o Feature Layer: název vrstvy a URL vrstvy. Protože neznám syntaxi pro vlastnost URL, používám „URL“ a „url“, jak je vidět níže.

<\/A>

Příkazy JavaScript console.log<\/P><\/DIV>

Zde je snímek obrazovky výstupu příkazů „console.log“. Vidíme očekávané relevantní informace. Také si všimněte, že výstup pro „featureLayer.URL“ je „undefined“. Je to proto, že položky v konzoli jsou citlivé na velikost písmen. Platná vlastnost je „featureLater.url“ a neplatné vlastnosti nevyvolávají chybu, místo toho vracejí hodnotu undefined. To může být složitá věc k zachycení, ale později v tomto blogu se podíváme na některé tipy, jak s tímto problémem pracovat.

<\/A>

Výstup JavaScript Console z console.log<\/P><\/DIV>

S konzolí stále otevřenou zkuste zadat stejné hodnoty vlastností z kódu:

featureLayer.title<\/STRONG>featureLayer.URL<\/STRONG>featureLayer.url<\/STRONG><\/P>
Všimněte si, že všechny<\EM> tyto vlastnosti nyní vracejí chybu místo skutečné hodnoty (nebo dokonce „undefined“). Je to proto, že lokální proměnné již nejsou po inicializaci aplikace ve scope, takže ani objekt „featureLayer“ nelze rozpoznat.  Zde je snímek obrazovky výstupu nových příkazů konzole.

<\/A>

Výstup JavaScript Console po načtení aplikace<\/P><\/DIV>

Kdybychom udělali „featureLayer“ globální proměnnou, pak bychom viděli v konzoli vrácenou hodnotu „undefined“ pro objekt (proměnná je známá, ale detaily nejsou stále přístupné). Podstata je takováto: pouze proměnné ve scope<\EM> lze v konzoli dotazovat. Můžeme tedy používat konzoli interaktivně a zadávat hodnoty vlastností? Pojďme to zjistit.

Další věc, kterou můžeme udělat v našem vzorovém appu, je přidat příkaz „debugger;“ do kódu. Vezmeme další upravený vzorek hostovaný na GitHubu, který najdete zde:

Sample Console Application 2<\STRONG>. Klidně si to vyzkoušejte doma.

Na řádku 60 jsme přidali příkaz „debugger;“, který pomůže zobrazit informace o našem Feature Layer v konzoli.< / A >< P style= "color :#888 ;font-size :12 px ;margin :5 px ;"> Příkaz debugger v JavaScriptu < / P >< / DIV >< BR / >< BR / >Jak tento příkaz funguje? Klikněte na odkaz pro spuštění aplikace. Poté otevřete Developer Tools (Control + Shift + I nebo Control + Shift + J) a obnovte aplikaci. Aplikace by měla pozastavit běh a měli byste vidět zprávu „Paused in debugger“ nahoře na obrazovce a řádek s příkazem „debugger“ zvýrazněný na záložce Sources:

< / A >< P style= "color :#888 ;font-size :12 px ;margin :5 px ;"> Pozastaveno v debuggeru č. 1 < / P >< / DIV >< BR / >< BR / >Nyní s aplikací pozastaveno, můžeme se vrátit na záložku Console a znovu zkusit dotazovat vlastnosti featureLayer. Zde vidíme, že máme správný rozsah proměnné a můžeme vidět výstup:

Pozastaveno v debuggeru 2

Super, že?

Podívejme se na další možnost, podobnou „debugger“. Zpět na záložku Sources, všimněte si čísel řádků vlevo od kódu. Pokud levým tlačítkem klikneme na číslo řádku, můžeme nastavit breakpoint, který bude mít stejný efekt jako napsání „debugger“ v kódu. Levým tlačítkem klikněte na řádky 56, 62 a 66 ve stejné aplikaci, poté aplikaci obnovte. Breakpoint 1

Aplikace se okamžitě pozastaví na prvním breakpointu. Nyní se můžeme vrátit na záložku Console a opět prohlížet proměnné a vlastnosti dle libosti. Nejen to, kliknutím na zakřivenou šipku napravo od tlačítka Play v horní části obrazovky můžeme krokovat aplikací a sledovat vzrušení, jak vidíme, jak se kód vykonává krok za krokem. Nebo můžeme kliknout na tlačítko Play v horní části obrazovky a nechat aplikaci běžet do konce nebo do dalšího breakpointu. Breakpoint 2

Další kliknutí na tlačítko Play nás přivede k dalšímu breakpointu. Breakpoint 3

Cílem tohoto blogu je zdůraznit užitečnost a funkčnost Console, ale chceme také upozornit na další využití nastavování breakpointů zde. Breakpointy umožňují vývojáři vidět pořadí, ve kterém se asynchronní kód vykonává, jak jsou spouštěny funkce a které části jsou přeskočeny nebo selžou. Pro více informací o tipech ladění JavaScriptových aplikací zde jsou některé další zdroje z posledních několika let:Pokročilé ladění s JavaScriptem (2009)Ladění JavaScriptu s Chrome DevTools Breakpoints (2016)Tipy pro ladění JavaScriptu část I (2014)
V tomto díle jsme se naučili, jak přistupovat a používat záložku Console v nástrojích Chrome Developer k odhalení vlastností a hodnot proměnných a objektů v našem JavaScriptovém kódu. Tyto informace mohou výrazně usnadnit ladění a psaní webové aplikace. Tímto končí druhá část série o tipech pro ladění JavaScriptu. Připojte se příště, kdy se ponoříme ještě hlouběji do některých Developer Tools a všichni dostaneme zvýšení platu. Šťastné ladění!Noah S. a John G. - SDK Support Services

AndresCastillo

Here is a blog I wrote that is along the same lines of teaching techniques on how to approach web development:

How to customize a web app using JavaScript, the DOM, Chrome DevTools, and Chrome's debugger
Blog Post created by Andres Castillo on Jul 24, 2019
https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger