JavaScript-Debugging-Tipps Teil III – Erweiterte Google Chrome Developer Tools

Noah Sager

<\/HEAD>Dieser Blogbeitrag ist der dritte in einer Reihe von JavaScript-Debugging-Tipps und Tricks, die Ihnen auf Ihrem Weg helfen sollen. Siehe JavaScript Debugging Tips Part I <\/A><\/STRONG><\/EM> und auch JavaScript Debugging Tips Part II<\/A> <\/STRONG><\/EM>für unsere vorherigen Abschnitte. <\/EM>

In den letzten beiden Beiträgen zu JavaScript Debugging Tips im Esri Support-Blog haben wir uns die Network Tab und die Console Tab als Teil der Google Chrome Developer Tools<\/A><\/STRONG> angesehen. Während die meisten modernen Browser eine Form von Entwicklerwerkzeugen haben, verwenden wir hier Chrome für unsere Beispiele.

Unser Ziel für diesen dritten Blogbeitrag in der Serie ist es, fortgeschrittenere Tipps und Tricks vorzustellen, um Ihnen zu ermöglichen, Ihren JavaScript-Code effektiver zu debuggen und Fehler zu beheben. Insbesondere konzentrieren wir uns auf drei Bereiche: verbesserte Nachrichten an die Konsole, bessere Möglichkeiten, Breakpoints mit zur Laufzeit angegebenen Bedingungen zu setzen, und eine effizientere Methode zum Durchschreiten von Breakpoints im Sources-Tab mit einer Methode namens Blackboxing.Teil 1: Console.table<\/STRONG><\/SPAN>

Console.log ist unsere primäre Debugging-Funktion, aber die Ausgabe dieser Funktion kann etwas schwer lesbar sein (besonders bei der Anzeige vieler Daten). Eine Möglichkeit, unsere Konsolenprotokollnachrichten zu verbessern und Daten leichter anzusehen, ist die Anzeige einer Liste von Objekten als Tabelle, was mit der console.table <\/STRONG>Funktion erreicht wird. Diese Funktion nimmt ein obligatorisches Argument entgegen, das ein Array oder ein Objekt sein muss, sowie einen zusätzlichen optionalen Parameter. Jedes Element im Array ist eine Zeile in der Tabelle.

Werfen wir einen Blick auf das Console Table Beispiel<\/A><\/STRONG>.

1. Öffnen Sie die Chrome Developer Tools mit den Tastenkombinationen (Windows: Control + Shift + I, und Mac: Command + Option + I) oder indem Sie zum oberen rechten Bereich des Browsers navigieren, auf die drei grauen vertikalen Punkte klicken und "Mehr Werkzeuge" > "Entwicklerwerkzeuge" auswählen.

2. Wählen Sie den Console-Tab aus.

3. Klicken Sie in der Beispielanwendung auf "Abfrage ausführen". Dies führt eine Abfrage aus, um alle Landkreise in Connecticut anzuzeigen. Der Code verwendet console.table<\/STRONG>, um die Ergebnisse wie unten gezeigt in einer Tabelle auszugeben.<\/A>

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

Jede Zeile in der Tabelle zeigt alle Attribute für einen bestimmten Landkreis. Als nächstes verwenden wir console.log<\/STRONG>, um console.log und console.table zu vergleichen. Diese Funktion gibt eine Zeile mit einem Array von Objekten aus.

<\/A>

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

Wenn wir das Array erweitern, können wir die Objekte in einer Liste ansehen.

<\/A>

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

Um die Attribute anzuzeigen, müssen wir die Objekte in der Liste erweitern.

<\/A>

console.log erweitert mit Attributen<\/P><\/DIV>Während wir bei Verwendung von console.log auf die Attribute eines einzelnen Features zugreifen können, können wir mit console.table alle Attribute aller Features gleichzeitig anzeigen! Das Bild unten zeigt beide Funktionen im Konsolenfenster.

<\/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;

Teil 2: bedingte Breakpoints





Im JavaScript Debugging Tips Part II, haben wir darüber gesprochen, wie man einen Breakpoint im Sources-Tab setzt, die Anwendung aktualisiert und an dieser Codezeile anhält. Dies ist eine großartige Möglichkeit, Ihren Code zu untersuchen und wie Funktionen aufgerufen werden sowie potenzielle Problemstellen zu identifizieren.





Manchmal möchten wir jedoch nicht, dass der Breakpoint jedes Mal erreicht wird. Manchmal soll der Breakpoint nur erreicht werden, wenn bestimmte Bedingungen erfüllt sind. Während man Logikcode in Form einer Schleife schreiben könnte, um Werte zu prüfen, gibt es eine einfachere Möglichkeit dies zur Laufzeit zu tun.





Zum Beispiel schauen wir uns ein Beispiel an.





1. Öffnen Sie das Edit Features Beispiel und die Chrome Developer Tools.





2. Navigieren Sie zum Sources-Tab und klicken Sie links auf Zeile 301, um dort einen Breakpoint zu setzen.





3. Nachdem der Breakpoint gesetzt wurde, klicken Sie mit der rechten Maustaste auf den Breakpoint und wählen "Breakpoint bearbeiten…"





Breakpoint bearbeiten


Hinweis:&nbspWir könnten auch hierher gelangen, indem wir zuerst mit der rechten Maustaste auf Zeile 301 klicken und "Bedingten Breakpoint hinzufügen…" auswählen.





Bedingten Breakpoint hinzufügen






