Zu den am häufigsten verwendeten Tools in den Chrome-Entwicklertools gehört der Bereich Netzwerk, der wertvolle Informationen zur Netzwerkaktivität einer Webseite bietet.
In diesem Artikel werden einige der von Ioana Forfota und Silvia Eremia im Rahmen ihres STEP-Praktikums sehr erhofften Verbesserungen am Panel Network beschrieben. Diese Verbesserungen wurden mit Spannung erwartet und wurden sorgfältig aus dem umfangreichen Backlog im Chromium Issue Tracker ausgewählt, um das Panel zugänglicher, intuitiver und informativer zu gestalten.
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
- Fehler bei Anfragen schnell erkennen und beheben
- Informationen zu Antworten vom JSON-Untertyp.
Lies weiter, um alle Details zu erfahren.
Anfragen für Chrome-Erweiterungen filtern
Chrome-Erweiterungen können eigene Netzwerkanfragen stellen, die im Steuerfeld Netzwerk neben den Anfragen der Seite angezeigt werden. Wenn Sie nicht aktiv eine Erweiterung entwickeln, sind diese Anfragen für Sie wahrscheinlich nicht relevant. Bisher konnten sie nur mit dem -scheme:chrome-extension-Filter oder mit der Fehlerbehebung im Inkognitomodus ausgeblendet werden.
Ab Chrome 117 ist das jetzt noch einfacher. Um den Bereich Netzwerk übersichtlicher zu gestalten, gibt es in den Entwicklertools jetzt ein Kästchen zum Ausschließen von Chrome-Erweiterungsanfragen.
Die Diskussionen über den Standardstatus dieser Funktion finden derzeit statt. Anfangs haben wir darüber nachgedacht, sie standardmäßig zu aktivieren, da wir die Nutzung für die Mehrheit der Nutzer verbessern wollten. Bei diesem Ansatz erkennen einige Nutzer jedoch möglicherweise nicht, dass URLs von Chrome-Erweiterungen Anfragen auslösen können. Das könnte Entwickler von Erweiterungen auch vor Herausforderungen stellen. Daher ist der Standardstatus auf „Deaktiviert“ gesetzt.
Wenn dieses Kontrollkästchen aktiviert ist, ist Ihre Anfrageliste übersichtlicher, weniger ablenkend und konzentrierter sich auf die wichtigsten Anfragen, sodass Sie eine viel angenehmere Debugging-Erfahrung haben!
HTTP-Antwortstatustexte
Für eine effektive Fehlerbehebung ist es wichtig, die HTTP-Statuscodes zu verstehen. Es kann jedoch mühsam sein, ständig nach ihrer Bedeutung zu suchen. Die Entwicklertools haben eine nützliche Verbesserung eingeführt: Wenn du den Mauszeiger auf einen Statuscode in der Anfrageliste bewegst, wird in einer Kurzinfo sofort der Statustext angezeigt – ein beschreibender Titel, der seine Bedeutung verdeutlicht.
Der Statustext ist auch in der Kopfzeilenansicht direkt neben dem Code sichtbar. Diese Funktionen waren bisher nur für HTTP/1.1 verfügbar, jetzt aber auch für HTTP/2 und HTTP/3. Diese scheinbar kleinen Anpassungen haben einen großen Einfluss. Sie sparen Zeit und können sich auf das Debugging konzentrieren, anstatt nach der Codebedeutung zu suchen.
Verbesserte Fehlersichtbarkeit
Es ist jetzt noch einfacher, Fehler schnell zu erkennen und zu beheben, ohne das Panel genauer untersuchen zu müssen. Um dies zu erreichen, haben wir nicht nur Fehlermeldungen durch Änderungen der Textfarbe hervorgehoben, sondern auch Symbole hinzugefügt, um die Aufmerksamkeit auf Anfragefehler zu lenken, z. B. solche mit dem Statuscode 404. Diese subtilen, aber hilfreichen Indikatoren machen Fehler deutlicher erkennbar, sodass Sie keine wichtigen Probleme übersehen.
Optimierter JSON-Untertypen
Bei der Webentwicklung werden häufig JSON-Antworten überprüft, aber das Lesen unformatierter unformatierter JSON-Dateien ist sehr umständlich. Es kann frustrierend sein, mit solchen Antworten umzugehen, insbesondere wenn Untertypen wie ld+json, hal+json oder sparql-results+json in einer Zeile angezeigt werden. Zur Vereinfachung haben die Entwicklertools eine nutzerfreundlichere, minimierbare Darstellung für JSON-Untertypen eingeführt. Jetzt sind diese Antworten formatiert, sodass Entwickler sich nicht mehr auf externe Tools verlassen müssen. Diese Neugestaltung bietet eine einfache und gut lesbare Darstellung.
Positives Feedback von der Community
Auch wenn sich diese Funktionen noch in der Anfangsphase befinden, ist die Reaktion der Community durchaus positiv. Die erfolgreiche Implementierung hat viele Nutzer über die Verbesserungen gefreut, was die Nutzererfahrung erheblich verbessert. Auf X können Sie einige der Antworten lesen:
„Oh, das ist super! ChromeDevTools hat einen neuen, für Menschen lesbaren HTTP-Statuscode angezeigt. So kann man leichter erkennen, was bei einer Netzwerkanfrage schiefgelaufen ist.“ – TribalIdeas auf X
„Das war in letzter Zeit sehr hilfreich. Das gilt besonders für Formulare mit Werbeblockern und Grammatikerweiterungen.“ – MrAhmadAwais auf X
Möchten Sie diese neuen Funktionen ausprobieren? In den Chrome-Entwicklertools können Sie den verbesserten Bereich Netzwerk selbst ausprobieren. Viel Spaß beim Debugging!
Vorschaukanäle herunterladen
Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.
Chrome-Entwicklertools-Team kontaktieren
Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.
- Sende uns über crbug.com Vorschläge oder Feedback.
- Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen
> Hilfe > Probleme mit den Entwicklertools melden. - Senden Sie einen Tweet an @ChromeDevTools.
- Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.