Tipy pro ladění JavaScriptu část III – Pokročilé nástroje pro vývojáře Google Chrome

Noah Sager

<\/HEAD>Tento blogový příspěvek je třetí v sérii tipů a triků pro ladění JavaScriptu, které vám pomohou na vaší cestě. Viz JavaScript Debugging Tips Part I<\/A><\/STRONG><\/EM> a také JavaScript Debugging Tips Part II<\/A> <\/STRONG><\/EM>pro naše předchozí díly.<\/EM>

V předchozích dvou příspěvcích o JavaScript Debugging Tips na blogu Esri Support jsme se podívali na záložku Network a záložku Console jako součást Google Chrome Developer Tools<\/A><\/STRONG>. Zatímco většina moderních prohlížečů má nějakou formu nástrojů pro vývojáře, zde používáme Chrome pro naše příklady.

Naším cílem tohoto třetího blogového příspěvku v sérii je představit pokročilejší tipy a triky, které vám umožní efektivněji ladit a řešit problémy s vaším JavaScriptovým kódem. Konkrétně se zaměříme na tři oblasti: rozšířené zprávy do konzole, lepší způsoby nastavení breakpointů pomocí podmínek specifikovaných za běhu a efektivnější způsob krokování přes breakpointy v záložce Sources pomocí metody zvané blackboxing.Část 1: Console.table<\/STRONG><\/SPAN>

Console.log je naše primární funkce pro ladění, ale výstup této funkce může být trochu obtížně čitelný (zejména při zobrazení velkého množství dat). Jedním ze způsobů, jak vylepšit naše zprávy do konzole a snadněji zobrazit data, je zobrazení seznamu objektů jako tabulky, což se provádí pomocí funkce console.table <\/STRONG>. Tato funkce přijímá jeden povinný argument, který musí být pole nebo objekt, a jeden volitelný parametr. Každý prvek v poli je řádek v tabulce.

Podívejme se na příklad Console Table<\/A><\/STRONG>.

1. Otevřete Chrome Developer Tools pomocí klávesové zkratky (Windows: Control + Shift + I, a Mac: Command + Option + I), nebo přejděte do pravého horního panelu prohlížeče, klikněte na tři šedé svislé tečky a vyberte „Více nástrojů“ > „Nástroje pro vývojáře“.

2. Vyberte záložku console.

3. Klikněte na „Perform Query“ ve vzorové aplikaci. To provede dotaz pro zobrazení všech okresů v Connecticutu. Kód používá console.table<\/STRONG> k vytištění výsledků v tabulce, jak je uvedeno níže.<\/A>

console.table<\/P><\/DIV>

Každý řádek v tabulce zobrazuje všechny atributy pro konkrétní okres. Dále použijeme console.log<\/STRONG>, abychom porovnali console.log a console.table. Tato funkce vytiskne řádek s polem objektů.

<\/A>

console.log<\/P><\/DIV>

Po rozbalení pole můžeme objekty zobrazit v seznamu.

<\/A>

console.log rozbaleno<\/P><\/DIV>

Pro zobrazení atributů musíme objekty v seznamu rozbalit.

<\/A>

console.log rozbaleno s atributy<\/P><\/DIV>Zatímco u console.log můžeme přistupovat k atributům jednoho prvku, u console.table můžeme zobrazit všechny atributy všech prvků najednou! Obrázek níže ukazuje obě funkce v okně konzole.

<\/A>

console.table &amp console.log<\/P><\/DIV>Část 2: podmíněné breakpointy<\/STRONG>

V

JavaScript Debugging Tips Part II<\\/EM>, mluvili jsme o nastavení breakpointu v záložce Sources, obnovení aplikace a pozastavení aplikace na tomto řádku kódu. To je skvělý způsob, jak prozkoumat váš kód a jak jsou volány funkce a kde by mohly vzniknout potenciální problémy.

Nicméně někdy nechceme, aby byl breakpoint dosažen pokaždé. Někdy chceme, aby byl breakpoint dosažen pouze tehdy, pokud jsou splněny určité podmínky. Zatímco bychom mohli napsat nějaký logický kód ve formě smyčky pro kontrolu hodnot, existuje jednodušší způsob, jak to udělat za běhu.

Například se podívejme na příklad.

1. Otevřete Edit Features sample<\\/A> a Chrome Developer Tools.