4.&nbspSetzen Sie eine Bedingung fest, bei der der Breakpoint nur erreicht wird, wenn der Benutzer "test" in das Feld "Kontakt:" eingibt beim Aktualisieren eines Features. Hier ist der Code:editFeature.attributes[\"Incident_Address\"] == \u201ctest\u201d
Hinweis:&nbspWir wollen nicht "=", weil dies einen Wert zuweist und somit gibt immer true zurück, daher müssen wir "==" verwenden. Breakpoint-Ausdruck

5. Wenn wir "test" für das Feld "Contact:" eingeben und auf "Update incident info" klicken, wird der Breakpoint erreicht und die Anwendung pausiert. Bedingung erfüllt

Diese bedingten Breakpoints können nützlich sein, um zu testen, ob Daten korrekt an den Server gesendet werden, oder für die Fehlerbehandlung, wenn Sie möchten, dass die Anwendung pausiert, damit Sie das/die relevante(n) Objekt(e) inspizieren können, anstatt dass Ihr Fehlerbehandlungscode übernimmt.Teil 3: Blackboxing

Das Setzen von Breakpoints ist eine großartige Möglichkeit, sich mit Ihrem Code vertraut zu machen, aber dieser Prozess kann Sie gelegentlich aus der interessierenden Datei heraus und in eine andere Quelldatei oder in eine Drittanbieter-JavaScript-Bibliothek führen.

Zum Beispiel schauen wir uns ein Beispiel an.

1. Öffnen Sie das Query SceneLayerView-Beispiel, um mitzumachen (dies ist ähnlich dem Beispiel auf developers.arcgis.com).

2. Öffnen Sie die Chrome Developer Tools, wählen Sie den Tab Quellen (Sources) und klicken Sie links auf Zeile 49, um einen Breakpoint zu setzen.

3. Aktualisieren Sie die Seite, sodass der Debugger bei Zeile 49 pausiert. Hier erscheint eine Meldung "Paused in debugger" (neben einem "Play"-Button und einem "Step Over"-Button). Unten sehen Sie einen Screenshot. Pausiert bei Zeile 49

4. Wenn Sie etwa fünfmal auf den "Step Over"-Button klicken, verlassen Sie die Haupt-.html-Datei und gelangen in die init.js-Datei der ArcGIS API for JavaScript. Sie können die init.js-Datei erkunden, aber wir wollen uns auf den Code konzentrieren, den wir geschrieben haben. Klicken Sie auf den "Play"-Button, um sicher zurückzukehren. Debugger in init.js-Datei

Hier kommt Blackboxing ins Spiel. Blackboxing ist eine Methode, Dateien und Bibliotheken vom Debugger auszuschließen, sodass Ihr Fokus auf Ihren interessierenden Dateien bleibt. Schauen wir uns an, wie wir die ArcGIS API for JavaScript-Bibliothek blackboxen können, damit wir nur durch die Hauptdatei gehen.

1. Mit geöffneten Developer Tools klicken Sie auf die drei vertikalen Punkte im ganz rechten Bereich des Fensters und wählen Einstellungen (Settings). Einstellungen der Developer Tools Einstellungen der Developer Tools

2. Klicken Sie links im Fenster auf „Blackboxing“, um die „Framework Blackbox Patterns“ zu öffnen. Blackboxing

3. Klicken Sie auf die Schaltfläche „Add pattern…“ und geben Sie dieses Framework-Muster ein: js.arcgis.com.*\.js Blackboxing-Muster

4. Klicken Sie auf „Add“ und aktivieren Sie das Kontrollkästchen über dem Muster-Eingabefeld für „Blackbox content scripts“.

5. Schließen Sie das Einstellungsfenster und kehren Sie zum Quellen-Tab zurück.

6. Aktualisieren Sie die Seite, sodass der Debugger bei Zeile                                                     
49 pausiert.

7. Wenn Sie etwa fünfmal auf den „Step Over“-Button klicken, verlassen Sie die Haupt-.html-Datei und gelangen in die debugger:///VM-Datei (dies ist eine leere Funktion, die Sie sicher ignorieren können oder hier mehr darüber lesen), sowie eine weitere „Step Over“-Operation in die Anwendung hinein. Nun können Sie sich statt unnötiger Nebenbibliotheken auf das Debuggen des Codes konzentrieren, den Sie geschrieben haben oder verstehen möchten.

Ein letzter erwähnenswerter Punkt ist, dass Blackboxing für den Browser gilt und nicht nur für die interessierende Webseite oder Web-App. Nach Abschluss der Tests können Sie das/die blackboxed Muster entfernen, um ein konventionelles Web-Browsing-Erlebnis sicherzustellen.

Damit endet unser Blog über fortgeschrittene Tipps zur Verwendung der Google Chrome Developer Tools mit Beispielen aus der ArcGIS API for JavaScript. Wir hoffen, dass Ihnen die obigen Tipps nützlich und unterhaltsam waren. Für weitere Informationen zu Debugging-Tipps mit JavaScript-Anwendungen finden Sie hier einige zusätzliche Ressourcen aus den letzten Jahren:Zusätzliche RessourcenNützliche Javascript-Debugging-Tipps, die Sie vielleicht nicht kennen (2015)Javascript-Debugging-Tipps mit den Chrome Dev Tools, deb.js und mehr (2015)(Mozilla) Einführung von debugger.html (2016)Debugging mit dem JavaScript-Debugger (2017)Blackbox JavaScript-QuelldateienBegleiten Sie uns beim nächsten Mal, wenn wir weiterhin immer tiefer in die Developer Tools eintauchen und einige wertvolle Lektionen lernen. Viel Erfolg beim Debuggen!</span>Artemis F. und 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