Skip to content
AI-SKILLS

Chrome DevTools Agent

👤 Github
•
📅 January 27, 2026
•
⭐ 19.5K
View on GitHub →

Introduction

The Chrome DevTools Agent is a powerful skill designed to bridge the gap between Claude and a live web browser. By leveraging the chrome-devtools Model Context Protocol (MCP) server, this skill empowers developers to perform expert-level browser automation, debugging, and performance analysis without leaving their terminal or chat interface.

Whether you are a QA engineer automating UI tests or a frontend developer troubleshooting a memory leak, this skill provides the necessary tools to:

  • Automate Complex Workflows: Navigate pages, fill forms, and handle browser dialogs programmatically.

  • Perform Visual Audits: Capture full-page or element-specific screenshots and text snapshots for accessibility analysis.

  • Debug in Real-Time: Inspect console logs, evaluate custom JavaScript, and monitor network requests for failed resources.

  • Optimize Performance: Record performance traces to identify Core Web Vital issues and layout shifts.

Installation

To use this skill, you must configure the chrome-devtools MCP server within your Claude Code or Claude Desktop environment.

  1. Ensure you have Node.js installed on your system.
  2. Add the following configuration to your Claude configuration file (e.g., claude_desktop_config.json):
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-chrome-devtools"]
    }
  }
}
  1. Restart your Claude environment to enable the new capabilities.

Usage

Once installed, you can trigger the Chrome DevTools Agent by asking Claude to perform browser-based tasks. The skill uses a snapshot-first approach to identify elements reliably using unique IDs (uid).

Common Workflow Patterns

1. Element Interaction To interact with a page, first ask Claude to take a snapshot to identify the correct element IDs.

  • Prompt: “Open https://github.com/login, take a snapshot, and find the login field.”
  • Action: Claude will use take_snapshot to find the uid and then use fill(uid=...) to enter credentials.

2. Troubleshooting Network & Logic Errors When a web application behaves unexpectedly, use the debugging tools to find the root cause.

  • Prompt: “Check why the checkout button on this page isn’t working. Look at the console logs and network requests.”
  • Action: Claude will execute list_console_messages and list_network_requests to find 4xx/5xx errors or JS exceptions.

3. Performance Profiling Analyze page load speeds and runtime performance.

  • Prompt: “Start a performance trace for my local dev site, reload the page, and tell me why the Largest Contentful Paint is slow.”
  • Action: Claude will run performance_start_trace, analyze the data with performance_analyze_insight, and provide a detailed report.

Best Practices

  • Manage Context: If you have multiple tabs open, use list_pages and select_page to ensure you are interacting with the correct environment.

  • Fresh Snapshots: Web pages are dynamic. Always take a new take_snapshot after a navigation or a state change, as uid values are regenerated when the DOM updates.

  • Efficient Debugging: Use evaluate_script to check the state of global variables or React/Vue components in the page context for faster troubleshooting.

  • Emulation: Use the emulate tool to test how your site responds to mobile viewports or slow 3G network conditions.