skills.rest
tomholford
tomholfordCOMMUNITY
Explore all skills by this author →
Website𝕏@tholford0GitHub

chrome-devtools

Control Chrome DevTools via MCP to debug and automate web pages.

6|3|Updated Sep 13, 2017
Search Tags:#automation#mcp#web-testing#chrome-devtools#network-inspection#browser-debugging#uid-interaction
One-click install
npx skills add https://github.com/tomholford/dotfiles --skill chrome-devtools-tomholford
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/tomholford/dotfiles/tree/main/claude/skills/chrome-devtools
Command: npx skills add https://github.com/tomholford/dotfiles --skill chrome-devtools-tomholford

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chrome DevTools automation via MCP enables efficient debugging, browser automation, and performance inspection for web pages.

Core Features & Use Cases

  • Deterministic page interaction: navigate, wait for selectors, take snapshots, and interact with elements using their unique uid.
  • Performance and network analysis: inspect network activity, page timing, and resource loading for troubleshooting.
  • Automated debugging workflow: use MCP to reproduce and automate repetitive debugging tasks across pages and sessions.

Quick Start

Start the MCP-enabled Chrome DevTools session, navigate to a page, take a snapshot to locate element uids, and interact with elements using those uids to perform debugging tasks.

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 to debug web pages?▼

Automate Chrome DevTools by controlling browser actions via MCP to debug web pages. You can navigate to URLs, wait for selectors, take snapshots, and interact with elements using a unique uid to perform deterministic debugging tasks across sessions.

Can I inspect network activity and page performance using Chrome DevTools automation?▼

Yes, inspect network activity and page performance using Chrome DevTools automation. The MCP integration allows you to analyze network requests, page timing, and resource loading to troubleshoot web application issues efficiently.

What is the best way to interact with web page elements during browser automation?▼

The best way to interact with web page elements during browser automation is by using their unique uid. Take a page snapshot to locate element uids, then use those identifiers to drive deterministic interactions like clicks and form inputs.

Does Chrome DevTools automation require an MCP server configuration?▼

Yes, Chrome DevTools automation requires an MCP server configuration. Setting up the MCP-enabled session is the necessary prerequisite to establish page context management and drive deterministic browser actions for debugging and testing.

How do I reproduce repetitive debugging tasks across multiple web sessions?▼

Reproduce repetitive debugging tasks across web sessions by automating the workflow through Chrome DevTools MCP. Configure the MCP server to navigate pages, manage context, and execute deterministic interactions using element uids for consistent results.

When should I use Chrome DevTools MCP instead of other browser automation tools?▼

Use Chrome DevTools MCP when you need deterministic page interaction combined with network inspection and performance analysis for debugging. It is ideal for automating repetitive troubleshooting workflows that require precise control over browser actions and resource monitoring.

Related Skills

Explore More Software Engineering Skills→
louisburroughslouisburroughs

chrome-devtools

Automate browser interactions and debugging via the Chrome DevTools MCP server.

Community
Advanced
jvm-skillsjvm-skills
135

performance

Identify and fix web performance bottlenecks in single-page and multi-page sites.

Official
Advanced
JustinWangJPJustinWangJP
6

chrome-devtools

Automate browser debugging and web page manipulation via Chrome DevTools MCP.

Community
Intermediate
eric-sabeeric-sabe
1

chrome-devtools

Automate browser interactions and inspect live web pages via Chrome DevTools.

Community
Intermediate