chrome-devtools

Automate browser control and debugging via the Chrome DevTools protocol.

1|Updated Mar 27, 2026

Search Tags:#automation #testing #performance #debugging #browser #chrome-devtools #devtools-protocol

Ready to run

npx skills add https://github.com/leonanpereirapinto/ai-utils --skill chrome-devtools-leonanpereirapinto

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/leonanpereirapinto/ai-utils/tree/main/skills/essentials/chrome-devtools
Command: npx skills add https://github.com/leonanpereirapinto/ai-utils --skill chrome-devtools-leonanpereirapinto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chrome DevTools automation and debugging capabilities via the Chrome DevTools MCP server to control, inspect, and profile live web pages, reducing manual debugging effort.

Core Features & Use Cases

Browser Automation: Open pages, navigate, interact with elements, and handle dialogs programmatically.
Debugging & Inspection: Capture console messages, inspect page state, evaluate scripts, and monitor network requests.
Performance & Emulation: Record traces, analyze performance metrics, and emulate viewport/conditions for responsive testing.

Quick Start

Open a Chrome session with the DevTools MCP and navigate to a target URL to begin automated browser 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 browser tasks using Chrome DevTools?▼

Automate browser tasks using Chrome DevTools by connecting to the DevTools MCP server to control page navigation, interact with elements, and handle dialogs programmatically. It reduces manual debugging effort by allowing script-driven browser control.

Can I capture console messages and monitor network requests during web debugging?▼

Capture console messages and monitor network requests during web debugging by inspecting the live page state through the DevTools protocol. The Skill evaluates scripts and tracks network activity to reduce manual inspection effort.

How do I record performance traces and analyze metrics for a web app?▼

Record performance traces and analyze metrics for a web app by utilizing the performance profiling capabilities of the Chrome DevTools MCP. It applies DevTools protocol tracing to measure and evaluate live page performance metrics.

Does Chrome DevTools MCP support viewport emulation for responsive testing?▼

Chrome DevTools MCP supports viewport emulation for responsive testing by emulating various device conditions and viewports. This allows you to test responsive layouts across different simulated environments without manual device switching.

What is the best way to inspect page state and evaluate scripts in a live browser?▼

Inspect page state and evaluate scripts in a live browser by leveraging the Chrome DevTools MCP server. It provides direct access to inspect live web pages, evaluate JavaScript, and monitor console output via the DevTools protocol.

Do I need specific dependencies to start browser automation with DevTools protocol?▼

No specific dependencies are required to start browser automation with the DevTools protocol. You simply open a Chrome session with the DevTools MCP and navigate to a target URL to begin automated browser tasks and debugging.