HAR-Dateien — Der HTTP-Debug-Log, den Sie nicht wussten, dass Sie brauchen

Ihre API-Aufruf funktioniert im Produktionsumfeld nicht. Es funktioniert gut mit curl und lokal. Die Unterstützung öffnet ein Ticket und bittet Sie, „eine HAR-Datei zu teilen“. Sie nicken selbstsicher und suchen im anderen Tab „Was ist eine HAR-Datei“.

Dies ist der Tab. Hier ist, was eine HAR-Datei ist, was darin enthalten ist und wie man sie verwenden kann, um das Problem tatsächlich zu finden.

Was eine HAR-Datei ist

HAR steht für HTTP-Archiv. Es ist eine JSON-Datei, die jedes HTTP-Anfrage aufzeichnet, die Ihr Browser während einer Sitzung gemacht hat – URLs, Methoden, Statuscodes, Anfrage- und Antwortheaders, Anfrage- und Antwortkörper, Cookies und Timing-Aufteilungen. Alles, für jede Anfrage auf der Seite.

Das Format wurde von der Web-Performance-Working-Group (Spezifikationsversion 1.2) standardisiert und wird von Chrome, Firefox, Safari und Edge unterstützt. Denken Sie daran, es als strukturierte Export Ihrer Browser-Netzwerk-Option zu betrachten – das Art von Dingen, die Sie jemandem geben, der Ihr Problem debuggt, ohne ihm SSH-Zugriff auf Ihre Maschine zu geben.

HAR-Dateien sind besonders nützlich, wenn das Problem intermittierend ist, wenn es nur in einem bestimmten Browser auftaucht oder wenn Sie einem Lieferanten zeigen müssen, dass ihre API tatsächlich einen 500 zurückgibt und es kein PEBKAC ist.

Wie man eine HAR-Datei aufnimmt

Chrome und Edge

1. Öffnen Sie DevTools (F12 oder Cmd+Option+I auf Mac)
2. Gehen Sie zum Netzwerk Tab
3. Aktivieren Protokoll speichern wenn das Problem nach einem Redirect oder einer Seitenneuauflage auftritt
4. Das Problem wiederholen
5. Rechtsklick irgendwo in der Anfragenliste → Alle als HAR mit Inhalt speichern

Firefox

1. Öffnen Sie DevTools → Netzwerk Tab
2. Das Request wiederholen
3. Klicken Sie auf das Zahnradsymbol → Alle als HAR speichern

Safari

1. Aktivieren Sie das Entwicklungs-Menü: Safari → Einstellungen → Erweitert → Entwicklungs-Menü anzeigen
2. Entwickeln → Web-Inspector anzeigen → Netzwerk
3. Das Problem wiederholen
4. Klicken Sie auf das Ausführen Pfeil-Icon (im Netzwerk-Fenster)

Eines Wichtigen zu bemerken über Protokoll speichern: Ohne es wird die HAR nur Anfragen aufnehmen, die nach der aktuellen Seitenladung gemacht wurden. Wenn das Problem während der Authentifizierung oder in einer Redirect-Kette auftritt, werden Sie eine leere oder irreführende Datei aufnehmen und verbringen 20 Minuten in Verwirrung. Aktivieren Sie es, bevor Sie das Problem wiederholen.

Was in einer HAR-Datei enthalten ist

Jede HAR-Datei hat die gleiche oberste Struktur:

{
  "log": {
    "version": "1.2",
    "creator": { "name": "Chrome", "version": "124.0.6367.82" },
    "entries": [ ... ]
  }
}

Der entries Array ist der Ort, wo alle nützlichen Daten leben. Jede Eintrag ist ein vollständiges Anfrage-Antwort-Paar. Eine typische Seitenladung erzeugt 50–200 Einträge; eine komplexe SPA, die eine Dashboard-Übersicht lädt, kann das deutlich überschreiten.

Angemerkte Eintrag: Die wichtigen Felder

Hier ist eine Aufteilung der wichtigen Felder in einer einzelnen HAR-Eintrag:

Feld	Position	Was es Ihnen sagt
startedDateTime	Eintrag	Die Zeit, wann die Anfrage gestartet wurde, im ISO 8601 UTC. Korrelieren Sie dies mit Server-Logs, um die genaue Log-Zeile zu finden.
time	Eintrag	Die Gesamtzeit in Millisekunden von der Anfrage-Start bis zum Ende der Antwort. Die Zahl, die bei der Suche nach langsamen Anfragen sortiert wird.
serverIPAddress	Eintrag	Die IP-Adresse, die diese Anfrage tatsächlich verarbeitet hat. Kritisch hinter Lastverteilern – zeigt Ihnen, welche Instanz Sie getroffen haben.
request.method	Anfrage	GET, POST, PUT, DELETE usw.
request.url	Anfrage	Vollständige URL inklusive Abfragezeichenfolge. Achten Sie auf versehentlich doppelt codierte Parameter hier.
request.headers	Anfrage	Alle Anfrageheaders. Enthält Autorisierung – Authentifizierungstoken sind hier. Dies ist das Datenschutzproblem.
request.postData.text	Anfrage	Der roh-Anfragekörper. Bei JSON-APIs ist das Ihr Payload. Wenn die API Eingaben ablehnt, überprüfen Sie dies zuerst.
response.status	Antwort	HTTP-Statuscode. 0 bedeutet normalerweise, dass die Anfrage vor dem Abschluss blockiert wurde.
response.headers	Antwort	Antwortheaders, einschließlich Content-Type, Cache-Control, Set-Cookie. Nützlich für CORS-Debugging.
response.content.text	Antwort	Antwortkörper. Bei JSON-APIs ist das der rohe JSON-Text. Kann für binäre Antworten base64-codiert sein.
timings.blocked	Zeitangaben	Die Zeit, die für eine TCP-Verbindung benötigt wird. Hohe Werte deuten auf eine Auslastung des Verbindungspools hin.
timings.dns	Zeitangaben	DNS-Abfragezeit. Über 50ms lohnt ein Blick; über 200ms ist ein Problem.
timings.connect	Zeitangaben	TCP-Verbindungsdauer. Hohe Werte = Netzwerkverzögerung oder TLS-Überhead, nicht Server-Schwerpunkt.
timings.wait	Zeitangaben	Die Zeit von der Anfrage bis zum ersten Byte (TTFB). Hier zeigen sich langsame APIs. Hohe TTFB = Ihr Server antwortet langsam.
timings.receive	Zeitangaben	Die Zeit zum Herunterladen des Antwortkörpers. Nur hoch, wenn der Antwortinhalt groß ist.

