
cookie-debugging
Uses Chrome DevTools MCP for inspecting, debugging, and testing cookies, session state, authentication issues, and cookie consent compliance. Use when diagnosing 401/403 errors, authentication redirects, session expiration, Cookie/Set-Cookie header issues, cookie banner consent conformance, or third-party cookie/SameSite/Partitioned cookie warnings.
- Installs
- 886
- Last 24h
- +17
- Trending rank
- #6548
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill cookie-debugging- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads cookie-debugging automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Core Concepts
Page Targeting: Page-scoped tools (list_network_requests, get_network_request, list_console_messages, evaluate_script, navigate_page, take_snapshot, click, lighthouse_audit, close_page, etc.) require a pageId parameter. Retrieve available page IDs using list_pages or from new_page.
HttpOnly vs Client-Side Storage
Cookies marked HttpOnly cannot be accessed or modified by client-side JavaScript (cookieStore or document.cookie). However, the browser automatically attaches active HttpOnly cookies to outgoing HTTP request headers (Cookie).
- To inspect current
HttpOnlyvalues: Look at theCookierequest header of any outgoing HTTP request viaget_network_request. - To inspect how cookies were created or configured: Look at the
Set-Cookieresponse header of login/auth responses. - To inspect non-
HttpOnlycookies: Useevaluate_scriptwith the moderncookieStoreAPI (async () => await cookieStore.getAll()).
Session Strategy: Live Tab vs Isolated Context
Choose the right session environment to avoid state contamination (e.g., residual analytics or auth tokens):
| Strategy | When to Use | Setup / Teardown |
|---|---|---|
| Live Tab (Active Page) | Diagnosing an active user session, live 401/403 error, or current state. | Operates on the user's existing page; get its pageId from list_pages. |
Clean-Slate (isolatedContext) | Testing cookie consent banners, first-time visits, or zero-cookie guarantees. | Call new_page with a unique isolatedContext (e.g. "consent-audit-1"). When finished, call close_page. |
Client-Side Capabilities & Limitations
| Action | Client JavaScript (cookieStore / document.cookie) | DevTools Network & Context Tools |
|---|---|---|
| Read Non-HttpOnly | ✅ async () => await cookieStore.getAll() | ✅ get_network_request (Request Cookie) |
| Read HttpOnly | ❌ Blocked by browser security | ✅ get_network_request (Request Cookie) |
Inspect Attributes (Domain, Path, SameSite, Expires) | ✅ async () => await cookieStore.getAll() | ✅ get_network_request (Response Set-Cookie) |
| Modify / Delete Non-HttpOnly | ✅ async () => await cookieStore.set(...) | N/A |
| Modify / Delete HttpOnly | ❌ Silent failure in JavaScript | ✅ Use new_page(isolatedContext: ...) for clean state |
[!WARNING] Attempting to clear an
HttpOnlycookie via JavaScript (cookieStore.deleteordocument.cookie = "...; max-age=0") will silently fail. To test in an unauthenticated or fresh state, always spawn a new isolated context usingnew_pagewithisolatedContext.
Workflow Patterns
1. Diagnosing Authentication Failures & Redirects (401 / 403)
When an authenticated page request fails, returns 401/403, or redirects to login:
- List Recent Requests: Call
list_network_requestswithincludePreservedRequests: true. - Find the Target Request: Locate the failing request (401/403) or redirect (302/307).
- Inspect Outgoing
CookieHeader: Callget_network_requestwith thereqid.- Verify if the
Cookieheader was attached and whether required tokens (e.g.SESSION_ID,auth_token) were sent.
- Verify if the
- Trigger Active Inspection (If no recent request exists):
- If the cookie was set in a previous session and no network call is listed, trigger a request:
- Use
navigate_pagewithtype: "reload", OR - Call
evaluate_scriptwith() => fetch(window.location.href)
- Use
- Then call
get_network_requeston the new request to inspect the activeCookieheader.
- If the cookie was set in a previous session and no network call is listed, trigger a request:
- Trace the Setting Request: If the cookie is missing or rejected:
- Check earlier login/handshake responses for
Set-Cookiedirectives:- Path mismatch: e.g.,
Path=/apiwhen the request is to/. - Domain mismatch: e.g.,
Domain=api.example.compreventing cookies onsub.example.com. - Secure flag on HTTP:
Securecookies are never sent over unencryptedhttp://. - SameSite blocking:
SameSite=Strictcookies are omitted on cross-site navigations. - Expiration: Check if
ExpiresorMax-Ageelapsed.
- Path mismatch: e.g.,
- Check earlier login/handshake responses for
2. Cookie Banner & Consent Conformance Testing
To verify that no non-essential or tracking cookies are set before consent or when declining:
- Start Clean: Open a fresh isolated context with a dedicated name:
{"url": "<PAGE_URL>", "isolatedContext": "consent-test-1"} - Record Baseline Cookies: Before interacting with the banner, run
evaluate_scriptwithasync () => await cookieStore.getAll(). - Inspect Premature Network Requests & Issues:
- Call
list_network_requeststo ensure no third-party tracking beacons fired before consent. - Call
list_console_messageswithtypes: ["issue"]to check for tracking warnings.
- Call
- Interact with Consent Banner:
- Capture snapshot with
take_snapshotto locate the "Decline" or "Reject All" buttonuid. - Click the button with
click.
- Capture snapshot with
- Verify Cookie Difference:
- Run
evaluate_scriptwithasync () => await cookieStore.getAll()after clicking to assert that only strictly necessary or consent-state cookies exist.
- Run
- Test Consent Revocation (Lifecycle Audit):
- When auditing consent withdrawal or preference changes:
- Locate and click the "Cookie Settings", "Manage Preferences", or footer privacy trigger (
take_snapshot$\rightarrow$click). - Deselect non-essential categories or click "Revoke All" / "Save Preferences".
- Re-query
cookieStore.getAll()to verify previously accepted non-essential cookies were cleared or expired. - Call
list_network_requestson subsequent actions to ensure tracking beacons are no longer fired.
- Locate and click the "Cookie Settings", "Manage Preferences", or footer privacy trigger (
- When auditing consent withdrawal or preference changes:
- Teardown Context: Call
close_pagewhen the audit is complete to prevent leftover cookies from affecting subsequent tasks.
3. Auditing Cookie Security, SameSite & CHIPS (Partitioned Cookies)
- Fast-Track: Native DevTools Issues (Recommended):
- Call
list_console_messageswith:{ "pageId": 1, "types": ["issue"], "includePreservedMessages": true } - Check for
CookieIssueentries, such as:SameSiteNoneInsecure:SameSite=NonewithoutSecure.ThirdPartyCookiePhaseout: Third-party cookie blocked or restricted.SchemefulSameSite: Cross-scheme cookie issues.PartitionedCookies: Invalid CHIPS partitioning attributes.
- Call
- Deep Audit: Lighthouse Third-Party Cookies:
- Run
lighthouse_auditwithmode: "navigation"(omitoutputDirPathto use the default temporary files, or specify a directory within the workspace). - Extract the specific cookie audit from the returned
report.jsonpath without loading the full report into context:node -e "const r=require('<path/to/report.json>'); const a=r.audits['third-party-cookies']; console.log(JSON.stringify({score: a?.score, displayValue: a?.displayValue, items: a?.details?.items}))"
- Run
4. Client-Side Cookie Inspection & Manipulation
For client-accessible, non-HttpOnly cookies (e.g., UI preferences, non-sensitive feature flags):
- Read Cookies & Attributes:
- Use the modern asynchronous Cookie Store API:
async () => await cookieStore.getAll(); - Fallback for insecure HTTP origins:
() => document.cookie.
- Use the modern asynchronous Cookie Store API:
- Set / Modify Cookie:
- Set client cookie via
cookieStore:async () => await cookieStore.set({ name: 'theme', value: 'dark', expires: Date.now() + 86400000, sameSite: 'lax', });
- Set client cookie via
- Delete Cookie:
- Clear client cookie:
async () => await cookieStore.delete('theme');
- Clear client cookie:
Troubleshooting
cookieStoreis undefined:cookieStorerequires a Secure Context (https://,localhost, or127.0.0.1). On non-secure HTTP origins, use() => document.cookieor test over HTTPS.evaluate_scriptreturns empty / unresolved Promise:cookieStoremethods are asynchronous. Always wrap calls withasync () => await cookieStore.getAll().- Cookie not visible in JavaScript: The cookie is marked
HttpOnly. Trigger a network request and callget_network_requestto view it in theCookierequest header. - JavaScript deletion did not remove cookie: The cookie is
HttpOnlyor requires matchingPathandDomainparameters. Use a freshisolatedContextwithnew_pagefor a clean slate. - Cookie set in response but not sent in requests:
- Verify if page is
http://while cookie specifiesSecure. - Check if
Domainrestricts subdomains. - Check
list_console_messages(types: ["issue"])for browser rejection reasons.
- Verify if page is
- Residual cookies contaminating audits: Always use
new_pagewith a uniqueisolatedContextwhen running compliance tests, and callclose_pagewhen done.
FAQ
What does the cookie-debugging skill do?
Uses Chrome DevTools MCP for inspecting, debugging, and testing cookies, session state, authentication issues, and cookie consent compliance. Use when diagnosing 401/403 errors, authentication redirects, session expiration, Cookie/Set-Cookie header issues, cookie banner consent conformance, or third-party cookie/SameSite/Partitioned cookie warnings.
How do I install cookie-debugging?
Run npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill cookie-debugging in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/cookie-debugging/ (personal) or .claude/skills/cookie-debugging/ (project).
Which AI agents can use cookie-debugging?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is cookie-debugging safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains cookie-debugging?
It is published by chromedevtools in chromedevtools/chrome-devtools-mcp. It has 886 recorded installs.
More from chromedevtools/chrome-devtools-mcp
chrome-devtools
chromedevtools/chrome-devtools-mcp
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to --slim mode (MCP configuration).
chrome-devtools-cli
chromedevtools/chrome-devtools-mcp
Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.
a11y-debugging
chromedevtools/chrome-devtools-mcp
Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.
debug-optimize-lcp
chromedevtools/chrome-devtools-mcp
Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.
memory-leak-debugging
chromedevtools/chrome-devtools-mcp
Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to capture, compare, or inspect heap snapshots with Chrome DevTools MCP memory tools.
troubleshooting
chromedevtools/chrome-devtools-mcp
Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when listpages, newpage, or navigatepage fail, or when the server initialization fails.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.