workflows-chrome-devtools

Route Chrome DevTools debugging tasks between CLI and MCP.

31|3|Updated Dec 23, 2025
One-click install
npx skills add https://github.com/MichelKerkmeester/Opencode_Dev_Environment --skill workflows-chrome-devtools
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: workflows-chrome-devtools
Source: https://github.com/MichelKerkmeester/Opencode_Dev_Environment/tree/main/.opencode/skill/workflows-chrome-devtools
Command: npx skills add https://github.com/MichelKerkmeester/Opencode_Dev_Environment --skill workflows-chrome-devtools

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill orchestrates Chrome DevTools tasks via a CLI-first approach (bdg) with MCP fallback for multi-tool integration, optimizing debugging workflows.

Core Features & Use Cases

  • CLI-first routing for speed and token efficiency
  • MCP fallback for complex tool integration
  • Examples for navigation, screenshots, and network tracing
  • Tooling guidance for integrated debugging pipelines

Quick Start

chrome-devtools-route({ path: "navigate", to: "https://example.com" })

Frequently Asked Questions about workflows-chrome-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug Chrome with CDP commands from the CLI?

Chrome DevTools Protocol (CDP) debugging is available through the bdg CLI tool, which executes commands like navigation, screenshots, and network tracing directly. The Skill routes CLI requests first for speed and token efficiency, falling back to MCP when CLI is unavailable, letting you choose your execution path based on your workflow needs.

Can I automate browser debugging in CI/CD pipelines?

Yes. This Skill orchestrates Chrome DevTools tasks optimized for CI/CD automation, supporting quick CDP access, HAR exports, console monitoring, and DOM queries. CLI-first routing prioritizes speed and token efficiency in automated environments where MCP integration isn't required.

What's the difference between using CLI and MCP for Chrome DevTools debugging?

CLI execution via bdg is faster and more token-efficient for single debugging tasks; MCP provides fallback support for complex multi-tool integration scenarios. The Skill automatically selects CLI when available and routes to MCP only when CLI is unavailable, optimizing for your context.

How do I capture network traces and screenshots with Chrome DevTools?

Chrome DevTools Protocol supports HAR exports for network tracing and screenshot capture as core CDP features. This Skill exposes both through CLI-first routing, with troubleshooting guidance and reference examples for navigation, screenshots, and network monitoring workflows.

Do I need additional tools to query the DOM or monitor console output?

DOM queries and console monitoring are built into Chrome DevTools Protocol; no additional tools are required. The Skill provides static references and routing logic to execute these tasks via CLI or MCP, with guidance for production debugging pipelines.

What are the limitations of CLI-first Chrome DevTools automation?

CLI execution requires the bdg tool to be available in your environment; complex tool integration scenarios may benefit from MCP fallback instead. The Skill documents this trade-off through its routing pattern and provides troubleshooting guidance for production use cases.