// Interact with local Chrome browser session (only on explicit user approval after being asked to inspect, debug, or interact with a page open in Chrome)
| name | chrome-cdp |
| description | Interact with local Chrome browser session (only on explicit user approval after being asked to inspect, debug, or interact with a page open in Chrome) |
Lightweight Chrome DevTools Protocol CLI. Connects directly via WebSocket — no Puppeteer, works with 100+ tabs, instant connection.
chrome://inspect/#remote-debugging and toggle the switchAll commands use scripts/cdp.mjs. The <target> is a unique targetId prefix from list; copy the full prefix shown in the list output (for example 6BE827FA). The CLI rejects ambiguous prefixes.
scripts/cdp.mjs list
scripts/cdp.mjs shot <target> [file] # default: /tmp/screenshot.png
Captures the viewport only. Scroll first with eval if you need content below the fold. Output includes the page's DPR and coordinate conversion hint (see Coordinates below).
scripts/cdp.mjs snap <target>
scripts/cdp.mjs eval <target> <expr>
Watch out: avoid index-based selection (
querySelectorAll(...)[i]) across multipleevalcalls when the DOM can change between them (e.g. after clicking Ignore, card indices shift). Collect all data in oneevalor use stable selectors.
scripts/cdp.mjs html <target> [selector] # full page or element HTML
scripts/cdp.mjs nav <target> <url> # navigate and wait for load
scripts/cdp.mjs net <target> # resource timing entries
scripts/cdp.mjs click <target> <selector> # click element by CSS selector
scripts/cdp.mjs clickxy <target> <x> <y> # click at CSS pixel coords
scripts/cdp.mjs type <target> <text> # Input.insertText at current focus; works in cross-origin iframes unlike eval
scripts/cdp.mjs loadall <target> <selector> [ms] # click "load more" until gone (default 1500ms between clicks)
scripts/cdp.mjs evalraw <target> <method> [json] # raw CDP command passthrough
scripts/cdp.mjs stop [target] # stop daemon(s)
shot saves an image at native resolution: image pixels = CSS pixels × DPR. CDP Input events (clickxy etc.) take CSS pixels.
CSS px = screenshot image px / DPR
shot prints the DPR for the current page. Typical Retina (DPR=2): divide screenshot coords by 2.
snap --compact over html for page structure.type (not eval) to enter text in cross-origin iframes — click/clickxy to focus first, then type.Debug and repair code using minimal, reviewable patches instead of full-file rewrites. Use this whenever the user is fixing a bug, iterating on failing tests, asks for a surgical code change, wants a minimal diff, or is in a tight debug loop where output size and token cost matter. Prefer this even if the user does not explicitly say "patch."
Build or use a tight automated test-fix loop that repairs one failing test at a time with minimal patches and narrow context. Use whenever the user wants a repair harness, constrained bug-fixing loop, failing-test repair workflow, or a prompt that turns the model into a surgical fix engine instead of a general coding assistant.
Reduce cognitive load when implementing or refactoring code for readability.
Audit and refactor React UI components to match DataConnect UI implementation rules (Text component, tokens, Tailwind, naming) and Vercel React/composition guidance. Use when the user asks for a UI audit, React audit, composition review, or to fix UI implementation issues in components.
Standardize DataConnect route/page layout, logic/JSX separation, tests, and README expectations. Use when organizing pages/routes, refactoring page structure, or discussing file structure conventions.
Pragmatic React/Vitest testing workflow for DataConnect. Use when writing or updating React/UI code, deciding what tests to add, running tests for a change, or before commit.