JavaScript-debuggingtips Deel III 013 Geavanceerde Google Chrome Developer Tools

Noah Sager

<\/HEAD>Dit blogbericht is het derde in een reeks JavaScript-debuggingtips en -trucs om je op weg te helpen. Zie JavaScript Debugging Tips Deel I<\/A><\/STRONG><\/EM> en ook JavaScript Debugging Tips Deel II<\/A> <\/STRONG><\/EM>voor onze vorige segmenten.<\/EM>

In de afgelopen twee JavaScript-debuggingtips berichten op de Esri Support-blog hebben we gekeken naar het Network Tab en het Console Tab als onderdeel van de Google Chrome Developer Tools<\/A><\/STRONG>. Hoewel de meeste moderne browsers een vorm van ontwikkelaarstools hebben, gebruiken we hier Chrome voor onze voorbeelden.

Ons doel voor dit derde blogbericht in de serie is om meer geavanceerde tips en trucs te introduceren om je in staat te stellen je JavaScript-code effectiever te debuggen en problemen op te lossen. We richten ons specifiek op drie gebieden: verbeterde berichtgeving naar de console, betere manieren om breakpoints in te stellen met voorwaarden die tijdens runtime worden gespecificeerd, en een efficiëntere manier om door breakpoints te stappen in het Sources-tabblad met een methode genaamd blackboxing.Deel 1: Console.table<\/STRONG><\/SPAN>

Console.log is onze primaire debuggingfunctie, maar de uitvoer van deze functie kan wat moeilijk leesbaar zijn (vooral bij het bekijken van veel data). Een manier om onze console log-berichten te verbeteren en data gemakkelijker te bekijken is door een lijst met objecten als een tabel weer te geven, wat wordt bereikt met behulp van de console.table <\/STRONG>functie. Deze functie neemt één verplicht argument, dat een array of een object moet zijn, en één optionele parameter. Elk element in de array is een rij in de tabel.

Laten we eens kijken naar het Console Table voorbeeld<\/A><\/STRONG>.

1. Open de Chrome Developer Tools met sneltoetsen (Windows: Control + Shift + I, en Mac: Command + Option + I), of door naar het rechterbovenpaneel van de browser te navigeren, op de drie grijze verticale puntjes te klikken en "Meer tools" > "Ontwikkelaarstools" te kiezen.

2. Selecteer het console-tabblad.

3. Klik op "Query uitvoeren" in de voorbeeldapplicatie. Dit voert een querytaak uit om alle counties in Connecticut te bekijken. De code gebruikt de console.table<\/STRONG> om de resultaten in een tabel af te drukken zoals hieronder weergegeven.<\/A>

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

Elke rij in de tabel toont alle attributen voor een specifieke county. Vervolgens gebruiken we de console.log<\/STRONG> om console.log en console.table te vergelijken. Deze functie drukt een regel af met een array van objecten.

<\/A>

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

Zodra we de array uitvouwen, kunnen we de objecten in een lijst bekijken.

<\/A>

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

Om de attributen te bekijken, moeten we de objecten in de lijst uitvouwen.

<\/A>

console.log uitgebreid met attributen<\/P><\/DIV>Hoewel we bij gebruik van console.log toegang hebben tot de attributen van één feature, kunnen we met console.table alle attributen voor alle features tegelijk bekijken! De afbeelding hieronder toont beide functies in het consolevenster.

<\/A>

console.table &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;

retourneert altijd true, dus we moeten "==" gebruiken.

Breakpoint Expressie

5. Als we "test" invoeren voor de "Contact:" en klikken op "Update incident info", wordt de breakpoint bereikt en pauzeert de applicatie. Voorwaarde Vervuld

Deze conditionele breakpoints kunnen nuttig zijn voor testen wanneer je wilt verzekeren dat data correct naar de server wordt teruggestuurd, of voor foutafhandeling wanneer je wilt dat de applicatie pauzeert zodat je het object/de objecten van belang kunt inspecteren in plaats van dat je foutafhandelingscode het overneemt.Deel 3: Blackboxing

