chrome-devtools

Control and inspect live Chrome via DevTools Protocol for automation, debugging, and profiling.

1|Updated Jan 30, 2023
One-click install
npx skills add https://github.com/ncksol/ravebot --skill chrome-devtools-ncksol
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/ncksol/ravebot/tree/main/.github/skills/chrome-devtools
Command: npx skills add https://github.com/ncksol/ravebot --skill chrome-devtools-ncksol

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamline browser automation, debugging, and performance analysis by controlling a live Chrome browser via the Chrome DevTools MCP server.

Core Features & Use Cases

  • Browser Automation & Navigation: open pages, click elements, fill forms, and manage dialogs across multiple tabs.
  • Debugging & Inspection: capture console output, evaluate scripts, and inspect page state to diagnose issues.
  • Performance & Emulation: record traces, analyze performance, and emulate different viewport and network conditions.

Quick Start

Start a DevTools-enabled browser session and perform a common task such as navigating to a URL and capturing a screenshot.

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

Browser automation is handled by controlling a live Chrome instance to navigate URLs, click elements, fill forms, and capture screenshots programmatically. It uses the Chrome DevTools Protocol via an MCP server to execute these tasks across multiple tabs.

Can I inspect console output and network requests for web debugging?

Yes, web debugging is supported by capturing console output, evaluating scripts, and inspecting network requests to diagnose page issues. It controls a live Chrome browser via the DevTools Protocol to provide deep page state inspection.

How do I record performance traces and profile web app speed?

Performance profiling is done by recording traces and analyzing performance metrics within a live Chrome browser. It applies Chrome DevTools Protocol interactions to evaluate script execution speed and overall web app performance.

Does this Skill support emulating different viewport sizes and network conditions?

Yes, emulation is supported to simulate various viewport sizes and network conditions for testing web pages. It leverages the Chrome DevTools Protocol to apply these constraints during browser automation and performance analysis.

What is the best way to control a live Chrome browser programmatically for web testing?

The best way to control a live Chrome browser programmatically is via the Chrome DevTools MCP server. It enables direct DevTools Protocol interactions for navigation, input simulation, and comprehensive page inspection without manual browser UI usage.

Can I evaluate JavaScript scripts directly within an automated browser session?

Yes, script evaluation is supported within an automated browser session to inspect page state and diagnose issues. It executes JavaScript directly through the Chrome DevTools Protocol against the live Chrome browser instance.