Wie Sie den Netzwerk-Tab öffnen und was XHR wirklich bedeutet

Jemand hat Ihnen gesagt, “öffnen Sie den Netzwerk-Tab und schauen Sie, ob irgendwelche Anfragen fehlschlagen”, und jetzt starren Sie auf ein Panel voller Reihen, Farben und Spalten, die noch nichts bedeuten. Dies ist der kürzeste Weg von dort zur gesuchten Antwort.

Der Netzwerk-Tab zeichnet alle Anfragen auf, die die Seite stellt: jedes Bild, jedes Script und jeden Aufruf, den Ihr Browser an einen Server sendet, um Daten zu holen. Wenn eine Seite auf eine Weise kaputt ist, die Sie nicht sehen können – einen Button, der nichts tut, eine Liste, die nicht lädt, einen Save, der stillschweigend fehlschlägt – ist der Grund sehr oft eine dieser Anfragen, und hier ist sie dokumentiert.

Öffnen Sie es

Chrome, Edge, Brave und die anderen Chromium-Browser. Drücken Sie F12, oder auf einem Mac Cmd + Option + I. Die Entwicklertools öffnen sich; klicken Sie auf den Netzwerk-Tab oben. Falls Sie ihn nicht sehen, ist er hinter dem Pfeil » versteckt.

Firefox. Gleiches F12, dann der Netzwerk-Tab.

Safari. Der Netzwerk-Tab ist hinter einem Menü versteckt, das standardmäßig ausgeschaltet ist. Öffnen Sie Einstellungen, gehen Sie zu Erweitert und aktivieren Sie Funktionen für Webentwickler anzeigen. Dann Entwicklung, Web-Inspektor anzeigen, und der Netzwerk-Tab ist dort.

Das Panel ist fast immer leer, wenn es sich öffnet, und das ist das erste, das Leute verwirrt.

Warum es leer ist und wie Sie es füllen

Der Netzwerk-Tab zeichnet nur auf, wenn er offen ist. Er erinnert sich nicht an das, was davor passiert ist, so dass die Anfragen, die beim ersten Laden der Seite ausgeführt wurden, bereits weg sind.

Also: Mit dem Tab offen laden Sie die Seite neu. Alles, was die Seite abruft, scrollt als Liste von Reihen herein. Wenn das Problem beim Klicken auf etwas passiert statt beim Laden, müssen Sie nicht mal neu laden – machen Sie es einfach, und beobachten Sie, wie die Reihen erscheinen, während Sie es tun.

Eine Einstellung lohnt sich vorher einzuschalten: Protokoll beibehalten (Firefox nennt es genauso). Ohne sie löscht eine Seite, die umleitet oder neu lädt, die Liste, und die gesuchte Anfrage verschwindet mit ihr. Mit aktiviertem Häkchen bleibt die Liste erhalten, und Sie können die Anfrage sehen, die gerade vor der Seitenänderung passiert ist.

Eine Reihe lesen

Jede Reihe ist eine Anfrage. Von links nach rechts sind dies die wichtigen Spalten:

• Name - die Datei oder der Endpunkt, der angefordert wurde
• Status - der HTTP-Code, der zurückgekommen ist. Dies ist derjenige, zu dem Sie geschickt wurden
• Typ - was für eine Art von Ding es war: ein Dokument, ein Script, ein Bild, oder fetch/xhr für einen Datenaufruf
• Zeit - wie lange es gedauert hat

Die Farben sind eine Abkürzung. Eine rote Reihe ist eine Anfrage, die fehlgeschlagen ist. Wenn jemand sagte “schauen Sie, ob irgendetwas fehlschlägt”, suchen Sie rot oder einen Status von 400 oder höher.

Klicken Sie auf irgendeine Reihe und ein Panel öffnet sich mit dem Detail: Header für das, was gesendet und empfangen wurde, Response oder Preview für das, was zurückgekommen ist, und Timing für das, wo die Zeit ging. Bei einer fehlgeschlagenen Anfrage ist Response normalerweise der Ort, an dem die Erklärung des Servers steht.

Was XHR bedeutet, weil es der Filter ist, den man Ihnen sagen wird zu benutzen

Oben im Panel ist eine Reihe von Filtern: All, Fetch/XHR, Doc, CSS, JS, Img. “Öffnen Sie den Netzwerk-Tab und filtern Sie auf XHR” ist eine häufige Anweisung, und XHR ist das am wenigsten offensichtliche Wort darin.

XHR steht für XMLHttpRequest. In der Praxis bedeutet es eine Anfrage, die Ihre Seite im Hintergrund gestellt hat, um Daten zu holen, ohne eine neue Seite zu laden – die moderne Art des Webs, einen Teil eines Bildschirms zu aktualisieren, ohne ein vollständiges Neuladen. Wenn Sie in ein Suchfeld tippen und Ergebnisse erscheinen darunter, das ist ein XHR. Wenn ein “Mehr laden”-Button Elemente hinzufügt, ohne dass die Seite blinkt, das ist ein XHR.

Der Name ist ein historischer Zufall – das ursprüngliche Browser-Feature wurde für XML gebaut, das heute fast niemand mehr sendet; heute tragen diese JSON. Sein neuerer Ersatz ist die fetch()-Funktion, weshalb der Filter Fetch/XHR heißt: zwei Namen, beide bedeuten das Gleiche, ein Datenabruf statt einer Seite, eines Bildes oder einer Stylesheet.

Das Klicken auf Fetch/XHR verbirgt die Bilder, Scripts und Schriftarten und lässt nur die Datenaufrufe übrig, was fast immer der Ort ist, an dem der Fehler eines kaputten Features liegt. Ein Button, der nichts tut, hat normalerweise doch eine Anfrage gesendet; sie ist genau dort, rot, mit dem Grund in ihrer Response.

Es in etwas verwandeln, das Sie senden können

Den Netzwerk-Tab selbst zu lesen ist eine Sache. Der schwierigere Teil ist es, das, was Sie sahen, zur Person zu bringen, die es reparieren kann, weil ein Screenshot des Panels das Detail verliert – die Header, den Response-Body, die Reihenfolge – die den Fehler tatsächlich erklären.

Der Tab kann die ganze Sitzung als HAR-Datei exportieren: klicken Sie mit der rechten Maustaste auf irgendeine Reihe und wählen Sie Alle als HAR mit Inhalt speichern. Das ist das Netzwerk-Log als eine Datei, die jemand in seinem eigenen Netzwerk-Tab, oder im HAR-Viewer, öffnen kann, genau wie wenn er es aufgezeichnet hätte. Lesen Sie diese Anleitung, bevor Sie eine senden – eine HAR enthält normalerweise Ihre Session-Cookies, und sie sollte wie ein Passwort behandelt werden.

Wenn die fehlgeschlagene Anfrage eine ist, die “TypeError: Failed to fetch” in der Konsole zurückgibt ohne etwas Nützliches im Netzwerk-Tab, hat dieser spezifische Fall eine eigene Erklärung – sie bedeutet normalerweise, dass die Anfrage nie weit genug gekommen ist, um überhaupt einen Status zu haben.

Das Netzwerk-Log, das es erfasst, ist die gleiche Liste von Anfragen, die Sie im Tab gelesen hätten, bereits gespeichert und angehängt, so dass die Person, die den Report aufnimmt, Sie nicht durch das Öffnen durchleiten muss. Für alles, das darum herum geht – was Sie erwartet haben und was stattdessen passiert ist – hat der Bug-Report-Leitfaden die Vorlage.