Tipy pro ladění JavaScriptu Část I – Google Chrome a záložka Network

Noah Sager

<\/HEAD>

Tento blogový příspěvek je prvním v sérii tipů a triků pro ladění, které vám pomohou na vaší cestě. <\/EM>

Venku je džungle. A ať se vám to líbí nebo ne, uvnitř vaší aplikace je to také džungle. Práce s chybami není tak jednoduchá jako pomalé procházení řádků kódu; vyžaduje to specializované nástroje a upřímnou zvědavost. V džungli má matka gorila k dispozici jen svou odvahu a důvtip. Ale jako webový vývojář máte k dispozici různé nástroje.  Dnes se podíváme na záložku Network uvnitř Developer Tools v Google Chrome.

Přístup k Chrome Developer Tools je snadný pomocí klávesové zkratky (Control + Shift + I) nebo navigací do pravého horního rohu prohlížeče, kliknutím na tři šedé vodorovné čáry, poté výběrem „Tools“ a následně „Developer tools".<\/A>

Na rozdíl od matky gorily, Chrome Developer Tools se o vás a vaše aplikace stará. Má vás rád. Myslí si, že jste opravdu dobrý vývojář. Ale musíte něco udělat. Je to trochu jako Esri Support. Máme vás rádi. Chceme vám pomoci a budeme tu, když uděláte první krok.

Zatímco jsou developer tools otevřené, můžete vymazat cache prohlížeče jednoduše kliknutím a podržením tlačítka obnovit stránku.  Tato akce vám nabídne tři různé možnosti: Normal Reload<\/STRONG>, Hard Reload<\/STRONG> a Empty Cache and Hard Reload<\/STRONG>. Tyto možnosti vám pomohou zajistit, že změny ve vašem kódu se projeví v prohlížeči. Jinak by aplikace mohla načíst starší kód z cache prohlížeče. Když jsem smutný, pár Hard Reloadů vždy pomůže. Pokud je blízko konec dne, možná budete chtít nejdříve cache vyprázdnit. <\/A>

Nyní když jste vymazali cache a znovu načetli vaši aplikaci, můžeme pokračovat.  Stejně jako developer tools v jiných hlavních prohlížečích, například Firebug<\/A>, a samostatné nástroje jako Fiddler<\/A>, záložka Network v Chrome zaznamenává jednotlivé požadavky spuštěné z aktuálně otevřené záložky v prohlížeči.  Obvykle se při obnovení stránky načte řada zdrojů a další požadavky jsou prováděny během interakce uživatele se stránkou.

Záložka Network je moje osobní oblíbená. Vždy ji otevřu před spuštěním jakékoli testovací aplikace. Zde se můžeme zaměřit na kontrolu webového provozu, abychom zjistili, jak aplikace komunikuje s online službami. Pokud je v aplikaci tisková služba, můžete v záložce network získat webmapu jako JSON a porovnat její parametry s REST API, abyste zjistili, zda je JSON platný. Také můžete vidět všechny zdroje, které aplikace využívá, a kde se tyto zdroje nacházejí.

Pokud se v aplikaci něco zjevně pokazilo, první věcí ke kontrole jsou požadavky, které úplně selhaly.  Nejčastější chyby jsou 403, což znamená, že nemáte oprávnění přistupovat ke zdroji, a 404, což znamená, že zdroj nebyl nalezen.  Z mé vlastní zkušenosti jsou chyby 404 nejčastěji způsobeny překlepem, který jsem udělal při psaní umístění služby, protože píšu kód jako matka gorila.<\/P>

<\/A><\/P>

Tento screenshot ukazuje otevřenou záložku Network s chybou 404 (Nenalezeno) v síťovém provozu týkající se chybějícího .css souboru na serveru localhost (dal jsem .css do špatné složky)<\/EM><\/P>
V tomto dílu jsme se naučili, jak přistupovat k záložce Network uvnitř Chrome Developer tools a používat ji k odhalení jednotlivých požadavků spuštěných aplikací a jejich úspěšnosti či selhání. Tyto informace mohou výrazně usnadnit ladění aplikace, když je k dispozici minimální jiná chybová informace tím, že ukazují vývojáři, co se děje za scénou a na jaké části kódu se zaměřit. Tímto končí první část vícedílné série o tipech pro ladění JavaScriptu. Připojte se k nám příště, kdy se ponoříme ještě hlouběji do záložky Network s reálným příkladem. Šťastné ladění!<\/P><\/BODY><\/HTML>

AndresCastillo

Noah Sager‌

It was amazing meeting you at the UC!

You are even cooler than your blogs already make you look.

I hope you don't mind.......I want to share a blog I wrote since it 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