chrome-devtools

Name: chrome-devtools
Availability: InStock
Author: arlenagreer

Access Chrome DevTools Protocol via Docker for browser debugging.

Updated Aug 23, 2026

Search Tags:#automation #performance #debugging #devtools #chrome #network #CDP

Ready to run

npx skills add https://github.com/arlenagreer/claude_configuration_docs --skill chrome-devtools-arlenagreer

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires docker, ruby, websocket-client-simple, json, net-http, and includes scripts (resource) components.

What problem does it solve?

This Skill provides programmatic access to Chrome DevTools Protocol for automated browser debugging, eliminating the need for manual inspection and testing.

Core Features & Use Cases

Page Control: Navigate, reload, and capture screenshots of web pages.
JavaScript Execution: Run scripts and extract data directly from browser context.
Network Monitoring: Capture and analyze HTTP requests, responses, and performance metrics.
Use Case: Imagine you need to debug a complex web application. Use this Skill to automatically capture network traffic, monitor console errors, and generate performance reports without manual browser interaction.

Quick Start

Use the chrome-devtools skill to navigate to https://example.com and take a full-page 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 debugging with Chrome DevTools Protocol?▼

Chrome DevTools Protocol (CDP) enables programmatic browser automation for debugging. This Skill provides CDP access through a local Docker container, allowing you to navigate pages, execute JavaScript, capture network traffic, and generate screenshots without manual inspection.

Can I capture and analyze network requests from a Chrome instance?▼

Yes. This Skill monitors HTTP requests, responses, and performance metrics in real time through CDP. You can analyze network traffic, extract data, and generate performance reports directly from the browser context.

What do I need to set up before using Chrome DevTools automation?▼

You need Docker, Ruby ≥2.7, websocket-client-simple and json gems, and a running chrome-devtools-server on localhost:9222. The Skill provides setup scripts for navigation, JavaScript evaluation, network capture, screenshots, and DOM interactions.

How do I run JavaScript and extract data from a web page automatically?▼

This Skill executes JavaScript directly in the browser context via CDP. Evaluate scripts remotely to extract DOM data, test functionality, or monitor console output without opening DevTools manually.

Can I take full-page screenshots and monitor console errors programmatically?▼

Yes. The Skill captures full-page screenshots and logs console output through CDP. Use these capabilities to document page state, detect errors, and validate application behavior in automated workflows.

What are the limitations of local Chrome DevTools automation?▼

This Skill operates on a local Docker container without remote MCP dependencies. It's suited for local debugging workflows on a single Chrome instance; scaling to multiple browsers or remote debugging requires Docker orchestration.