JavaScript Debugging Tips Deel I 6 Google Chrome en het Network-tabblad

Noah Sager

<\/HEAD>

Deze blogpost is het eerste deel in een serie debugging tips en trucs om je op weg te helpen. <\/EM>

Het is een oerwoud daarbuiten. En of je het nu leuk vindt of niet, het is ook een oerwoud binnen je applicatie. Bugs oplossen is niet zo eenvoudig als langzaam regels code doorzoeken; het vereist toegewijde tools en oprechte nieuwsgierigheid. In het oerwoud heeft de moedergorilla weinig meer om op te vertrouwen dan haar moed en haar sluwheid. Maar als webontwikkelaar heb je een verscheidenheid aan tools tot je beschikking.  Vandaag gaan we kijken naar het Network-tabblad binnen Google Chrome9s Developer Tools.

Toegang krijgen tot de Chrome Developer Tools gaat eenvoudig met sneltoetsen (Control + Shift + I) of door naar de rechterbovenhoek van de browser te navigeren, te klikken op de drie grijze horizontale lijnen, vervolgens Tools te kiezen en daarna Developer tools.<\/A>

In tegenstelling tot de moedergorilla, geeft Chrome Developer Tools om jou en je applicaties. Het vindt je leuk. Het denkt dat je een heel goede ontwikkelaar bent. Maar je moet wel wat werk doen. Het is een beetje zoals Esri Support. We vinden je leuk. We willen je helpen, en we zijn er wanneer jij de eerste stap zet.

Terwijl de developer tools open zijn, kun je de browsercache wissen door simpelweg op de vernieuwknop te klikken en vast te houden.  Deze actie geeft je drie verschillende opties: Normale herlaadactie<\/STRONG>, Geforceerde herlaadactie<\/STRONG>, en Cache legen en geforceerde herlaadactie<\/STRONG>. Deze opties helpen ervoor te zorgen dat wijzigingen in je code worden weergegeven in de browser. Anders kan de applicatie oudere code laden uit de cache van de browser. Als ik me down voel, doen een paar Geforceerde herlaadacties altijd wonderen. Is het bijna het einde van de dag, dan wil je misschien eerst de cache legen. <\/A>

Nu je de cache hebt gewist en je applicatie opnieuw hebt geladen, kunnen we verder.  Net als bij developer tools in andere grote browsers, zoals Firebug<\/A>, en zelfstandige tools zoals Fiddler<\/A>, registreert het Network-tabblad in Chrome individuele verzoeken die voortkomen uit het tabblad dat momenteel in de browser openstaat.  Meestal worden er verschillende bronnen geladen wanneer een pagina wordt vernieuwd en worden er extra verzoeken uitgevoerd terwijl de gebruiker met de pagina interacteert.

Het Network-tabblad is mijn persoonlijke favoriet. Ik open dit tabblad altijd voordat ik een testapplicatie start. Hier kunnen we ons richten op het inspecteren van webverkeer om te ontdekken hoe de applicatie communiceert met online services. Als er een printservice in de applicatie zit, kun je in het network-tabblad de webmap als JSON pakken en de parameters vergelijken met de REST API om te zien of de JSON geldig is. Je kunt ook alle bronnen zien die de applicatie gebruikt, en waar die bronnen zich bevinden.

Als er iets zichtbaar mis is gegaan in de applicatie, zijn de eerste dingen om naar te kijken verzoeken die volledig zijn mislukt.  De meest voorkomende fouten zijn 403, wat aangeeft dat je geen toestemming hebt om toegang te krijgen tot de bron, en 404, wat betekent dat de bron niet gevonden kan worden.  Uit mijn eigen ervaring worden 404-fouten meestal veroorzaakt door een typefout die ik maakte toen ik de locatie van een service uitschreef, omdat ik code schrijf als een moedergorilla.<\/P>

<\/A><\/P>

Deze screenshot toont het Network-tabblad open met een 404-fout (Niet Gevonden) in het netwerkverkeer betreffende een ontbrekend .css-bestand op de server genaamd localhost (ik heb het .css-bestand in de verkeerde map geplaatst)<\/EM><\/P>
In deze aflevering hebben we geleerd hoe we toegang krijgen tot en gebruik maken van het Network-tabblad binnen Chrome Developer Tools om individuele verzoeken die door een applicatie worden gestart te onthullen, evenals hun succes of falen. Deze informatie kan het debuggen van een applicatie aanzienlijk vergemakkelijken wanneer minimale andere foutinformatie beschikbaar is door aan te geven wat er achter de schermen gebeurt en op welke delen van de code focus moet liggen. Dit sluit deel één af van een meerdelige serie over JavaScript Debugging Tips. Sluit volgende keer weer aan wanneer we nog dieper ingaan op het Network-tabblad met een praktijkvoorbeeld. Veel succes met debuggen!<\/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