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

Ready to run

npx skills add https://github.com/mvellandi/winky --skill chrome-devtools-mvellandi

💬 Prompt for ChatGPT / Claude Chat▼

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.