skills.rest
sanand0
sanand0COMMUNITY
Explore all skills by this author →
WebsiteGitHub

devtools

Control Chrome via DevTools Protocol for browser testing and debugging.

11|Updated Apr 4, 2025
Search Tags:#testing#debugging#browser automation#web scraping#devtools#playwright#cdp
One-click install
npx skills add https://github.com/sanand0/scripts --skill devtools
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devtools
Source: https://github.com/sanand0/scripts/tree/main/agents/devtools
Command: npx skills add https://github.com/sanand0/scripts --skill devtools

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill empowers users to efficiently debug, test, and automate browser tasks using the Chrome DevTools Protocol (CDP), streamlining web development workflows and enabling advanced browser interactions without manual intervention.

Core Features & Use Cases

  • Comprehensive Debugging: Inspect DOM, cookies, storage, network requests, and execute JavaScript, providing deep insights into web application behavior.
  • Browser Automation: Navigate, fill forms, print to PDF, and scrape web content programmatically, automating repetitive tasks.
  • Performance & Auditing: Monitor performance, audit accessibility (Lighthouse, axe-core), and emulate various devices, screen sizes, and network conditions.
  • Use Case: Automate testing of a web application by taking screenshots at critical steps, intercepting network requests to mock responses, and logging console output for detailed debugging, ensuring robust and reliable web applications.

Quick Start

Use CDP to open 'https://example.com', take a full-page screenshot, and log all console messages.

Frequently Asked Questions about devtools

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

FAQPage Schema
How do I automate browser testing with Chrome DevTools Protocol?▼

Chrome DevTools Protocol (CDP) automates browser testing by programmatically controlling a Chrome instance to navigate pages, fill forms, take screenshots, and intercept network requests. Connect to localhost:9222 to inspect DOM, log console output, and validate web application behavior without manual intervention.

Can I use Playwright with Chrome DevTools Protocol for web scraping?▼

Yes, Playwright integrates with CDP to enable advanced web scraping. CDP allows you to intercept fetch and XHR requests, inject JavaScript across CSP contexts, and convert HTML to Markdown, extracting structured content from complex web pages programmatically.

What browser debugging tasks can CDP handle?▼

CDP enables comprehensive debugging: inspect DOM and storage, capture network HAR traces, emulate devices and network conditions, execute arbitrary JavaScript, and log console messages. This provides deep visibility into web application behavior for troubleshooting and performance analysis.

How do I capture screenshots and traces during automated browser tasks?▼

CDP lets you take full-page screenshots and capture HAR traces at critical steps during automation. This documents application state, network activity, and performance metrics to validate test scenarios and debug issues in web application workflows.

What are the limitations when injecting scripts into CSP-protected sites?▼

CDP cannot inject inline scripts on sites with strict Content Security Policy headers. Use external script injection or modify requests via network interception to work around CSP restrictions when automating interactions on security-hardened web applications.

Do I need a local Chrome instance to use Chrome DevTools Protocol?▼

Yes, CDP connects to a local Chrome instance running on localhost:9222. You must start Chrome in debug mode to enable the CDP endpoint before establishing connections for browser automation and debugging tasks.

Related Skills

Explore More Software Engineering Skills→
ssdeanxssdeanx
43

browser

Automate Chrome browser tasks via Chrome DevTools Protocol over WebSocket.

Community
Intermediate
rnbenrnben

dogfood

Automate exploratory QA testing of web applications with screenshots and structured reports.

Community
Advanced
CENKSSSCENKSSS

a11y-ally

Audit web accessibility with axe-core, pa11y, and Lighthouse.

Community
Advanced
SecurityRoninSecurityRonin
1

browser-automation

Automate browser tasks and testing across Playwright, Puppeteer, Selenium, and CDP workflows.

Official
Intermediate