What does the Chrome DevTools MCP skill do?

It automates the installation and setup of the Chrome DevTools Model Context Protocol server, allowing Claude to connect to and control your Chrome browser for debugging.

Can I use this with other browser tools?

Yes, this skill is specifically designed to chain with other tools like Playwright MCP for a comprehensive browser automation and testing suite.

What are the prerequisites for this skill?

You need a running instance of Chrome with remote debugging enabled, and Node.js with npm installed on your system to run the npx command.

How do I enable remote debugging in Chrome?

You must start your Chrome browser with the flag --remote-debugging-port=9222 to allow the MCP server to establish a connection.

How do I activate the server after installation?

Once the skill has updated your .mcp.json file, you simply need to restart your Claude Code session to activate the Chrome DevTools integration.

Chrome DevTools MCP Installer

Name: Chrome DevTools MCP Installer
Author: theflysurfer

bytheflysurfer

浏览器自动化

Enables advanced browser debugging and inspection by integrating Chrome DevTools Protocol into the Claude Code environment.

关于

The Chrome DevTools MCP Installer skill automates the configuration of the Model Context Protocol (MCP) for Chrome, allowing Claude to interact directly with running browser instances. By configuring your environment to use the Chrome DevTools Protocol via npx, this skill empowers Claude to perform advanced web debugging, inspect live DOM elements, and analyze runtime behavior, effectively bridging the gap between AI-driven development and real-time browser feedback.

主要功能

Seamless integration with Chrome DevTools Protocol via npx
Smart merging with existing MCP server configurations
Automated .mcp.json configuration and management
0 GitHub stars
Real-time browser inspection and debugging capabilities
Optimized for advanced browser automation and troubleshooting

使用场景

Automating DOM inspection and performance analysis directly from Claude
Setting up a unified workflow for browser-based testing and debugging
Troubleshooting complex frontend issues by inspecting live browser states

关于

主要功能

Seamless integration with Chrome DevTools Protocol via npx
Smart merging with existing MCP server configurations
Automated .mcp.json configuration and management
0 GitHub stars
Real-time browser inspection and debugging capabilities
Optimized for advanced browser automation and troubleshooting

使用场景

Automating DOM inspection and performance analysis directly from Claude
Setting up a unified workflow for browser-based testing and debugging
Troubleshooting complex frontend issues by inspecting live browser states