JavaScript-debuggingtips Deel II 013 Google Chrome en het Console-tabblad

Noah Sager

<\/HEAD>Dit blogbericht is het 2e in een reeks JavaScript-debuggingtips en -trucs om je op weg te helpen. Zie JavaScript Debugging Tips Part I 13; Google Chrome and the Network Tab<\/A><\/STRONG><\/EM> voor ons eerste segment.<\/EM>

Het leukste deel van elke programmeeropdracht is vlak aan het begin, wanneer je gaat zitten met een stapel tools en bronnen en begint te hameren op ruwe stukken code. Het moeilijkere deel komt wanneer je probeert de applicatie te starten, alleen om te zien dat die strak geschreven code uiteenvalt in meerdere late nachten staren naar een computerscherm. Echter, niet alles is verloren, want we hebben een uitstekende aanbeveling voor je, wat het onderwerp is van deze blog: het Console-tabblad binnen de Developer Tools van je favoriete browser.

Als je je verdrietig of emotioneel voelt, is het Console-tabblad de perfecte keuze voor jou. Misschien gaat iemand in je familie door een moeilijke tijd en kan wat opbeuring gebruiken. Overweeg het Google Chrome Console-tabblad (glutenvrije opties zijn beschikbaar). Gebruikers die van het Console-tabblad houden, vinden de ArcGIS API for JavaScript misschien ook leuk.<\/A>

Ik begrijp homografen duidelijk niet<\/P><\/DIV>

Zoals we schreven in Deel I, is toegang tot de Chrome Developer Tools eenvoudig via sneltoetsen (Control + Shift + I) of door naar de rechterbovenhoek van de browser te navigeren, op de hamburger te klikken en "Meer Hulpmiddelen" te kiezen, daarna "Developer tools".

Zodra de Developer Tools geopend zijn (andere Developer Tools zijn beschikbaar in andere browsers), worden er verschillende tabbladen toegankelijk voor je. Hier richten we ons op de Console. Als je het Console-tabblad direct wilt openen in Chrome Developer Tools, gebruik dan deze sneltoets: Control + Shift + J (de "J" staat voor joviaal). Voor meer handige tips, bekijk de officiële Google-documentatie over

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

De Console wordt voor twee doeleinden gebruikt: 1) om gelogde informatie van de JavaScript van een applicatie weer te geven (meestal tijdens applicatieontwikkeling), en 2) om objecten te onderzoeken en JavaScript interactief uit te voeren. In deze blog bekijken we beide soorten voorbeelden en lichten we enkele extra tips en trucs toe die we gebruiken bij Technische Ondersteuning.

Het eerste wat we kunnen doen is enkele "console.log"-verklaringen toevoegen binnen onze applicatie. We nemen een aangepast voorbeeld, gehost op GitHub, dat hier te vinden is: Sample Console Application<\/A><\/STRONG>. Voel je vrij om thuis mee te doen.

Op regels 60-62, en opnieuw op regel 66, hebben we enkele van die "console.log"-verklaringen toegevoegd om informatie over onze Feature Layer weer te geven. Onze use case is dat we een webmapping-applicatie maken en tijdens onze tests willen we ervoor zorgen dat de data die we consumeren van ArcGIS Online de juiste data is om op de kaart weer te geven. Hiervoor printen we een paar geselecteerde stukjes informatie over de Feature Layer: de titel van de laag en de URL van de laag. Omdat ik de syntaxis voor de URL-eigenschap niet ken, gebruik ik "URL" en "url", zoals hieronder te zien is.

<\/A>

JavaScript console.log-verklaringen<\/P><\/DIV>

Hier is een screenshot van de uitvoer van de "console.log"-verklaringen. We zien de relevante informatie die we verwachtten. Let ook op dat de uitvoer voor "featureLayer.URL" "undefined" is. Dit komt omdat items in de console hoofdlettergevoelig zijn. De geldige eigenschap is "featureLayer.url", en ongeldige eigenschappen veroorzaken geen foutmelding maar geven in plaats daarvan een undefined resultaat terug. Dit kan lastig zijn om op te sporen, maar later in deze blog bekijken we enkele tips om met dit soort problemen om te gaan.

