chrome-devtools

Automate browser navigation, debugging, and performance profiling via Chrome DevTools MCP.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/ngmthaq/my-copilot --skill chrome-devtools-ngmthaq
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/ngmthaq/my-copilot/tree/main/skills/chrome-devtools
Command: npx skills add https://github.com/ngmthaq/my-copilot --skill chrome-devtools-ngmthaq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chrome DevTools automation and debugging capabilities enable developers to control, inspect, and profile live pages with reproducible steps, reducing manual debugging time and improving performance insights.

Core Features & Use Cases

  • Browser automation: navigate pages, inspect elements, capture logs, and profile performance.
  • Debugging & inspection: view console messages, evaluate scripts, and analyze network activity.
  • Performance profiling: start/stop traces, analyze insights, and measure performance metrics across web apps.
  • Use Case: automate repetitive debugging tasks on web applications, capture traces, and compare performance across builds.

Quick Start

Launch a Chrome DevTools session and begin automated navigation, debugging, and profiling on a target page.

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 and inspect elements on a live page?

Browser automation debugging enables you to navigate pages, inspect elements, and capture console logs with reproducible steps. It controls a live browser session to evaluate scripts and analyze network activity automatically.

Can I capture network activity and console logs during web app automation?

Yes, network analysis and console message capture are supported during web app automation. The tooling allows you to evaluate scripts, view console messages, and analyze network activity across targeted live pages.

What's the best way to profile performance and capture traces across web builds?

Performance profiling captures traces by starting and stopping performance traces on target web apps. You can analyze insights and measure performance metrics to compare results across different builds.

How does browser automation handle taking snapshots and evaluating scripts?

Browser automation takes snapshots and evaluates scripts by controlling a live browser through a structured toolset. This enables precise page automation, element inspection, and automated script evaluation.

Do I need a live Chrome browser session to analyze page performance metrics?

Yes, analyzing page performance metrics requires a live Chrome browser session. The structured toolset controls the active browser to start traces, evaluate scripts, and measure performance metrics accurately.