In den Chrome DevTools ist das Steuerfeld Netzwerk eines der am häufigsten verwendeten Tools. Es bietet wertvolle Einblicke in die Netzwerkaktivität einer Webseite.
In diesem Artikel werden einige dringend benötigte Verbesserungen am Bereich Netzwerk beschrieben, die Ioana Forfota und Silvia Eremia im Rahmen ihres STEP-Praktikums vorgenommen haben. Diese Verbesserungen wurden mit Spannung erwartet und wurden aus dem umfangreichen Backlog im Chromium-Problem-Tracker sorgfältig ausgewählt. Sie sollen den Bereich barrierefreier, intuitiver und informativer machen.
Mit diesen neuen Funktionen haben Webentwickler im Bereich Netzwerk folgende Möglichkeiten:
- Konzentrieren Sie sich nur auf relevante Netzwerkanfragen.
- HTTP-Statuscodes ohne externe Verweise verstehen
- Sie können Fehler bei Anfragen schnell erkennen und beheben.
- JSON-Untertypantworten
Lies weiter, um alle Details zu erfahren.
Anfragen von Chrome-Erweiterungen filtern
Chrome-Erweiterungen können eigene Netzwerkanfragen stellen, die neben den Anfragen der Seite im Bereich Netzwerk angezeigt werden. Wenn Sie keine Erweiterung entwickeln, sind diese Anfragen für Sie wahrscheinlich nicht relevant. Bisher war es nur mit dem Filter -scheme:chrome-extension oder im Inkognitomodus möglich, sie auszublenden.
Ab Chrome 117 ist das einfacher. Um den Bereich Netzwerk übersichtlicher zu gestalten, können Sie in den DevTools jetzt mit einer Kästchenauswahl Chrome-Erweiterungsanfragen ausschließen.
Es gibt Diskussionen über den Standardstatus dieser Funktion. Wir hatten ursprünglich überlegt, die Funktion standardmäßig zu aktivieren, da wir davon ausgingen, dass sie die Nutzung für die meisten Nutzer verbessern würde. Bei diesem Ansatz wissen einige Nutzer jedoch möglicherweise nicht, dass URLs von Chrome-Erweiterungen Anfragen auslösen können. Das könnte auch für Erweiterungsentwickler eine Herausforderung darstellen. Daher ist der Standardstatus auf „deaktiviert“ festgelegt.
Wenn diese Option aktiviert ist, ist die Anfrageliste übersichtlicher, weniger ablenkend und konzentriert sich auf die wichtigsten Anfragen. So können Sie die Fehlerbehebung viel einfacher durchführen.
Texte für den HTTP-Antwortstatus
Das Verständnis von HTTP-Statuscodes ist für eine effektive Fehlerbehebung unerlässlich. Es kann jedoch mühsam sein, ständig nach ihren Bedeutungen zu suchen. In den DevTools gibt es eine hilfreiche Verbesserung: Wenn Sie den Mauszeiger auf einen Statuscode in der Anfrageliste bewegen, wird sofort eine Kurzinfo mit dem Statustext angezeigt – ein beschreibender Titel, der die Bedeutung erläutert.
Der Statustext wird auch in der Kopfzeilenansicht direkt neben dem Code angezeigt. Bisher waren diese Funktionen nur für HTTP/1.1 verfügbar, jetzt werden sie auf HTTP/2 und HTTP/3 ausgeweitet. Diese scheinbar kleinen Anpassungen haben einen großen Einfluss. Sie sparen Zeit und können sich auf das Entfernen von Fehlern konzentrieren, anstatt nach der Bedeutung von Code zu suchen.
Verbesserte Fehlersichtbarkeit
Es ist jetzt einfacher, Fehler schnell zu erkennen und zu beheben, ohne sich durch das Steuerfeld wühlen zu müssen. Dazu haben wir nicht nur die Textfarbe von Fehlermeldungen geändert, sondern auch Symbole hinzugefügt, um die Aufmerksamkeit auf Fehler bei Anfragen zu lenken, z. B. solche mit dem Statuscode 404. Diese dezenten, aber hilfreichen Indikatoren machen Fehler auffälliger, damit Sie wichtige Probleme nicht übersehen.
JSON-Untertypen im Format „Pretty Print“ anzeigen
Bei der Webentwicklung werden häufig JSON-Antworten geprüft. Das Lesen von Rohdaten in unformatiertem JSON ist jedoch sehr unpraktisch. Die Verarbeitung solcher Antworten, insbesondere von Untertypen wie ld+json, hal+json oder sparql-results+json, kann frustrierend sein, z. B. wenn sie in einer einzigen Zeile angezeigt werden. In den DevTools wurde eine nutzerfreundlichere, minimierbare Darstellung für JSON-Untertypen eingeführt. Diese Antworten werden jetzt formatiert, sodass Entwickler nicht mehr auf externe Tools angewiesen sind. Dieses Redesign bietet eine einfache und gut lesbare Darstellung.
Positives Feedback von der Community
Auch wenn diese Funktionen erst in der Anfangsphase sind, erhalten wir von der Community überwiegend positives Feedback. Die erfolgreiche Implementierung hat viele Nutzer begeistert, da die Verbesserungen die Nutzerfreundlichkeit deutlich erhöht haben. Einige der Antworten finden Sie hier:
„Oh, das ist toll! ChromeDevTools haben sich gerade verbessert, indem jetzt lesbare HTTP-Statuscodes angezeigt werden. So lässt sich viel einfacher erkennen, was bei einer Netzwerkanfrage schiefgelaufen ist.“ – TribalIdeas on X
„In letzter Zeit war es sehr hilfreich. Besonders bei Formularen mit Werbeblockern und Grammatik-Erweiterungen.“ – MrAhmadAwais auf X
Bereit, diese neuen Funktionen zu entdecken? Rufen Sie die Chrome-Entwicklertools auf und überzeugen Sie sich selbst von den erweiterten Funktionen des Bereichs Netzwerk. Viel Erfolg bei der Fehlerbehebung!
Vorschaukanäle herunterladen
Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.
Chrome-Entwicklertools-Team kontaktieren
Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.
- Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
- Melden Sie ein DevTools-Problem über das Dreipunkt-Menü Weitere Optionen > Hilfe > DevTools-Problem melden.
- Tweeten Sie an @ChromeDevTools.
- Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.