skills.rest
wenerme
wenermeCOMMUNITY
Explore all skills by this author →
Website𝕏@wenermeGitHub

chrome-devtools

Automate Chrome DevTools debugging and browser interactions via MCP.

7|2|Updated Feb 25, 2026
Search Tags:#debugging#browser automation#mcp#chrome devtools#network inspection#page snapshots
One-click install
npx skills add https://github.com/wenerme/ai --skill chrome-devtools-wenerme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/wenerme/ai/tree/main/skills/chrome-devtools
Command: npx skills add https://github.com/wenerme/ai --skill chrome-devtools-wenerme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chrome DevTools can make it hard to reproduce complex debugging steps or systematically inspect page structure, network behavior, and UI state during browser automation.

Core Features & Use Cases

  • MCP-powered DevTools automation: Uses Chrome DevTools via MCP to efficiently debug, troubleshoot, and automate browser interactions.
  • Page-focused workflow: Lets you list pages, select the right page context, and then operate on the selected page.
  • Structured element interaction: Uses text-based snapshots with stable element uids for reliable clicking, filling, and other actions.
  • Performance and inspection support: Helps with analyzing performance and inspecting network requests, plus optional visual inspection via screenshots.

Quick Start

Use the chrome-devtools skill to debug the current page by taking a snapshot, selecting an element by its uid, and then performing the interaction you need.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I automate Chrome DevTools debugging for browser interaction?▼

Automate Chrome DevTools debugging by configuring an MCP server in non-slim mode to inspect page state, capture text-based snapshots, and execute deterministic actions like clicking or filling elements on a targeted web page.

What is the best way to inspect network requests during web page troubleshooting?▼

Inspect network requests by using the Chrome DevTools MCP server to select the target page context, capture snapshots to identify elements via stable uids, and analyze the network behavior and performance of the active browser session.

How do I reliably identify and click UI elements in browser automation?▼

Reliably identify and click UI elements by taking a text-based snapshot of the page to obtain stable element uids, then using those uids to perform deterministic interactions like clicking, filling, or evaluating scripts.

Do I need an MCP configuration to use Chrome DevTools for page snapshots?▼

Yes, MCP configuration in non-slim mode is required to use Chrome DevTools automation, enabling you to list available pages, select the correct page context, and generate text-based snapshots with stable element uids for interactions.

Can I capture data outside the accessibility tree when debugging web pages?▼

Yes, capture data outside the accessibility tree by using optional screenshot capabilities for visual inspection or by evaluating scripts directly within the page context to extract information not available in the standard snapshot.

Related Skills

Explore More Software Engineering Skills→
shalevaminshalevamin

auto-connect

Scan the environment for installed apps, processes, CLI tools, Python packages, browser tabs, and API keys.

Community
Basic
krzemienskikrzemienski
2

chrome-devtools

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

Community
Advanced
babuallybabually
1

agent-browser

Control Chrome or Chromium via CLI using accessibility-tree snapshots and element references.

Community
Advanced
jaimedhenriquesjaimedhenriques

chrome-devtools

Control live Chrome sessions to navigate pages, inspect state, and analyze network traffic.

Community
Advanced