chrome-devtools

Automate browser interactions and debugging via the Chrome DevTools MCP server.

Updated Dec 14, 2025

Search Tags:#automation #screenshots #Chrome DevTools #web debugging #network-analysis #performance-profiling

Ready to run

npx skills add https://github.com/louisburroughs/durion --skill chrome-devtools-louisburroughs

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates browser interactions and debugging tasks using the Chrome DevTools MCP server to control a live Chromium-based browser.

Core Features & Use Cases

Navigation & Interaction: Open pages, click elements, fill forms, and inspect console output.
Debugging & Networking: Monitor console messages, analyze network requests, and diagnose issues.
Performance Profiling: Record and analyze performance traces to identify bottlenecks and layout shifts.
Use Case: Automate a user flow across a single-page app and validate network integrity with traces.

Quick Start

Connect to the Chrome DevTools MCP server, open a new page, navigate to a target URL, and take a screenshot as a quick verification.

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 and inspect network requests for web debugging?▼

Automating browser tasks and web debugging involves using the Chrome DevTools MCP server to control a live Chromium-based browser, enabling navigation, element interaction, console inspection, network analysis, and performance profiling across web pages.

Can I record performance traces to identify bottlenecks and layout shifts?▼

Yes, you can record performance traces to identify bottlenecks and layout shifts. The skill automates performance profiling across web pages to diagnose rendering issues and validate network integrity during automated user flows.

Does this approach work for single-page app QA and automation workflows?▼

Yes, this approach works for single-page app QA and automation workflows. It automates user flows across web pages by opening pages, clicking elements, filling forms, and taking screenshots for verification.

How do I take a screenshot after navigating to a target URL?▼

To take a screenshot, connect to the Chrome DevTools MCP server, open a new page, navigate to the target URL, and capture the screenshot as a quick verification of the automated browser interaction.

What do I need to run deterministic browser automation and capture artifacts?▼

You need a Chrome DevTools MCP server and a compatible runtime with browser access to run deterministic browser automation and capture artifacts like screenshots and performance traces.

Can I monitor console messages and diagnose issues during automated navigation?▼

Yes, you can monitor console messages and diagnose issues during automated navigation. The skill inspects console output and analyzes network requests to debug web pages effectively.