Verified:GitHub

mcp-chrome-devtools

Automates Chrome DevTools tasks for debugging pages, inspecting network requests, and capturing snapshots.

21|11|Updated Jul 4, 2025

Search Tags:#debugging #UI testing #chrome devtools #web automation #network analysis #performance profiling #console logs

Ready to run

npx skills add https://github.com/s-hiraoku/vscode-sidebar-terminal --skill mcp-chrome-devtools

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mcp-chrome-devtools
Source: https://github.com/s-hiraoku/vscode-sidebar-terminal/tree/main/.claude/skills/mcp-chrome-devtools
Command: npx skills add https://github.com/s-hiraoku/vscode-sidebar-terminal --skill mcp-chrome-devtools

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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'.

Frequently Asked Questions about mcp-chrome-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automate Chrome DevTools debugging and network analysis programmatically?▼

Chrome DevTools automation via MCP lets you programmatically list console messages, inspect network requests, and profile performance without manual browser interaction. You can retrieve debugging data, analyze network traffic, and capture snapshots through API calls to accelerate issue resolution.

Can I interact with web page elements and take screenshots through Chrome DevTools automation?▼

Yes, Chrome DevTools MCP supports element interaction—click, fill forms, hover, drag using accessibility UIDs from snapshots—and full-page screenshot capture. You can automate page interactions and document UI state for testing and debugging workflows.

What browser page management capabilities does Chrome DevTools automation provide?▼

Chrome DevTools MCP enables listing, selecting, creating, closing, and navigating browser pages programmatically. This lets you manage multiple pages, switch between them, and control navigation flow as part of automated testing and debugging tasks.

How does Chrome DevTools automation reduce manual debugging effort?▼

Automating Chrome DevTools eliminates repetitive manual tasks like checking console logs, reviewing network requests, and taking screenshots. Programmatic access speeds up issue identification and resolution by batching debugging operations into single automated workflows.

Can I use Chrome DevTools automation for UI testing and performance profiling?▼

Yes, Chrome DevTools MCP supports performance tracing, console inspection, and automated page interactions for UI testing. You can capture performance data and test page behavior without manual browser intervention, integrating DevTools capabilities into automated test suites.

What's the difference between console log inspection and network request analysis in Chrome DevTools automation?▼

Console log inspection retrieves application and browser messages for debugging logic errors; network request analysis captures HTTP traffic, headers, and responses for troubleshooting connectivity and API issues. Both are available through MCP for comprehensive browser diagnostics.