skills.rest
hongbietcode
hongbietcodeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

chrome-devtools

Drive Chrome via Puppeteer for browser automation and debugging.

3|Updated Dec 28, 2025
Search Tags:#debugging#puppeteer#web-testing#chrome-devtools#browser-automation#performance-analysis
One-click install
npx skills add https://github.com/hongbietcode/synthetic-claude --skill chrome-devtools-hongbietcode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/hongbietcode/synthetic-claude/tree/main/plugins/basic-workflow/skills/chrome-devtools
Command: npx skills add https://github.com/hongbietcode/synthetic-claude --skill chrome-devtools-hongbietcode

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, sharp, debug, yargs, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Browser automation, debugging, and performance analysis are often manual, error-prone, and time-consuming. This Skill provides a programmable way to drive Chrome via Puppeteer, collect logs, take screenshots, and capture performance metrics to streamline development and QA workflows.

Core Features & Use Cases

  • Browser Automation: deterministically navigate pages, interact with elements, and extract data.
  • Debugging & Diagnostics: gather console output, network activity, and page errors for rapid issue triage.
  • Performance Analysis: measure timings like LCP, CLS, FID, and resource timings across pages for optimization.

Quick Start

Install dependencies in the skill's environment and run a simple navigation example:

  • npm install --prefix "./plugins/basic-workflow/skills/chrome-devtools"
  • node "./plugins/basic-workflow/skills/chrome-devtools/scripts/navigate.js" --url https://example.com

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I automate browser debugging and capture console logs with Puppeteer?▼

Automate browser debugging by driving Chrome via Puppeteer to collect console output, network activity, and page errors. This enables rapid issue triage and streamlines development workflows without manual inspection.

Can I measure web performance metrics like LCP and CLS for a specific URL?▼

Measure web performance metrics like LCP, CLS, and FID by navigating to a URL with Puppeteer. The script captures timings and resource metrics across pages to identify optimization opportunities.

What do I need to run browser automation scripts for web testing?▼

To run browser automation scripts, you need Node.js and npm installed to execute the Puppeteer library. Optional system libraries for Chromium may be required depending on your environment setup.

How do I take screenshots during web automation to analyze UI?▼

Take screenshots during web automation by driving Chrome with Puppeteer. The script navigates pages and captures visual states programmatically, allowing you to analyze UI elements across websites or local demos.

What is the best way to extract data from web pages deterministically?▼

Extract data from web pages deterministically by using Puppeteer to drive Chrome. This programmatically navigates pages and interacts with elements, replacing manual and error-prone data collection methods.

Does browser automation work for testing local development demos?▼

Browser automation works for testing local development demos. Puppeteer drives Chrome to navigate and interact with local URLs, gathering diagnostics and performance metrics for your development environment.

Related Skills

Explore More Software Engineering Skills→
Wike-CHIWike-CHI
2

acquisition-dependencies

Install and configure Python, npm, and Playwright dependencies across Linux, macOS, WSL2, and Windows.

Community
Intermediate
niltonfredericoniltonfrederico
2

har-analysis

Analyze HAR files for performance metrics, API patterns, and security findings.

Community
Advanced
dige04dige04

chrome-devtools

Automates Puppeteer-based browser tasks and outputs JSON for analysis.

Community
Advanced
betaTridentbetaTrident

browser-qa

Automate visual regression testing and UI interaction verification for web applications.

Community
Advanced