So inspizieren und bearbeiten Sie Cookies in den Chrome DevTools

Apr 6, 2026 · 4 min read

So inspizieren und bearbeiten Sie Cookies in den Chrome DevTools

Wenn die Authentifizierung fehlschlägt, Sitzungen unerwartet ablaufen oder sich der clientseitige Status merkwürdig verhält, sind Cookies in der Regel die erste Anlaufstelle. Die Chrome DevTools bieten Ihnen einen direkten Einblick in jedes Cookie, das Ihre Seite setzt – und ermöglichen es Ihnen, diese zu ändern, ohne eine einzige Zeile Code zu schreiben.

Hier erfahren Sie genau, wie Sie das Cookies-Panel der Chrome DevTools nutzen, um Cookies während der Entwicklung zu inspizieren, hinzuzufügen, zu bearbeiten und zu löschen.

Wichtigste Erkenntnisse

Greifen Sie auf das Cookies-Panel über Application → Storage → Cookies in den Chrome DevTools zu, um alle Cookies für einen bestimmten Origin anzuzeigen.
Jede Cookie-Zeile zeigt wichtige Felder wie Domain, Path, SameSite, HttpOnly und Secure – das Verständnis dieser Felder ist für das Debugging von Authentifizierungs- und Sitzungsproblemen unerlässlich.
Sie können Cookies direkt im Application-Panel hinzufügen, bearbeiten und löschen, ohne Code zu schreiben.
Verwenden Sie den Cookies-Tab im Network-Panel, um zu überprüfen, welche Cookies tatsächlich in Anfragen gesendet und in Antworten auf HTTP-Ebene empfangen werden.
Drittanbieter-Cookies werden im Application-Panel mit Warnsymbolen angezeigt, was Ihnen hilft, Cross-Site-Cookie-Probleme zu identifizieren, während die Datenschutzbeschränkungen der Browser strenger werden.

Öffnen des Chrome DevTools Cookies-Panels

Öffnen Sie die Chrome DevTools mit F12 (Windows/Linux) oder Cmd + Option + I (Mac).
Klicken Sie auf den Tab Application.
Erweitern Sie in der linken Seitenleiste Storage → Cookies.
Wählen Sie einen Origin aus, um dessen Cookies anzuzeigen.

Sie sehen eine Tabelle, die jedes Cookie auflistet, das mit diesem Origin verknüpft ist.

Jede Zeile in der Cookies-Tabelle repräsentiert ein Cookie. Hier erfahren Sie, was jede Spalte bedeutet und warum sie beim Debuggen von Cookies in den Chrome DevTools wichtig ist:

Feld	Was es Ihnen sagt
Name	Der Schlüssel des Cookies
Value	Die gespeicherten Daten (aktivieren Sie Show URL-decoded, um prozentcodierte Werte zu dekodieren)
Domain	Welche Hosts dieses Cookie erhalten – `.example.com` umfasst Subdomains, während `sub.example.com` dies nicht tut
Path	Der URL-Pfad-Scope, der erforderlich ist, damit der Browser das Cookie sendet
Expires / Max-Age	Ablaufdatum oder Session für Cookies, die beim Beenden der Browser-Sitzung gelöscht werden
Size	Cookie-Größe in Bytes (automatisch berechnet, nicht editierbar)
HttpOnly	Falls aktiviert, kann JavaScript dieses Cookie nicht lesen – es ist nur über DevTools oder das Network-Panel sichtbar
Secure	Falls aktiviert, wird das Cookie nur über HTTPS übertragen
SameSite	`Strict`, `Lax` oder `None` – steuert das Cross-Site-Sendeverhalten
Partition Key	Vorhanden bei partitionierten Cookies (CHIPS) – zeigt die Top-Level-Site, die diese Cookie-Speicherpartition besitzt

Verwenden Sie das Filter-Feld, um nach Name oder Wert zu suchen, wenn eine Seite viele Cookies setzt. Partitionierte Cookies (CHIPS) sind Teil neuerer Browser-Datenschutzmodelle, und ihr Unterstützungsstatus kann unter https://webstatus.dev/features/partitioned-cookies verfolgt werden.

Cookies hinzufügen, bearbeiten und löschen

Cookie hinzufügen:

Doppelklicken Sie auf eine leere Zeile am Ende der Tabelle.
Geben Sie einen Namen und Wert ein und drücken Sie Enter.
DevTools füllt die Standardwerte für die anderen Felder automatisch aus.

Cookie bearbeiten:

Doppelklicken Sie auf ein beliebiges Feld, um es inline zu bearbeiten.
Das Size-Feld wird automatisch aktualisiert – alles andere ist editierbar.
DevTools hebt ungültige Werte rot hervor.
Verwenden Sie Only show cookies with an issue, um gültige Einträge auszufiltern und sich auf Probleme zu konzentrieren.

