// 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).
Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.
Uses Chrome DevTools MCP and documentation to troubleshoot connection and target issues. Trigger this skill when list_pages, new_page, or navigate_page fail, or when the server initialization fails.
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.
Diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to analyze heapsnapshots or run memory leak detection tools like memlab.
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.
| name | chrome-devtools |
| description | 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). |
Browser lifecycle: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: npx chrome-devtools-mcp@latest --help. To enable extensions, use --categoryExtensions.
Page selection: Tools operate on the currently selected page. Use list_pages to see available pages, then select_page to switch context.
Element interaction: Use take_snapshot to get page structure with element uids. Each element has a unique uid for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.
navigate_page or new_pagewait_for to ensure content is loaded if you know what you look for.take_snapshot to understand page structureuids from snapshot for click, fill, etc.filePath parameter for large outputs (screenshots, snapshots, traces)pageIdx, pageSize) and filtering (types) to minimize dataincludeSnapshot: false on input actions unless you need updated page statetake_snapshot (text-based, faster, better for automation)take_screenshot (when user needs to see visual state)evaluate_script for data not in accessibility treeYou can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.
install_extension with the path to the unpacked extension.list_extensions.trigger_extension_action to open the popup or side panel if applicable.evaluate_script with serviceWorkerId to check extension state or trigger background actions.take_snapshot to check if content scripts injected elements or modified the page correctly.If chrome-devtools-mcp is insufficient, guide users to use Chrome DevTools UI:
If there are errors launching chrome-devtools-mcp or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.