skills.rest
makiton
makitonCOMMUNITY
Explore all skills by this author →
GitHub

cdp-browser

Launch Chromium in CDP mode to inspect and debug web applications.

2|Updated Jan 4, 2012
Search Tags:#devtools#cdp#web-automation#visual-testing#chromium#dom-inspection
One-click install
npx skills add https://github.com/makiton/dotfiles --skill cdp-browser-makiton
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cdp-browser
Source: https://github.com/makiton/dotfiles/tree/main/dot_claude/skills/cdp-browser
Command: npx skills add https://github.com/makiton/dotfiles --skill cdp-browser-makiton

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Launch Chromium in Chrome DevTools Protocol (CDP) mode to visually inspect, interact with, and debug web applications from within an agent session. This enables verifying UI rendering, inspecting the DOM, running JavaScript, and monitoring network requests in a live browser context.

Core Features & Use Cases

  • Visual verification of UI state via screenshots and DOM inspection.
  • Interactive debugging of frontend issues by executing JavaScript and inspecting runtime state.
  • End-to-end validation of user flows in a real browser with network monitoring.

Quick Start

Launch Chromium in CDP mode and connect to the CDP endpoint to automate visual testing of a running app.

Frequently Asked Questions about cdp-browser

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

FAQPage Schema
How do I visually inspect and debug a web app in CDP mode?▼

To visually inspect and debug a web app in CDP mode, launch Chromium with remote debugging enabled. Connect via HTTP or WebSocket to execute JavaScript, inspect the DOM, and monitor network activity in a live browser context.

What is Chrome DevTools Protocol used for in web automation?▼

Chrome DevTools Protocol (CDP) is used for web automation to visually inspect UI rendering, interact with DOM elements, run JavaScript, and monitor network requests on a running application.

How do I verify UI rendering and inspect the DOM in a running Chromium instance?▼

Verify UI rendering and inspect the DOM by connecting to a running Chromium instance via CDP. This allows you to take screenshots, evaluate runtime state, and interact with frontend elements visually.

Do I need a specific Chromium binary to run CDP connections for visual testing?▼

Yes, you need a Chromium or Chrome binary with remote debugging enabled to perform CDP connections. This setup allows helper scripts or HTTP and WebSocket connections to automate visual testing tasks.

Can I execute JavaScript and monitor network activity using Chrome DevTools Protocol?▼

Yes, executing JavaScript and monitoring network activity are supported via CDP. Connecting to the endpoint allows interactive debugging of frontend issues and validation of user flows in real time.

What are the limitations of using CDP mode for end-to-end validation?▼

CDP mode for end-to-end validation requires a live Chromium instance with remote debugging enabled. It depends on HTTP or WebSocket connections, meaning it needs an active browser environment rather than static analysis.

Related Skills

Explore More Software Engineering Skills→
ssdeanxssdeanx
43

browser

Automate Chrome browser tasks via Chrome DevTools Protocol over WebSocket.

Community
Intermediate
rodrigorjsfrodrigorjsf
1

browser-testing-with-devtools

Inspect DOM, analyze console logs, monitor network requests, and capture screenshots via Chrome DevTools MCP.

Community
Advanced
zeenie-aizeenie-ai
356

browser-harness-skill

Automate real Chrome browser interactions via raw CDP with screenshots and JavaScript evaluation.

Community
Advanced
aisa-groupaisa-group
90

webapp-testing

Automate Playwright browser testing for local web applications.

Official
Intermediate