2. Přejděte na záložku Sources a levým kliknutím nastavte breakpoint na řádku 301.

3. Po nastavení breakpointu klikněte pravým tlačítkem myši na breakpoint a vyberte „Edit breakpoint…“.<\\/A>

Poznámka: můžeme se sem také dostat tak, že nejprve klikneme pravým tlačítkem myši na řádek 301 a vybereme „Add conditional breakpoint…“.

< / A >< P style = " color :#888 ; font - size :12 px ; margin :5 px ; " > Přidat podmíněný breakpoint < / P >< / DIV >< BR / >< BR / >4.&nbspNastavte podmínku tak, aby byl breakpoint dosažen pouze tehdy, když uživatel zadá do pole „Contact:“ hodnotu „test“ při aktualizaci prvku. Zde je kód:editFeature.attributes["Incident_Address"] == "test"< / STRONG >< EM>Poznámka : Nechceme používat=, protože to přiřazuje hodnotu a tedy vždy vrací true, takže musíme použít <\/EM> "==".<\/A>

Výraz přerušení (Breakpoint Expression)<\/P><\/DIV>

5. Pokud zadáme „test“ do pole „Contact:“ a klikneme na „Update incident info“, dosáhne se přerušení a aplikace se pozastaví.

<\/A>

Podmínka splněna (Condition Met)<\/P><\/DIV>

Tyto podmíněné přerušení mohou být užitečné pro testování, když chcete zajistit, že data jsou správně odeslána zpět na server, nebo pro zpracování chyb, když chcete, aby se aplikace pozastavila, abyste mohli zkontrolovat objekt(y) zájmu místo toho, aby převzalo kontrolu vaše chybové zpracování.Část 3: Blackboxing<\/STRONG><\/SPAN>

Nastavení přerušení je skvělý způsob, jak si projít kód a lépe mu porozumět, ale tento proces vás může občas vyhodit ze souboru zájmu do jiného zdrojového souboru nebo do knihovny JavaScript třetí strany.

Například si prohlédněme ukázku.

1. Otevřete

ukázku Query SceneLayerView<\/A> <\/STRONG>, abyste mohli sledovat (je podobná ukázce nalezené na developers.arcgis.com<\/A>).

2. Otevřete Chrome Developer Tools, vyberte záložku Sources a levým kliknutím na řádek 49 nastavte přerušení.

3. Obnovte stránku, aby se debugger pozastavil na řádku 49. Zde se zobrazí zpráva „Paused in debugger“ (Pozastaveno v debuggeru) (vedle tlačítka „Play“ a tlačítka „Step Over“). Viz níže screenshot.

<\/A>

Pozastaveno na řádku 49<\/P><\/DIV>

4. Pokud kliknete na tlačítko "Step Over" asi pětkrát, opustíte hlavní .html soubor a dostanete se do souboru init.js knihovny ArcGIS API for JavaScript. Můžete prozkoumat soubor init.js, ale chceme se zaměřit na kód, který jsme napsali. Klikněte na tlačítko "Play", abyste se bezpečně vrátili domů.

<\/A>

Debugger v souboru init.js<\/P><\/DIV>

Na scénu přichází blackboxing jako řešení. Blackboxing je metoda vyloučení souborů a knihoven z debuggeru, takže vaše pozornost zůstává na vašem souboru/souborech zájmu. Podívejme se, jak můžeme blackboxovat knihovnu ArcGIS API for JavaScript, abychom mohli krokovat pouze hlavním souborem zájmu.

1. S otevřenými Developer Tools klikněte na tři svislé tečky v pravém panelu okna a vyberte Nastavení (Settings).

<\/A>

Nastavení nástrojů pro vývojáře (Developer Tool Settings)<\/P><\/DIV>

< / A >< P style = color:#888;font-size :12 px;margin :5 px ; > Nastavení nástrojů pro vývojáře (Developer Tool Settings) < / P >< / DIV >< BR / >< BR / >2. Na levé straně okna klikněte na „Blackboxing“ pro otevření „Framework Blackbox Patterns“.

Ladění s JavaScript debuggerem

(2017)Blackbox JavaScript zdrojové souboryPřipojte se k nám příště, když budeme pokračovat v hlubším zkoumání Developer Tools a naučíme se několik cenných lekcí. Šťastné ladění!</span>Artemis F. a Noah S. - Esri SDK Support

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