chrome-devtools

Name: chrome-devtools
Availability: InStock
Author: tuantiensiu

Automate debugging and browser interactions via the Chrome DevTools Protocol.

1|Updated Jan 10, 2026

Search Tags:#automation #debugging #mcp #web-testing #chrome-devtools #performance-analysis #network-inspection

Ready to run

npx skills add https://github.com/tuantiensiu/todo-app --skill chrome-devtools-tuantiensiu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/tuantiensiu/todo-app/tree/main/.opencode/skill/chrome-devtools
Command: npx skills add https://github.com/tuantiensiu/todo-app --skill chrome-devtools-tuantiensiu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chrome DevTools protocol enables deep debugging, performance analysis, and browser automation for web applications, reducing debugging time and increasing reliability.

Core Features & Use Cases

Live debugging, network inspection, performance tracing, and automation of browser interactions via the MCP.
Use cases include diagnosing slow pages, reproducing issues, and automating repetitive tasks across test environments.
Real-world example: connect to a page, snapshot the DOM and performance data, and automate a sequence of user actions to validate a workflow.

Quick Start

Open a page, snapshot the DOM, and interact with elements using MCP tools to automate 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 web testing and debugging using the Chrome DevTools Protocol?▼

You can automate web testing and debugging using the Chrome DevTools Protocol by connecting to a reachable Chrome instance via MCP, snapshotting the DOM, and executing commands like navigate, click, and fill to validate workflows.

Can I capture network inspection and performance analysis data for a slow web page?▼

Yes, you can capture network inspection and performance analysis data by connecting to the target web page, snapshotting performance metrics, and inspecting network traffic to diagnose slow loading times and reproduce issues.

Do I need a specific browser environment to run Chrome DevTools automation via MCP?▼

You need a Chrome instance reachable via the Model Context Protocol (MCP) to run Chrome DevTools automation, allowing you to execute live debugging, performance tracing, and end-to-end checks across web applications.

What is the best way to reproduce a web application issue during a debugging session?▼

The best way to reproduce a web application issue during a debugging session is to automate a sequence of user actions through MCP tools, snapshotting the DOM and interacting with elements to consistently trigger and validate the problem.

How does browser automation with MCP handle repetitive tasks across test environments?▼

Browser automation with MCP handles repetitive tasks across test environments by applying DevTools Protocol commands to programmatically navigate, fill forms, and click elements, reducing manual testing time and increasing reliability.

When should I not use Chrome DevTools Protocol automation for performance tracing?▼

You should avoid using Chrome DevTools Protocol automation for performance tracing when a reachable Chrome instance is unavailable or when tasks require inspecting browser engines outside the scope of MCP-supported commands.