JavaScript-Debugging-Tipps Teil II – Google Chrome und der Console-Tab

Noah Sager

<\/HEAD>Dieser Blogbeitrag ist der 2. Teil einer Serie von JavaScript-Debugging-Tipps und Tricks, die Ihnen auf Ihrem Weg helfen sollen. Siehe JavaScript Debugging Tips Part I 11 Google Chrome and the Network Tab<\/A><\/STRONG><\/EM> ffcr unseren ersten Abschnitt.<\/EM>

Der angenehmste Teil jeder Programmieraufgabe ist gleich zu Beginn, wenn man sich mit einem Haufen Werkzeuge und Ressourcen hinsetzt und anfe4ngt, rohe Codeklumpen zu bearbeiten. Der schwierigere Teil kommt, wenn man versucht, die Anwendung zu starten, nur um zuzusehen, wie dieser eng geschriebene Code sich in mehrere spe4te Ne4chte verwandelt, in denen man auf einen Computerbildschirm starrt. Doch alles ist nicht verloren, denn wir haben eine ausgezeichnete Empfehlung ffcr Sie, die das Thema dieses Blogs ist: der Console-Tab in den Developer Tools Ihres Lieblingsbrowsers.

Wenn Sie sich vere4rgert oder emotional ffchlen, ist der Console-Tab die perfekte Wahl ffcr Sie. Vielleicht durchlebt jemand in Ihrer Familie eine schwierige Zeit und kf6nnte etwas Aufmunterung gebrauchen. Betrachten Sie den Google Chrome Console-Tab (glutenfreie Optionen sind verffcgbar). Benutzer, die den Console-Tab mf6gen, kf6nnten auch die ArcGIS API for JavaScript genie9fen.<\/A>

Ich verstehe offensichtlich keine Homographe<\/P><\/DIV>

Wie wir in Teil I geschrieben haben, ist der Zugriff auf die Chrome Developer Tools einfach mit Tastenkombinationen (Strg + Umschalt + I) oder indem man oben rechts im Browser auf das Hamburger-Menfc klickt und "Weitere Tools" auswe4hlt, dann "Developer tools".

Sobald die Developer Tools gef6ffnet sind (andere Developer Tools sind in anderen Browsern verffcgbar), werden Ihnen mehrere Tabs zug9cnglich. Hier konzentrieren wir uns auf die Console. Wenn Sie den Console-Tab in den Chrome Developer Tools direkt f6ffnen mf6chten, verwenden Sie diese Tastenkombination: Strg + Umschalt + J (das "J" steht ffcr jocular). F9cr weitere coole Tipps schauen Sie bitte in die offizielle Google-Dokumentation zu

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

Die Console wird f9cr zwei Zwecke verwendet: 1) um protokollierte Informationen aus dem JavaScript einer Anwendung anzuzeigen (normalerweise w9ahrend der Anwendungsentwicklung), und 2) um Objekte zu untersuchen und JavaScript interaktiv auszuf9chren. In diesem Blog betrachten wir beide Arten von Beispielen und erl9autern einige zus9atzliche Tipps und Tricks, die wir im technischen Support verwenden.

Das erste, was wir tun k96nnen, ist einige "console.log"-Anweisungen in unsere Anwendung einzuf9cgen. Wir nehmen ein modifiziertes Beispiel, das auf GitHub gehostet wird und hier zu finden ist: Sample Console Application<\/A><\/STRONG>. F9crs Mitmachen zu Hause.

In den Zeilen 60-62 und erneut in Zeile 66 haben wir einige dieser "console.log"-Anweisungen hinzugef9cgt, um Informationen 9ber unsere Feature Layer anzuzeigen. Unser Anwendungsfall ist, dass wir eine Web-Mapping-Anwendung erstellen und w9ahrend unserer Tests sicherstellen wollen, dass die Daten, die wir von ArcGIS Online beziehen, die richtigen Daten sind, um sie auf der Karte anzuzeigen. Zu diesem Zweck geben wir einige ausgew4hlte Informationen 9ber den Feature Layer aus: den Titel des Layers und die URL des Layers. Da ich die Syntax f9cr die URL-Eigenschaft nicht kenne, verwende ich "URL" und "url", wie unten zu sehen.

<\/A>

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

