skills.rest
bugabinga
bugabingaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

chrome-cdp

List Chrome DevTools Protocol targets and inspect or interact with live pages.

Updated Aug 23, 2026
Search Tags:#ui testing#cdp#chrome#web debugging#dom inspection#screenshot automation#network telemetry
One-click install
npx skills add https://github.com/bugabinga/pi-ext --skill chrome-cdp-bugabinga
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-cdp
Source: https://github.com/bugabinga/pi-ext/tree/main/skills/chrome-cdp
Command: npx skills add https://github.com/bugabinga/pi-ext --skill chrome-cdp-bugabinga

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

It removes the guesswork of inspecting or debugging a webpage by letting you query and control the exact page the user currently has open in their local Chrome session.

Core Features & Use Cases

  • Enumerate and target open pages: List available Chrome DevTools Protocol targets and pick the right one by prefix, which fits workflows where multiple tabs/windows are open.
  • Read structure and content: Capture accessibility snapshots or extract full page HTML, including targeted DOM HTML via CSS selectors.
  • Interact and troubleshoot UI: Navigate to URLs, click or click-by-coordinates, type text, and visually verify results with screenshots that include coordinate mapping.
  • Debug page behavior: Evaluate JavaScript in the page context, fetch network resource timing summaries, and load “load more” sections by repeatedly clicking until content disappears.
  • Use case: When a user says “the button isn’t working on this page,” you can list the tab, snapshot the accessible UI, click the control, capture a screenshot, and then evaluate a targeted expression to confirm the state.

Quick Start

Ask to use live Chrome by saying: Inspect my open Chrome page and capture a visual screenshot of the current layout, then click the element matching the selector #submit and show what changed.

Frequently Asked Questions about chrome-cdp

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

FAQPage Schema
How do I inspect and interact with my live Chrome tab for web debugging?▼

To inspect a live Chrome tab for web debugging, you list open Chrome DevTools Protocol targets, select the correct page by prefix, and run DOM inspection, interaction, or screenshot capture directly against that active session.

Can I capture a screenshot and extract DOM HTML using CSS selectors from an open page?▼

Yes, you can capture visual screenshots with coordinate mapping and extract targeted DOM HTML using CSS selectors by querying the active Chrome DevTools Protocol target to read the structure and content of your live webpage.

How do I diagnose a broken UI button or behavior after navigation in Chrome?▼

To diagnose broken UI behavior in Chrome, you navigate to the URL, snapshot the accessibility structure, click the control, capture a screenshot, and evaluate targeted JavaScript expressions in the page context to confirm the state.

Does this Chrome CDP inspection approach work with multiple open tabs?▼

Yes, this approach works with multiple open tabs by enumerating available Chrome DevTools Protocol targets and resolving the specific page you need via CDP target prefix resolution before executing any inspection commands.

How do I collect network resource timing telemetry from an actively open webpage?▼

You collect network resource timing telemetry by querying the active Chrome DevTools Protocol target to fetch network resource timing summaries while the webpage is actively open in your local Chrome session.

What are the limitations of using CDP for local web debugging?▼

Limitations of using CDP for local web debugging include requiring an explicit user request to operate on the live session, using Node.js 22+ CLI, and enforcing operational safety caps via environment variables to prevent runaway processes.

Related Skills

Explore More Software Engineering Skills→
Wanger-SJTUWanger-SJTU

chrome-cdp

Automate local Chrome sessions via the Chrome DevTools Protocol.

Community
Advanced
AradotsoAradotso
4

kaboom-browser-ai-devtools

Correlate console logs, failed network requests, and DOM state into debugging evidence.

Official
Advanced
FirzusFirzus
1

agent-browser

Automate live browser interactions and capture screenshots via CDP.

Community
Advanced
abhishekdutta18abhishekdutta18

browser-qa

Automate visual, functional, and accessibility testing of web pages.

Community
Intermediate