octocode-chrome-devtools

Collects live Chrome DevTools Protocol evidence for network, console, performance, DOM, and storage debugging.

921|75|Updated Jun 5, 2025
One-click install
npx skills add https://github.com/bgauryy/octocode-mcp --skill octocode-chrome-devtools
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: octocode-chrome-devtools
Source: https://github.com/bgauryy/octocode-mcp/tree/main/skills/octocode-chrome-devtools
Command: npx skills add https://github.com/bgauryy/octocode-mcp --skill octocode-chrome-devtools

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Debugging live web pages requires real browser evidence—network failures, console errors, performance metrics, and DOM state—that static HTML crawling cannot capture, especially on JavaScript-heavy or auth-gated pages.

Core Features & Use Cases

  • Live CDP Inspection: Attach to Chrome via the DevTools Protocol to capture network requests, console errors, exceptions, performance metrics, and storage state from a running page.
  • Ready-Made Checks and Sandboxed Runner: Run prepared checks (page snapshot, DOM operations, measure trio, HAR pager) through a Node permission-model sandbox with mandatory stealth patches and session metadata tracking.
  • HAR Capture and API Replay: Export HAR files, page and redact them, then ingest bodies into a local scrape corpus to prove API fields without reopening the browser.
  • Use Case: A user reports that checkout fails on a production page. Launch headless Chrome, snapshot the DOM, click the submit button with trusted input, and capture the failing API request with its status code and timing as evidence.

Quick Start

Ask the agent to debug why form submission fails on a given URL using live Chrome DevTools evidence.

Frequently Asked Questions about octocode-chrome-devtools

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

FAQPage Schema
How do I debug network failures on a live web page with Chrome DevTools Protocol?

Launch Chrome with open-browser.mjs on a CDP port, then run the network-measure-check script through cdp-sandbox.mjs against that port. It emits a health score plus JSON findings you can filter with measure-query, and deeper captures use live-har-monitor or HAR paging.

How do I capture and analyze a HAR file from a live Chrome session?

Capture traffic with the live-har-monitor or network-body-har-fetch checks, then page the resulting .har file with har-pager using filters like --filter failures or --status. Redact secrets with har-redact before sharing, and ingest bodies into a scrape corpus to prove API fields locally.

What Node.js version is required to run Chrome CDP automation scripts?

Node.js 22 or later is required because the runner relies on the native WebSocket client. The sandboxed runner's --allow-net network scoping additionally requires Node 25+, since earlier versions grant network access under the permission model.

Can I use my logged-in Chrome session for authenticated page debugging?

Yes, via the cookie-bridge script, which transfers cookies from an existing CDP session, a Playwright storage-state file, or a real profile into an isolated session. It requires explicit approval with --i-understand-secrets and never prints cookie values.

When should I use static scraping instead of Chrome DevTools debugging?

Use static crawling for site maps, bulk extraction, and pages whose content is available without JavaScript execution. The CDP approach is for live evidence like network failures, console errors, and interactions; thin JS shells should be handed to the scraping workflow.

Why does a CDP script fail with domain or method errors?

Most failures come from calling a method before enabling its domain, routing commands to the wrong session, or stale API assumptions across Chrome versions. Enable domains like Page, Runtime, and Network before listeners, and check /json/protocol for locally supported methods.