So kopieren Sie API-Anfragen aus dem Network-Tab

Apr 29, 2026 · 4 min read

So kopieren Sie API-Anfragen aus dem Network-Tab

Wenn Sie API-Anfragen im Browser debuggen und auf einen 400- oder 500-Fehler stoßen, ist der schnellste Weg zur Untersuchung, diese Anfrage direkt aus dem Network-Tab zu kopieren und in einem dedizierten API-Client erneut abzuspielen. Kein Proxy-Setup erforderlich. So gehen Sie in Chrome, Edge und Firefox effizient vor.

Wichtigste Erkenntnisse

Verwenden Sie Copy as cURL für Terminal-Tests, den Import in API-Clients wie Postman oder Insomnia und zum Teilen reproduzierbarer Anfragen mit Teammitgliedern.
Verwenden Sie Copy as fetch, wenn Sie Anfragen direkt in einem JavaScript-Kontext abspielen oder als Vorlage nutzen möchten, z. B. in der Browser-Konsole oder einem Node.js-Skript.
Filtern Sie nach Fetch/XHR und aktivieren Sie Preserve log, bevor Sie Anfragen erfassen, um zu vermeiden, dass Einträge während der Navigation verloren gehen.
Bereinigen Sie kopierte Anfragen immer, bevor Sie sie teilen — sie enthalten oft Auth-Tokens, Session-Cookies und API-Keys.

Der Standard-Workflow

Öffnen Sie die DevTools (F12 oder Cmd+Option+I auf dem Mac), navigieren Sie zum Network-Tab und lösen Sie die Aktion aus, die die Anfrage auslöst. Sobald die Anfrage in der Liste erscheint, klicken Sie mit der rechten Maustaste darauf, um auf die Kopieroptionen zuzugreifen.

Bevor Sie kopieren, lohnt es sich, zwei Einstellungen zu überprüfen:

Nach Fetch/XHR filtern — Klicken Sie auf die Schaltfläche „Fetch/XHR”, um statische Assets auszublenden und sich nur auf API-Aufrufe zu konzentrieren. Dies erleichtert das Auffinden der richtigen Anfrage erheblich.
Preserve log — Aktivieren Sie diese Option, wenn die Anfrage während einer Seitennavigation oder Weiterleitung erfolgt. Ohne diese Einstellung wird der Network-Tab bei der Navigation geleert und Sie verlieren den Eintrag.

Um einen bestimmten Endpunkt schnell zu finden, verwenden Sie das Search-Panel (Strg+F / Cmd+F im Network-Tab) und suchen Sie nach URL-Fragment oder Endpunkt-Name.

Copy as cURL vs. Copy as Fetch

Ein Rechtsklick auf eine Anfrage bietet Ihnen mehrere Kopieroptionen. Die beiden nützlichsten sind Copy as cURL und Copy as fetch.

Copy as cURL

Dies ist die am weitesten verbreitete Option in Chrome, Edge und Firefox. Sie erzeugt einen Shell-Befehl, den Sie direkt in ein Terminal einfügen oder in Tools wie Postman oder Insomnia importieren können.

curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer eyJhbGci...' \
  -H 'Content-Type: application/json' \
  --data-raw '{"page":1}'

Am besten geeignet für: Terminal-Tests, Weitergabe an Backend-Teammitglieder, Import in API-Clients oder Einreichen von Fehlerberichten mit einer reproduzierbaren Anfrage.

Copy as Fetch

Dies gibt einen JavaScript-fetch()-Aufruf aus, den Sie direkt in die Browser-Konsole oder ein Node.js-Skript einfügen können.

fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Authorization": "Bearer eyJhbGci...",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ page: 1 })
});

Am besten geeignet für: Schnelle Konsolen-Tests, Reproduktion von Problemen in JavaScript-Umgebungen oder Erstellung von Fetch-Aufrufen als Vorlage in Ihrer Codebasis.

Chrome und Edge bieten auch Copy as Node.js fetch und Copy as PowerShell für umgebungsspezifische Workflows an.

Wenn kopierte Anfragen nicht erfolgreich abgespielt werden können

Das Kopieren einer Anfrage erfasst ihren Zustand zu genau diesem Moment, einschließlich Session-Cookies, Auth-Tokens und CSRF-Headern. Das erneute Abspielen kann aus mehreren Gründen fehlschlagen:

Abgelaufene Tokens oder Sessions — JWTs und Session-Cookies haben TTLs (Time-to-Live). Eine vor einer Stunde kopierte Anfrage kann einen 401-Fehler zurückgeben.
Cookie-gebundene Authentifizierung — Einige Auth-Flows basieren auf HttpOnly-Cookies, die in der kopierten Ausgabe nicht vollständig sichtbar sind.
Anfrage-Sequenzierung — Einige APIs erfordern eine vorherige Anfrage (z. B. das Abrufen eines CSRF-Tokens), bevor der Zielaufruf erfolgreich sein kann.

Wenn eine wiedergegebene Anfrage unerwartet fehlschlägt, überprüfen Sie zuerst die Auth-Header.

Exportieren mehrerer Anfragen: HAR-Dateien

Um mehrere Anfragen gleichzeitig zu erfassen und zu exportieren, verwenden Sie die HAR-Exportoption im Network-Tab. In aktuellen Chrome- und Edge-Versionen werden HAR-Exporte standardmäßig bereinigt und schließen möglicherweise sensible Header wie Cookies und Autorisierungsdaten aus, es sei denn, Sie aktivieren explizit den Export mit sensiblen Daten. Die resultierende .har-Datei (JSON-Format) kann in Tools wie Postman oder Insomnia importiert oder mit Tools wie jq verarbeitet werden, um URLs und Payloads in großen Mengen zu extrahieren.

Ein Hinweis zur Sicherheit

Kopierte Anfragen enthalten oft sensible Daten: Auth-Tokens, Session-Cookies, API-Keys und Request-Bodies. Bevor Sie einen cURL-Befehl oder eine HAR-Datei mit einem Kollegen oder in einem Fehlerbericht teilen, bereinigen Sie diese — ersetzen Sie echte Tokens durch Platzhalter wie <TOKEN> und entfernen Sie alle persönlichen Daten aus der Payload.

Fazit

Das Kopieren von API-Anfragen aus dem Network-Tab ist eine der praktischsten Debugging-Maßnahmen im Werkzeugkasten eines Frontend-Entwicklers. Verwenden Sie Copy as cURL, wenn Sie Portabilität und Tool-Kompatibilität benötigen. Verwenden Sie Copy as fetch, wenn Sie in einem JavaScript-Kontext bleiben. In jedem Fall sind Sie nur Sekunden von einer reproduzierbaren, überprüfbaren Anfrage entfernt.

FAQs

Ja, aber nur, wenn Sie Preserve log aktiviert haben, bevor die Navigation stattfand. Ohne diese Einstellung löscht der Network-Tab alle Einträge bei jedem Seitenladevorgang oder jeder Weiterleitung. Machen Sie es sich zur Gewohnheit, Preserve log zu aktivieren, bevor Sie Probleme reproduzieren, die Weiterleitungen oder vollständige Seitennavigationen beinhalten.

Die wahrscheinlichste Ursache ist ein abgelaufenes Authentifizierungs-Token oder Session-Cookie. Kopierte Anfragen erfassen Anmeldedaten so, wie sie zu diesem Zeitpunkt existierten. Wenn das JWT oder die Session seitdem abgelaufen ist, wird der Server die Anfrage ablehnen. Kopieren und spielen Sie die Anfrage zeitnah ab oder aktualisieren Sie Ihr Token, bevor Sie es erneut versuchen.

Copy as cURL generiert einen Shell-Befehl, der für Terminals und API-Clients wie Postman oder Insomnia geeignet ist. Copy as fetch erzeugt einen JavaScript-Fetch-Aufruf, den Sie in der Browser-Konsole oder einem Node.js-Skript ausführen können. Wählen Sie cURL für Portabilität über Tools und Teams hinweg und fetch für JavaScript-basiertes Debugging.

HAR-Dateien erfassen vollständige Request- und Response-Daten, einschließlich Auth-Tokens, Cookies und Request-Bodies. Sie können sensible Informationen preisgeben, wenn sie ohne Überprüfung geteilt werden. Überprüfen Sie immer den Dateiinhalt und schwärzen Sie Anmeldedaten, API-Keys und persönliche Daten, bevor Sie eine HAR-Datei an einen Bericht oder eine Nachricht anhängen.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.