How to Inspect, Edit, and Delete Cookies in Google Chrome DevTools

When developing modern web applications or debugging authentication workflows, inspecting how web servers store and transmit HTTP cookies is a daily requirement. Whether you need to verify session expiration timestamps, evaluate SameSite attributes, test cross-origin privacy restrictions, or manually simulate different user states by altering token values, Google Chrome includes comprehensive cookie inspection tools. In Google Chrome DevTools, you can inspect, edit, create, and delete cookies directly in real time.

Why Inspect Cookies in Chrome DevTools?

Managing cookies through Chrome DevTools offers crucial debugging advantages:

• Session Verification: Check whether authentication cookies, JSON Web Tokens (JWTs), and session IDs are being written correctly upon login.
• Security Flag Auditing: Ensure essential security attributes—such as HttpOnly, Secure, and SameSite—are properly configured to prevent cross-site scripting (XSS) and cross-site request forgery (CSRF) vulnerabilities.
• Local Value Manipulation: Modify cookie values on the fly to test how front-end code and server API calls respond without restarting the server.
• Selective Purging: Clear individual tracking or session cookies without wiping your entire browser history or logging out of unrelated sites.

How to Open the Cookies Table in Chrome DevTools

To access the cookie management interface for any loaded webpage:

1. Navigate to the target website in Google Chrome.
2. Open DevTools by pressing F12 (or Ctrl + Shift + I on Windows/Linux, Cmd + Option + I on Mac). You can also right-click anywhere on the page and select Inspect.
3. In the top panel navigation bar, select the Application tab. (If it is hidden behind overflow chevrons, click >> and choose Application).
4. In the left sidebar, locate the Storage tree and expand the Cookies category.
5. Click on the domain origin for the active site (e.g., https://example.com).

The main pane displays a structured, tabular breakdown of all cookies currently stored for that origin.

Understanding the Cookie Table Columns

Chrome DevTools provides detailed technical metadata for each cookie entry:

• Name: The unique key identifying the cookie.
• Value: The stored string payload, token, or serialized data.
• Domain: The host domain authorized to read the cookie.
• Path: The specific URL path within the domain to which the cookie applies (typically /).
• Expires / Max-Age: The exact date and timestamp when the cookie expires, or Session if it clears upon browser closure.
• Size: Total size in bytes of the cookie name and value combined.
• HttpOnly: A checkmark indicates that the cookie cannot be accessed via client-side JavaScript (e.g., document.cookie), protecting it against XSS theft.
• Secure: A checkmark indicates the cookie is only transmitted over encrypted HTTPS connections.
• SameSite: Displays Strict, Lax, or None to govern cross-site request behaviour.
• Partition Key: Shows storage partitioning details for Cookies Having Independent Partitioned State (CHIPS).

How to Edit or Add a Cookie Value

You can directly manipulate existing cookies or inject test cookies into your active session:

1. Edit a Cookie: Double-click any cell in the Name, Value, Domain, or Path columns. Type your new value and press Enter. DevTools immediately updates the local cookie store.
2. Add a New Cookie: Double-click the empty row at the bottom of the cookie table. Enter a Name and a Value, then hit Enter. Default domain and path parameters are assigned automatically.

How to Delete Cookies in Chrome DevTools

When testing cold logins or simulating expired sessions, you can remove cookies individually or en masse:

• Delete a Single Cookie: Click on the specific cookie row to select it, then press the Delete key on your keyboard, or click the Delete Selected (X) button on the top toolbar.
• Delete All Cookies for an Origin: Click the Clear All Cookies icon (represented by a circle with a diagonal slash) located at the top of the table.
• Filter and Delete: Use the Filter box at the top to isolate specific tracking parameters (such as _ga or session), then remove only the filtered subset.

Exporting and Refreshing Cookie Data

If web requests update cookies dynamically in the background, click the Refresh button on the DevTools cookie toolbar to pull the latest state without refreshing the entire webpage. This ensures you always inspect the authoritative, live cookie state during complex asynchronous API interactions.