a11y-debugging
Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic…
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
Claude Code
$ npx -y skills add ChromeDevTools/chrome-devtools-mcp --skill cookie-debugging --agent claude-code
Codex
$ npx skills add ChromeDevTools/chrome-devtools-mcp --skill cookie-debugging -a codex -y
Cursor
$ npx skills add ChromeDevTools/chrome-devtools-mcp --skill cookie-debugging -a cursor -y
Gemini CLI
$ npx skills add ChromeDevTools/chrome-devtools-mcp --skill cookie-debugging -a gemini-cli -y
GitHub Copilot
$ npx skills add ChromeDevTools/chrome-devtools-mcp --skill cookie-debugging -a github-copilot -y
OpenCode
$ npx skills add ChromeDevTools/chrome-devtools-mcp --skill cookie-debugging -a opencode -y
Windsurf
$ npx skills add ChromeDevTools/chrome-devtools-mcp --skill cookie-debugging -a windsurf -y
name: cookie-debugging description: 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.
**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`.
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`)**.
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`. |
| 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 `HttpOnly` cookie via JavaScript (`cookieStore.delete` or `document.cookie = "...; max-age=0"`) will silently fail. To test in an unauthenticated or fresh state, always spawn a new isolated context using `new_page` with `isolatedContext`.
---
When an authenticated page request fails, returns 401/403, or redirects to login:
1. **List Recent Requests**: Call `list_network_requests` with `includePreservedRequests: true`. 2. **Find the Target Request**: Locate the failing request (401/403) or redirect (302/307). 3. **Inspect Outgoing `Cookie` Header**: Call `get_network_request` with the `reqid`.
4. **Trigger Active Inspection (If no recent request exists)**:
5. **Trace the Setting Request**: If the cookie is missing or rejected:
To verify that no non-essential or tracking cookies are set before consent or when declining:
1. **Start Clean**: Open a fresh isolated context with a dedicated name:
{"url": "<PAGE_URL>", "isolatedContext": "consent-test-1"}2. **Record Baseline Cookies**: Before interacting with the banner, run `evaluate_script` with `a
Chrome DevTools for agents (chrome-devtools-mcp) lets your coding agent (such as Antigravity, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It is available as a Model-Context-Protocol (MCP) server and as a CLI.
Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic…
Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via…
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages,…
Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user…
Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or…
Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages,…
Triage a Windows crash dump - identify the exception, the faulting frame, and what to look at next. Use when the user points at a…
Run and debug a local web app with a managed browser and a shared server/browser evidence timeline. Use when asked to develop,…