skills.rest
wssAchilles
wssAchillesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

chrome-devtools

Automate browser debugging and network inspection via Chrome DevTools MCP.

2|Updated Aug 2, 2025
Search Tags:#automation#debugging#MCP#chrome-devtools#browser-automation#performance-analysis#web-inspection
One-click install
npx skills add https://github.com/wssAchilles/Mycode --skill chrome-devtools-wssachilles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/wssAchilles/Mycode/tree/main/telegram/.agents/skills/chrome-devtools
Command: npx skills add https://github.com/wssAchilles/Mycode --skill chrome-devtools-wssachilles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables debugging, troubleshooting, and browser automation by interfacing with Chrome DevTools through MCP.

Core Features & Use Cases

  • Chrome DevTools Protocol access via MCP for efficient debugging, performance profiling, and automated browser interactions.
  • Page-level control: navigate, inspect network activity, capture DOM snapshots, and automate repetitive tasks across multiple pages.
  • Use Case: When diagnosing a flaky web app, you can reproduce issues, gather network traces, and run scripted interactions without manual browser operations.

Quick Start

  • Install and run: npx chrome-devtools-mcp@latest --help
  • Discover pages: list_pages
  • Switch context: select_page <page_id>
  • Interact: navigate_page <url> or click <uid> or fill <selector> with <value> and take_snapshot

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I automate browser debugging and capture network activity for a web page?▼

Browser automation debugging captures network activity by interfacing with Chrome DevTools via MCP, allowing you to navigate pages, inspect network requests, and capture DOM snapshots without manual operations.

What is the best way to profile web performance and reproduce flaky web app issues?▼

Profiling web performance and reproducing flaky issues is done by automating scripted browser interactions through Chrome DevTools, capturing network traces, and running performance analysis across sessions.

Do I need Node.js to run Chrome DevTools automation via MCP?▼

Yes, Chrome DevTools automation via MCP requires Node.js and the chrome-devtools-mcp package, which you can install and execute using npx to access configurable CLI options.

Can I inspect and interact with multiple browser tabs during a debugging session?▼

Yes, you can inspect and interact with multiple browser tabs by listing active pages, switching context to a specific page ID, and performing interactions like clicking, filling forms, or taking snapshots.

How do I navigate and take DOM snapshots during automated browser inspection?▼

To navigate and take DOM snapshots during browser inspection, you select a target page, use the navigate command with a URL, and execute a snapshot command to capture the current DOM state.

Related Skills

Explore More Software Engineering Skills→
rhpdsrhpds

06-playwright-mcp

Configure and validate the Playwright MCP server for Claude Code browser automation.

Official
Advanced
krzemienskikrzemienski
2

chrome-devtools

Diagnose performance, network, and DOM issues using Chrome DevTools MCP.

Community
Advanced
fran0220fran0220

browser

Automate web interactions and capture page state via the agent-browser CLI.

Community
Intermediate
lem0n4idlem0n4id

chrome-devtools

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

Community
Advanced