Was Sie tatsächlich suchen sollten

Wenn Sie eine HAR öffnen, suchen Sie normalerweise nach einem der drei folgenden Dinge:

Die Anfrage, die fehlschlägt

Sortieren oder filtern nach response.status. In Chrome DevTools können Sie direkt mit status-code:4xx oder status-code:5xxfiltern. Sobald Sie die fehlende Anfrage gefunden haben, lesen Sie die vollständige response.content.text — die Fehlermeldung vom Server ist normalerweise nützlicher als der Statuscode.

Die Anfrage, die langsam ist

Sortieren der Einträge nach timings.wait (TTFB) absteigend. Hohe wait = Ihr Server ist langsam. Hohe timings.connect mit normal wait = der Engpass liegt im Netzwerk oder bei der TLS-Handshake, nicht in Ihrer Anwendung. Diese Hinweise führen zu völlig anderen Lösungen, weshalb es wichtig ist, die richtige Schicht zu identifizieren, um viel Zeit zu sparen, die falsche Schicht zu beschuldigen.

Die Anfrage, die fehlt

Manchmal ist das Problem eine fehlende Anfrage – eine Webhook, die nicht abgelegt wurde, ein preflight-OPTIONS, das durch CORS blockiert wurde, eine Analyse-Aufruf, der von einem Ad-Blocker verschluckt wurde. Vergleichen Sie, was in der HAR sein sollte, mit dem, was vorhanden ist. Die Abwesenheit einer Anfrage ist Daten.

Das Datenschutzproblem, das Sie kennen sollten

HAR-Dateien enthalten alles. Dazu gehören:

• Authorization Headers – Bearer-Tokens, Basic-Auth-Zugangsdaten
• Cookie Headers – Sitzungs-Tokens, JWTs, alles in einem Cookie
• Anfrage- und Antwortkörper – die können Passwörter, PII oder API-Schlüssel enthalten

Chrome entfernt bei der Exportierung nichts davon. Bevor Sie eine HAR-Datei mit Unterstützung, einem Lieferanten oder einem Kollegen außerhalb Ihres Unternehmens teilen, entfernen oder verdecken Sie die sensiblen Felder.

Die schnellste Methode, um eine HAR vor der Weitergabe zu inspizieren und zu bereinigen, ist die HAR-Datei-Formatter – fügen Sie Ihre Datei ein, durchsuchen Sie die Einträge und verdecken Sie sie, bevor Sie sie senden. Alternativ, wenn Sie sich mit jq:

# Strip Authorization headers from all entries
jq '.log.entries[].request.headers |= map(select(.name | ascii_downcase != "authorization"))' file.har

Nicht die schönste Einzeilige, aber es funktioniert.

Eine Roh-HAR-Datei lesen

HAR-Dateien sind JSON, daher technisch in jedem Texteditor lesbar. In der Praxis sind sie jedoch enorm – eine typische Seitenladung erzeugt eine Datei mit Hunderten von Kilobyten Headers und Körpern, alles auf tief verankerten Schlüsseln. Einige Wege, um sie zu navigieren:

• Importieren in DevTools – Chrome und Firefox unterstützen die Importierung von HAR-Dateien in das Netzwerk-Fenster über das Zahnradsymbol. Dies bietet Ihnen die gleiche Filter- und Sortier-Oberfläche wie eine Live-Aufnahme.
• HAR-Datei-Formatter – Browserbasiert, ohne Installation erforderlich. Gut, wenn Sie die Datei jemandem senden, der DevTools nicht verwendet.
• jq – Für Befehlszeilen-Filterung. jq '.log.entries[] | select(.response.status >= 400) | {url: .request.url, status: .response.status}' extrahiert alle fehlgeschlagenen Anfragen mit ihren URLs in Sekunden.

Für schnelle Analyse und Filterung, jq ist am schnellsten. Für die Weitergabe und visuelle Inspektion, die Browser-Import oder ein Online-Formatter bedeutet, dass der andere nicht wissen muss, was jq ist.

Das könnte Ihnen auch gefallen