chrome-devtools

Name: chrome-devtools
Availability: InStock
Author: GitHub

Automate browser control and debugging via the Chrome DevTools MCP.

37.6k|4.7k|Updated Jun 11, 2025

Search Tags:#debugging #screenshots #devtools #browser-automation #performance-analysis #network-inspection

Ready to run

npx skills add https://github.com/github/awesome-copilot --skill chrome-devtools-github

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables automated browser control and debugging using the Chrome DevTools MCP to interact with live web pages, capture diagnostics, and assess performance and network activity.

Core Features & Use Cases

Automation & Debugging: Navigate pages, interact with elements, inspect console output, and analyze network traffic to diagnose issues.
Performance & Verification: Profile page load times, measure timings, and generate traces for performance improvements.
Use Case: When debugging a complex web app, automate page navigation, capture screenshots, and review console logs in a single workflow.

Quick Start

Open the target webpage, capture a full-page screenshot, and list console messages.

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 capture screenshots of web pages?▼

Browser automation with Chrome DevTools lets you programmatically navigate pages, interact with elements, and capture full-page screenshots. The Chrome DevTools MCP provides APIs to control browser actions and collect visual diagnostics in a single workflow without manual interaction.

Can I inspect console logs and network traffic in an automated browser session?▼

Yes. DevTools automation captures console output and network inspection data from live pages. You can log messages, monitor requests, and analyze network activity programmatically to diagnose application issues during automated testing or debugging workflows.

What's the best way to profile page load performance and generate performance traces?▼

Performance profiling through Chrome DevTools measures page load timings and generates trace data for analysis. Automated profiling collects metrics and timing information across web pages, enabling you to identify bottlenecks and optimize performance systematically.

Do I need Chrome DevTools MCP installed to use browser automation and debugging?▼

Yes. The Chrome DevTools MCP is a required dependency. Integration tooling connects to it to programmatically drive browser actions, collect diagnostics, and analyze traces for debugging and performance assessment.

Can I automate interaction with complex web apps and verify their behavior?▼

Browser automation enables you to navigate pages, interact with UI elements, and capture diagnostics like screenshots and console logs. This lets you verify complex web app behavior in a single automated workflow without manual testing.

What limitations should I know before automating browser debugging workflows?▼

Browser automation requires the Chrome DevTools MCP and proper integration setup. Coverage is scoped to navigation, element interaction, screenshot capture, console inspection, and network analysis; specialized use cases outside this scope may need alternative approaches.