skills.rest
s-hiraoku
s-hiraokuCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/s-hiraoku/vscode-sidebar-terminal --skill mcp-chrome-devtools
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
KuassKuass
1

chrome-devtools

Control and inspect live Chrome instances via the Chrome DevTools Protocol.

Community
Intermediate
rodrigotoledorodrigotoledo

chrome-devtools

Automate browser debugging and performance profiling using Chrome DevTools MCP commands.

Community
Intermediate
YanBerdinYanBerdin
2

chrome-devtools

Automate Chrome browser navigation, interaction, and performance profiling via DevTools MCP.

Community
Advanced
githubgithub
37.6k

chrome-devtools

Automate browser control and debugging via the Chrome DevTools MCP.

Official
Advanced