Hier ist ein Screenshot der Ausgabe der "console.log"-Anweisungen. Wir sehen die relevanten Informationen, die wir erwartet haben. Beachten Sie auch, dass die Ausgabe f9cr "featureLayer.URL" "undefined" ist. Das liegt daran, dass Elemente in der Konsole case-sensitive sind. Die g52ltige Eigenschaft ist "featureLater.url", und ung5ltige Eigenschaften werfen keinen Fehler, sondern liefern stattdessen ein undefiniertes Ergebnis zur5ck. Das kann eine tückische Sache sein, aber sp5ter in diesem Blog werden wir einige Tipps zum Umgang mit solchen Problemen betrachten.

<\/A>

JavaScript Console-Ausgabe von console.log<\/P><\/DIV>

Mit geoffneter Konsole versuchen wir nun dieselben Eigenschaftswerte aus dem Code einzugeben:

featureLayer.title<\/>featureLayer.URL<\/>featureLayer.url<\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/>Beachten Sie, dass alle<\/> diese Eigenschaften jetzt einen Fehler zuruckgeben anstatt eines tatsachlichen Werts (oder sogar "undefined"). Das liegt daran, dass lokale Variablen nach Initialisierung der App nicht mehr im Geltungsbereich sind und somit selbst das Objekt "featureLayer" nicht erkannt wird. Hier ist ein Screenshot der Ausgabe der neuen Konsolenanweisungen.

JavaScript Console-Ausgabe nach Laden der App

Wenn wir "featureLayer" als globale Variable definiert hätten, würden wir im Console-Fenster "undefined" als Ergebnis erhalten (Variable bekannt aber Details nicht zugänglich). Der Punkt ist also nur Variablen im Geltungsbereich können in der Konsole abgefragt werden. Können wir also interaktiv Werte eingeben? Finden wir es heraus.

Als nächstes können wir unserer Beispiel-App eine "debugger;" Anweisung hinzufügen. Wir nehmen ein weiteres modifiziertes Beispiel von GitHub hier: Pausiert im Debugger 2

Cool, oder?

Schauen wir uns eine weitere Option an, ähnlich wie „debugger“. Zurück zum Sources-Tab, beachten Sie die Zeilennummern links vom Code. Wenn wir auf eine Zeilennummer links klicken, können wir einen Breakpoint setzen, der genau denselben Effekt hat wie das Schreiben von „debugger“ im Code. Klicken Sie links auf die Zeilen 56, 62 und 66 in derselben Anwendung und aktualisieren Sie dann die Anwendung. Breakpoint 1

Die Anwendung pausiert sofort am ersten Breakpoint. Nun könnten wir zum Console-Tab zurückkehren und erneut Variablen und Eigenschaften nach Herzenslust inspizieren. Nicht nur das, durch Klicken auf den gebogenen Pfeil rechts neben dem Play-Button oben im Bildschirm können wir Schritt für Schritt durch unsere Anwendung gehen und die Spannung beobachten, wie der Code Schritt für Schritt ausgeführt wird. Oder wir klicken auf den Play-Button oben im Bildschirm und lassen die Anwendung bis zum Abschluss oder bis zum nächsten Breakpoint laufen. Breakpoint 2

Und ein weiterer Klick auf den Play-Button bringt uns zum nächsten Breakpoint. Breakpoint 3

Der Zweck dieses Blogs ist es, die Nützlichkeit und Funktionalität der Console hervorzuheben, aber wir möchten auch eine weitere Verwendung des Setzens von Breakpoints hier anmerken. Breakpoints ermöglichen es dem Entwickler zu sehen, in welcher Reihenfolge asynchroner Code ausgeführt wird, wie Funktionen ausgeführt werden und welche Teile übersprungen oder fehlschlagen. Für weitere Informationen über Debugging-Tipps mit JavaScript-Anwendungen hier einige zusätzliche Ressourcen aus den letzten Jahren:Erweitertes Debugging mit JavaScript (2009)Debugging von JavaScript mit Chrome DevTools Breakpoints (2016)JavaScript Debugging Tipps Teil I (2014)
In dieser Ausgabe haben wir gelernt, wie man auf den Console-Tab innerhalb der Chrome Developer Tools zugreift und ihn verwendet, um die Eigenschaften und Werte von Variablen und Objekten in unserem JavaScript-Code anzuzeigen. Diese Informationen können das Debuggen und Codieren einer webbasierten Anwendung erheblich erleichtern. Dies beendet Teil zwei einer mehrteiligen Serie über JavaScript Debugging Tipps. Seien Sie beim nächsten Mal wieder dabei, wenn wir noch tiefer in einige Developer Tools eintauchen, und alle bekommen Gehaltserhöhungen. Viel Spaß beim Debuggen!Noah S. und 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