Het instellen van breakpoints is een geweldige manier om vrienden te maken en door je code te gaan, maar dit proces kan je soms uit het bestand van interesse halen en in een ander bronbestand of in een third-party JavaScript bibliotheek brengen.

Laten we bijvoorbeeld eens naar een voorbeeld kijken.

1. Open de Query SceneLayerView sample om mee te volgen (dit is vergelijkbaar met de sample gevonden op developers.arcgis.com).

2. Open de Chrome Developer Tools, selecteer het tabblad Sources, en klik links op regel 49 om een breakpoint te zetten.

3. Vernieuw de pagina zodat de debugger pauzeert op regel 49. Vanaf hier verschijnt een "Paused in debugger" bericht (naast een "Play" knop en een "Step Over" knop). Zie hieronder voor een screenshot. Gepauzeerd bij Regel 49

4. Als je ongeveer vijf keer op de "Step Over" knop klikt, verlaat je het hoofd .html bestand en ga je naar het init.js bestand van de ArcGIS API for JavaScript. Je kunt het init.js bestand verkennen, maar we willen ons richten op de code die wij hebben geschreven. Klik op de "Play" knop om veilig thuis te komen. Debugger in init.js bestand

Blackboxing komt nu te hulp. Blackboxing is een methode om bestanden en bibliotheken uit te sluiten van de debugger, zodat je focus blijft op je bestand(en) van interesse. Laten we eens kijken hoe we de ArcGIS API for JavaScript bibliotheek kunnen blackboxen zodat we alleen door het hoofd bestand van interesse kunnen stappen.

1. Met de Developer Tools open, klik op de drie verticale puntjes in het meest rechtse paneel van het venster en selecteer Instellingen. Instellingen Developer Tool Instellingen Developer Tool

2. Klik aan de linkerkant van het venster op "Blackboxing" om het venster "Framework Blackbox Patterns" te openen. Blackboxing

3. Klik op de knop “Add pattern…” en voer dit frameworkpatroon in: js.arcgis.com.*\.js Blackboxing Patroon

4. Klik op “Add” en vink het vakje boven het patroonveld aan om “Blackbox content scripts” te activeren.

5. Sluit het instellingenvenster en ga terug naar het tabblad Sources.

6. Vernieuw de pagina zodat de debugger pauzeert op regel 49.

7. Als je ongeveer vijf keer op de knop “Step Over” klikt, verlaat je het hoofd .html-bestand en ga je naar het debugger:///VM-bestand (dit is een lege functie die je veilig kunt negeren, of hier meer over lezen), evenals nog één “Step Over”-bewerking in de applicatie. Nu kun je, in plaats van onnodige, bijkomende bibliotheken te debuggen, focussen op het debuggen van de code die jij hebt geschreven of probeert te begrijpen.

Een laatste punt dat vermeldenswaard is, is dat blackboxing geldt voor de browser, niet alleen voor de webpagina of webapplicatie van interesse. Na afloop van het testen kun je gerust het blackboxed patroon/de patronen verwijderen om een conventionele webbrowserervaring te garanderen.

Dit sluit onze blog af over geavanceerde tips voor het gebruik van Google Chrome Developer Tools met voorbeelden uit de ArcGIS API for JavaScript. We hopen dat je bovenstaande tips nuttig en vermakelijk vond. Voor meer informatie over debugtips met JavaScript-applicaties zijn hier nog enkele aanvullende bronnen uit de afgelopen jaren:Aanvullende BronnenNuttige Javascript-debuggingtips die je misschien niet kent (2015)Javascript-debuggingtips met gebruik van Chrome Dev Tools, deb.js en meer (2015)(Mozilla) Introductie debugger.html (2016)Debuggen met de JavaScript debugger (2017)Blackbox JavaScript Source FilesSluit je de volgende keer bij ons aan terwijl we dieper ingaan op Developer Tools en enkele waardevolle lessen leren. Veel succes met debuggen!</span>Artemis F. en 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