mcp-chrome-devtools
CommunityAutomate Chrome DevTools for debugging and testing.
Software Engineering#debugging#UI testing#chrome devtools#web automation#network analysis#performance profiling#console logs
Authors-hiraoku
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill automates repetitive tasks within Chrome DevTools, such as debugging web pages, analyzing network requests, inspecting console messages, and performance profiling. It saves developers significant time by programmatically interacting with browser tools, reducing manual effort and speeding up issue resolution.
Core Features & Use Cases
- Page Management: List, select, create, close, and navigate browser pages.
- Element Interaction: Click, fill forms, hover, and drag elements using accessibility UIDs from snapshots.
- Debugging & Analysis: List console messages, inspect network requests, and perform performance traces.
- Use Case: Debug a web page by listing all console errors and network requests, then take a full-page screenshot to document the current state for further analysis.
Quick Start
Use the chrome-devtools skill to list all open browser pages, then select the first page and take a full-page screenshot, saving it to 'debug_screenshot.png'.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: mcp-chrome-devtools Download link: https://github.com/s-hiraoku/vscode-sidebar-terminal/archive/main.zip#mcp-chrome-devtools Please download this .zip file, extract it, and install it in the .claude/skills/ directory.