<\/A>

JavaScript Console-uitvoer van console.log<\/P><\/DIV>

Met de Console nog open, laten we proberen dezelfde eigenschapswaarden uit de code in te voeren:

featureLayer.title<\/STRONG>featureLayer.URL<\/STRONG>featureLayer.url<\/STRONG><\/P>
Merk op dat alle<\EM> deze eigenschappen nu een foutmelding teruggeven in plaats van een daadwerkelijke waarde (of zelfs "undefined"). Dit komt omdat lokale variabelen niet langer in scope zijn nadat de app is geïnitialiseerd, dus zelfs het object "featureLayer" kan niet worden herkend.  Hier is een screenshot van de uitvoer van de nieuwe console-verklaringen.

<\/A>

JavaScript Console-uitvoer nadat app geladen is<\/P><\/DIV>

Als we "featureLayer" een globale variabele hadden gemaakt, zouden we dan "undefined" zien terugkeren voor het object in de Console (variabele bekend, maar details nog steeds niet toegankelijk). Het punt is dus dat alleen variabelen die in scope<\EM> zijn kunnen worden onderzocht in de Console. Kunnen we dus interactief met de Console werken en eigenschapswaarden typen? Laten we het uitzoeken.

Het volgende wat we kunnen doen met onze voorbeeldapp is een "debugger;"-verklaring toevoegen in de code. We nemen nog een aangepast voorbeeld, gehost op GitHub, dat hier te vinden is:

Sample Console Application 2<\STRONG>. Voel je vrij om thuis mee te doen.

Op regel 60 hebben we een "debugger;"-verklaring toegevoegd om informatie over onze Feature Layer weer te geven in de Console. Gepauzeerd in debugger 2

Cool, toch?

Laten we naar een andere optie kijken, vergelijkbaar met "debugger". Terug naar het Sources-tabblad, let op de regelnummers links van de code. Als we links klikken op een regelnummmer, kunnen we een breakpoint instellen, wat exact hetzelfde effect heeft als het schrijven van "debugger" in de code. Klik links op regels 56, 62 en 66 in dezelfde applicatie en vernieuw dan de applicatie. Breakpoint 1

De applicatie pauzeert onmiddellijk bij het eerste breakpoint. Nu kunnen we teruggaan naar het Console-tabblad en opnieuw variabelen en eigenschappen inspecteren zoveel als we willen. Niet alleen dat, door te klikken op de gebogen pijl rechts van de Play-knop bovenaan het scherm, kunnen we stap voor stap door onze applicatie lopen en met spanning zien hoe de code stap voor stap wordt uitgevoerd. Of we kunnen op de Play-knop bovenaan het scherm klikken en de applicatie laten uitvoeren tot voltooiing of tot het volgende breakpoint. Breakpoint 2

En nog een klik op de Play-knop brengt ons naar het volgende breakpoint. Breakpoint 3

Het doel van deze blog is om het nut en de functionaliteit van de Console te benadrukken, maar we willen ook een ander gebruik van breakpoints hier aanwijzen. Breakpoints geven de ontwikkelaar de mogelijkheid om te zien in welke volgorde asynchrone code wordt uitgevoerd, hoe functies worden aangeroepen en welke delen worden overgeslagen of falen. Voor meer informatie over debugtips met JavaScript-applicaties, hier zijn een paar extra bronnen uit de afgelopen jaren:Geavanceerd Debuggen met JavaScript (2009)Debuggen van JavaScript met Chrome DevTools Breakpoints (2016)JavaScript Debugging Tips Deel I (2014)
In deze aflevering hebben we geleerd hoe je toegang krijgt tot en gebruik maakt van het Console-tabblad binnen Chrome Developer tools om de eigenschappen en waarden van variabelen en objecten in onze JavaScript-code te onthullen. Deze informatie kan het debuggen en coderen van een webgebaseerde applicatie aanzienlijk vergemakkelijken. Dit sluit deel twee af van een meerdelige serie over JavaScript Debugging Tips. Doe de volgende keer weer mee wanneer we dieper ingaan op enkele Developer Tools, en krijgen we allemaal loonsverhogingen. Veel succes met debuggen!Noah S. en 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