JavaScript-Debugging-Tipps Teil I – Google Chrome und der Network Tab

Noah Sager

<\/HEAD>

Dieser Blogbeitrag ist der erste einer Serie von Debugging-Tipps und Tricks, die Ihnen auf Ihrem Weg helfen sollen. <\/EM>

Draußen ist es ein Dschungel. Und ob es Ihnen gefällt oder nicht, es ist auch ein Dschungel in Ihrer Anwendung. Die Fehler zu beheben ist nicht so einfach wie das langsame Durchsuchen von Codezeilen; es erfordert spezielle Werkzeuge und ehrliche Neugier. Im Dschungel hat die Momma-Gorilla kaum mehr als ihren Mut und ihre Schlauheit, auf die sie sich verlassen kann. Aber als Webentwickler haben Sie eine Vielzahl von Tools zur Verfügung.  Heute werfen wir einen Blick auf den Network Tab in den Developer Tools von Google Chrome.

Der Zugriff auf die Chrome Developer Tools erfolgt einfach über Tastenkombinationen (Control + Shift + I) oder indem Sie oben rechts im Browser auf die drei grauen horizontalen Linien klicken, dann "Tools" auswählen und anschließend "Developer tools".<\/A>

Im Gegensatz zur Momma-Gorilla kümmern sich die Chrome Developer Tools um Sie und Ihre Anwendungen. Sie mögen Sie. Sie denken, dass Sie ein wirklich guter Entwickler sind. Aber Sie müssen etwas Arbeit leisten. Es ist ein bisschen wie Esri Support. Wir mögen Sie. Wir wollen Ihnen helfen, und wir sind da, wenn Sie den ersten Schritt machen.

Während die Developer Tools geöffnet sind, können Sie den Browser-Cache einfach löschen, indem Sie die Aktualisieren-Schaltfläche gedrückt halten.  Diese Aktion bietet Ihnen drei verschiedene Optionen: Normal Reload<\/STRONG>, Hard Reload<\/STRONG> und Empty Cache and Hard Reload<\/STRONG>. Diese Optionen helfen Ihnen sicherzustellen, dass Änderungen an Ihrem Code im Browser reflektiert werden. Andernfalls lädt die Anwendung möglicherweise den älteren Code aus dem Browser-Cache. Wenn ich mich niedergeschlagen fühle, helfen mir ein paar Hard Reloads immer weiter. Wenn es gegen Ende des Tages ist, möchten Sie vielleicht zuerst den Cache leeren. <\/A>

Nachdem Sie nun den Cache geleert und Ihre Anwendung neu geladen haben, können wir fortfahren.  Wie die Developer Tools in anderen großen Browsern, wie Firebug<\/A>, und eigenständige Tools wie Fiddler<\/A>, protokolliert der Network Tab in Chrome einzelne Anfragen, die vom aktuell im Browser geöffneten Tab ausgehen.  Typischerweise werden beim Aktualisieren einer Seite verschiedene Ressourcen geladen und zusätzliche Anfragen ausgeführt, während der Benutzer mit der Seite interagiert.

Der Network Tab ist mein persönlicher Favorit. Ich öffne diesen Tab immer vor dem Ausführen einer Testanwendung. Hier können wir uns darauf konzentrieren, den Webverkehr zu inspizieren, um herauszufinden, wie die Anwendung mit Online-Diensten interagiert. Wenn es einen Druckdienst in der Anwendung gibt, können Sie die Webkarte als JSON im Network Tab abrufen und deren Parameter mit der REST API vergleichen, um zu sehen, ob das JSON gültig ist. Sie können auch alle Ressourcen sehen, die die Anwendung verbraucht, und wo sich diese Ressourcen befinden.

Wenn in der Anwendung etwas sichtbar schiefgelaufen ist, sind die ersten Dinge, nach denen man suchen sollte, vollständig fehlgeschlagene Anfragen.  Die häufigsten Fehler sind 403, was bedeutet, dass Sie keine Berechtigung zum Zugriff auf die Ressource haben, und 404, was bedeutet, dass die Ressource nicht gefunden werden kann.  Nach meiner eigenen Erfahrung werden 404-Fehler am häufigsten durch einen Tippfehler verursacht, den ich beim Schreiben des Speicherorts eines Dienstes gemacht habe, weil ich Code schreibe wie eine Momma-Gorilla.<\/P>

<\/A><\/P>

Dieser Screenshot zeigt den geöffneten Network Tab mit einem 404-Fehler (Nicht gefunden) im Netzwerkverkehr bezüglich einer fehlenden .css-Datei auf dem Server namens localhost (ich habe die .css-Datei im falschen Ordner abgelegt)<\/EM><\/P>
In diesem Teil haben wir gelernt, wie man auf den Network Tab in den Chrome Developer Tools zugreift und ihn verwendet, um die einzelnen von einer Anwendung gestarteten Anfragen sowie deren Erfolg oder Misserfolg anzuzeigen. Diese Informationen können das Debuggen einer Anwendung erheblich erleichtern, wenn nur minimale andere Fehlermeldungen verfügbar sind, indem sie dem Entwickler anzeigen, was hinter den Kulissen passiert und auf welche Bereiche im Code er sich konzentrieren sollte. Dies beendet Teil eins einer mehrteiligen Serie über JavaScript-Debugging-Tipps. Begleiten Sie uns beim nächsten Mal, wenn wir noch tiefer in den Network Tab mit einem Praxisbeispiel eintauchen. Viel Erfolg beim 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