Cookies löschen:

Wählen Sie eine Cookie-Zeile aus und klicken Sie in der Aktionsleiste auf Delete selected.
Klicken Sie auf Clear all, um alle Cookies für den ausgewählten Origin zu löschen.

Dies ist besonders nützlich beim Testen von Login-Flows – Sie können manuell ein Sitzungs-Cookie ablaufen lassen oder einen Token-Wert ändern, um zu überprüfen, wie Ihre Anwendung mit Grenzfällen umgeht.

Das Application-Panel ist Ihr Arbeitsbereich zum Bearbeiten von Cookies. Das Network-Panel ist der Ort, an dem Sie überprüfen, was tatsächlich gesendet und empfangen wird.

Öffnen Sie das Network-Panel, klicken Sie auf eine beliebige Anfrage und wählen Sie dann den Tab Cookies. Sie sehen zwei Abschnitte:

Request Cookies – was der Browser an den Server gesendet hat.
Response Cookies – was der Server den Browser angewiesen hat, über Set-Cookie-Header zu setzen.

Diese Unterscheidung ist wichtig, weil JavaScript den Set-Cookie-Response-Header nicht direkt lesen kann. Wenn ein Cookie nach dem Login nicht erscheint, überprüfen Sie zuerst das Network-Panel, um zu bestätigen, dass der Server es tatsächlich setzt. Das Verhalten des Set-Cookie-Headers ist in der MDN Set-Cookie-Referenz dokumentiert.

Drittanbieter-Cookies identifizieren

Im Application-Panel erscheinen Drittanbieter-Cookies – solche, die von einer Domain gesetzt werden, die sich von der aktuellen Top-Level-Seite unterscheidet – mit einem Warnsymbol. Diese Cookies tragen typischerweise SameSite=None und erfordern das Secure-Attribut. Fahren Sie mit der Maus über das Symbol, um Details zu erhalten. In modernen Chrome DevTools können Cookie-Datenschutzwarnungen und zugehörige Diagnosen auch direkt in der Console erscheinen.

Da sich die Datenschutzrichtlinien der Browser weiterentwickeln, schränken Chrome und andere Browser zunehmend ein, wie sich Drittanbieter-Cookies verhalten. Es lohnt sich, das Testen des Cookie-Verhaltens Ihrer Website unter diesen Einschränkungen in Ihren regulären Debugging-Workflow zu integrieren.

Fazit

Das Cookies-Panel der Chrome DevTools bietet Ihnen alles, was Sie zum Inspizieren und Bearbeiten von Cookies benötigen, ohne den Browser zu verlassen. Verwenden Sie das Application-Panel zur Speicherinspektion und manuellen Bearbeitung. Verwenden Sie das Network-Panel, um zu überprüfen, welche Cookies tatsächlich auf HTTP-Ebene gesendet und empfangen werden. Zusammen decken diese beiden Panels den vollständigen Cookie-Debugging-Workflow für Authentifizierung, Sitzungen und clientseitiges State-Management ab.

Wenn Sie tiefergehendes Referenzmaterial darüber wünschen, wie Chrome Cookies und zugehörige Attribute in DevTools verfügbar macht, siehe den offiziellen Chrome DevTools Cookie-Debugging-Leitfaden.

Häufig gestellte Fragen (FAQs)

Der Server sendet möglicherweise den Set-Cookie-Header nicht korrekt, oder die Domain- oder Path-Attribute des Cookies stimmen möglicherweise nicht mit der aktuellen Seite überein. Öffnen Sie das Network-Panel, suchen Sie die Login-Anfrage und überprüfen Sie den Response Cookies-Tab, um zu bestätigen, dass der Header vorhanden und korrekt formatiert ist.

Ein Session-Cookie hat keinen Expires- oder Max-Age-Wert und zeigt Session in der Ablaufspalte an. Es wird gelöscht, wenn die Browser-Sitzung endet. Ein persistentes Cookie hat ein spezifisches Ablaufdatum und bleibt gespeichert, bis dieses Datum abläuft oder das Cookie manuell gelöscht wird.

Das Warnsymbol weist typischerweise auf ein Drittanbieter-Cookie oder ein Cookie mit einem fehlenden oder falsch konfigurierten SameSite-Attribut hin. Fahren Sie mit der Maus über das Symbol, um eine Zusammenfassung zu erhalten, und zusätzliche Diagnosen können in der DevTools Console erscheinen.

Nein. HttpOnly-Cookies sind für JavaScript konzeptbedingt nicht zugänglich, was sie vor Cross-Site-Scripting-Angriffen schützt. Sie können sie jedoch direkt im Chrome DevTools Application-Panel anzeigen und bearbeiten, indem Sie auf das entsprechende Feld doppelklicken.

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.