chrome-devtools

Automate browser control and debugging via the Chrome DevTools MCP protocol.

Updated Mar 16, 2026

Search Tags:#automation #debugging #chrome-devtools #performance-analysis #network-inspection #console-messages

Ready to run

npx skills add https://github.com/zhouxiumin/zxm-skills --skill chrome-devtools-zhouxiumin

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chrome DevTools MCP-based automation and debugging enables precise control of real-time Chrome sessions, reducing manual effort and speeding up web testing and analysis.

Core Features & Use Cases

Navigation and page management: new_page, navigate_page, select_page, list_pages, close_page, wait_for.
Interaction and input: click, fill_form, hover, press_key, drag, handle_dialog, upload_file.
Debugging and inspection: take_snapshot, take_screenshot, list_console_messages, get_console_message, evaluate_script, list_network_requests, get_network_request.
Performance and environment: resize_page, emulate, performance_start_trace, performance_stop_trace, performance_analyze_insight.
Best practices: context awareness, snapshot updates, timeout management.

Quick Start

Launch a new browser page and navigate to your target URL, then begin debugging with console inspection and network analysis.

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 UI testing and debugging with Chrome DevTools?▼

Automate web UI testing and debugging by connecting a Chrome DevTools protocol client to navigate pages, fill forms, click elements, and execute scripts for real-time browser session control.

Can I capture network requests and console messages during browser automation?▼

Yes, you can inspect network requests and list console messages during browser automation to monitor API calls, track errors, and analyze page behavior across multiple contexts.

What is the best way to profile web performance using Chrome DevTools automation?▼

Profile web performance by starting a performance trace, executing browser interactions, then stopping the trace to analyze insights and identify rendering bottlenecks or load issues.

Does Chrome DevTools automation support managing multiple browser pages simultaneously?▼

Yes, Chrome DevTools automation supports multi-page management, allowing you to open new pages, list active sessions, select specific tabs, and close pages independently within your workflow.

How do I handle complex user interactions like file uploads and drag operations in automated browser sessions?▼

Handle complex user interactions by using dedicated automation commands for dragging elements, handling dialog boxes, uploading files, and pressing keys to accurately simulate real user behavior.

What are the limitations of using Chrome DevTools for automated web testing?▼

Chrome DevTools automation requires a protocol client and careful timeout management, meaning tests may fail if page snapshots are outdated or if context awareness is not properly maintained during execution.