---

name: chrome-devtools category: integration-connectivity/mcp-integrations version: 1.0.0 description: Complete guide to using Chrome DevTools MCP server for browser automation with Claude Code author: blackbox5/mcp verified: true tags: [mcp, chrome, browser, automation, debugging]

Chrome DevTools MCP Server Skills

Type: STDIO (local) Browser: Google Chrome Purpose: Browser automation and debugging

Prerequisites:

1. Google Chrome installed on your system
2. Chrome Path configured correctly:
   • macOS: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
   • Linux: /usr/bin/google-chrome
   • Windows: C:\Program Files\Google\Chrome\Application\chrome.exe
3. Allow Chrome to be controlled by automation

Protocol: Uses Chrome DevTools Protocol (Page, Runtime, Network, DOM, CSS, Console, Performance, Debugger)

Use specific selectors (ID > class > tag) for better reliability. Always wait for page loads before interacting with elements.

<available_skills> <skill_group name="Browser Control"> Navigate to a URL Navigate to https://example.com Target URL Reload the current page Refresh with cache cleared Clear cache before reloading (default: false) Navigate back in browser history Go back to previous page Navigate forward in browser history Go forward </skill_group>

<skill_group name="Page Interaction"> Click an element on the page Click element with ID 'submit-btn' CSS selector or XPath Wait for navigation after click (optional) Fill form input fields Fill #email with "test@example.com" Input element selector Value to enter Select an option from a dropdown Select 'United States' from country dropdown Select element Option value or text Hover over an element Hover over the navigation menu Element selector </skill_group>

<skill_group name="Page Inspection"> Get the HTML content of the page or element Get HTML for the main element Element selector (optional, defaults to entire page) Extract text content from elements Extract text from .product-list Element selector Get attribute value from an element Get the href attribute of all links Element selector Attribute name Get CSS styles for an element Show computed styles for .button Element selector Computed styles, pseudo-element styles, inherited styles </skill_group>

<skill_group name="JavaScript Execution"> Execute JavaScript in the page context Run document.querySelectorAll('.item') JavaScript code to execute Execution result, return value, errors (if any) Execute async JavaScript Run await fetch('/api/data') Async JavaScript code </skill_group>

<skill_group name="Screenshot & Visual"> Take a screenshot of the page or element Capture full page screenshot Element to screenshot (optional) Capture entire scrollable page (default: false) Save path (optional) Generate PDF of the current page Save as PDF Save path (optional) Landscape orientation (default: false) </skill_group>

<skill_group name="Network Monitoring"> Get network request logs Show all XHR requests Request URLs, status codes, response times, request/response headers Get details of a specific network request Get response headers for request ID Network request ID </skill_group>

<skill_group name="Console & Debugging"> Get browser console logs Show errors from console Console messages, errors, warnings, info logs Clear browser console Reset console logs </skill_group>

<skill_group name="Performance & Metrics"> Get page performance metrics Show page load time Page load time, DOMContentLoaded, First Contentful Paint, Largest Contentful Paint, CLS, TTI Get memory usage information Show browser memory stats </skill_group>

<skill_group name="Element Manipulation"> Set CSS style on an element Set background color to red on .button Element selector CSS property and value Add CSS class to element Add class 'active' to .nav-item Element selector Class to add Remove CSS class from element Remove class 'hidden' from #modal Element selector Class to remove </skill_group> </available_skills>

<best_practices> Use unique selectors (ID > class > tag) Wait for page load before interacting Check for element existence Handle dynamic content Clean up after tests Use specific selectors for reliability Check console for JavaScript errors Take screenshots for visual proof Use brittle selectors Assume instant page loads Ignore console errors Hardcode wait times Test in production without care Forget to close browser after testing </best_practices>

<error_handling> Chrome not launching Verify Chrome installation path Check Chrome version compatibility Ensure Chrome is not already running Element not found Verify selector is correct Wait for element to load Check if element is in iframe Use browser DevTools to test selector Click not working Check if element is clickable Verify element is visible Ensure element is not obscured Try JavaScript click instead Screenshot fails Check file path permissions Ensure directory exists Verify element is visible </error_handling>

<integration_notes> Lumelle Navigate to http://localhost:5173 Test navigation Fill contact form Submit and verify Open Lumelle in Chrome Inspect React components Get computed styles Check console for errors Take screenshot of homepage Compare with design Check responsive layouts Test dark mode </integration_notes>

<advanced_usage> Multiple Pages Open new tab Navigate to different URL Switch between tabs Close specific tab Cookie Management Get all cookies Set cookie value Delete cookies Storage Get localStorage item Set localStorage value Clear localStorage Manipulate session data Device Emulation Emulate mobile device Set viewport size Test responsive design </advanced_usage>