skills.rest
mvellandi
mvellandiCOMMUNITY
Explore all skills by this author →
Website𝕏@TriforceKid7GitHub

chrome-devtools

Automate browser debugging and interactions via Chrome DevTools MCP.

Updated Feb 8, 2023
Search Tags:#debugging#mcp#chrome-devtools#browser-automation#performance-analysis#network-inspection#web-dev
One-click install
npx skills add https://github.com/mvellandi/winky --skill chrome-devtools-mvellandi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/mvellandi/winky/tree/main/.agents/skills/chrome-devtools
Command: npx skills add https://github.com/mvellandi/winky --skill chrome-devtools-mvellandi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables developers and testers to debug, troubleshoot, and automate browser interactions by issuing commands through the Chrome DevTools Protocol via MCP, reducing manual debugging time.

Core Features & Use Cases

  • Browser lifecycle management: automatically starts a persistent Chrome profile on first tool use.
  • Page context operations: select pages, navigate, and manage multiple tabs.
  • Element interaction & inspection: interact with elements via UID-based snapshots and perform clicks, fills, and evaluations.
  • Performance and network analysis: capture traces, inspect network activity, and collect performance data.
  • Parallel execution & automation: run multiple actions in correct order for efficient tasks.

Quick Start

Load a target page and start a debugging session using Chrome DevTools MCP.

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 with Chrome DevTools Protocol?▼

Automating browser debugging with Chrome DevTools involves driving the protocol through MCP to control page navigation, element interaction, and network inspection. This skill issues commands like navigate_page and take_snapshot to reduce manual troubleshooting time.

Can I inspect network activity and capture performance traces in a persistent Chrome profile?▼

Capturing performance traces and inspecting network activity are supported within a persistent Chrome profile. The skill automatically starts the profile on first tool use and maintains browser state across multiple debugging commands.

How do I interact with web page elements using Chrome DevTools MCP?▼

Interacting with web page elements via Chrome DevTools MCP uses UID-based snapshots to execute clicks, fills, and script evaluations. The snapshot system assigns identifiers to elements, enabling precise targeting for automation and inspection commands.

What do I need to configure before using Chrome DevTools MCP for web automation?▼

Configuring Chrome DevTools MCP for web automation requires setting up the MCP server and accessing the chrome-devtools-mcp package. No additional dependencies are needed, but the environment must support MCP server connections.

Does browser automation through MCP support managing multiple tabs and parallel execution?▼

Managing multiple tabs and parallel execution are supported through MCP browser automation. The skill selects pages, navigates, and runs multiple actions in correct order for efficient task execution across parallel browser interactions.

Related Skills

Explore More Software Engineering Skills→
ajilantonyajilantony

chrome-devtools

Automate browser interactions and inspections via the Chrome DevTools Protocol.

Community
Advanced
yash-gargyash-garg

web-perf

Analyze web performance bottlenecks and identify optimization opportunities using Chrome DevTools.

Community
Advanced
hepai-labhepai-lab
21

playwright-cli

Automate browser interactions and testing tasks using the Playwright CLI.

Community
Advanced
wesleyegbertowesleyegberto
3

chrome-devtools

Automate browser control and debugging via the Chrome DevTools Protocol.

Community
Advanced