skills.rest
untangledfinance
untangledfinanceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

chrome-devtools

Automate browser testing and debugging with Puppeteer CLI scripts for Chromium-based browsers.

Updated May 24, 2025
Search Tags:#debugging#frontend#browser automation#web scraping#Chrome DevTools#performance testing#Puppeteer
One-click install
npx skills add https://github.com/untangledfinance/untangled-web --skill chrome-devtools-untangledfinance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/untangledfinance/untangled-web/tree/main/chrome-devtools
Command: npx skills add https://github.com/untangledfinance/untangled-web --skill chrome-devtools-untangledfinance

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides powerful browser automation, debugging, and performance analysis capabilities, eliminating manual repetitive tasks and enabling deep insights into web applications. It streamlines web scraping, form automation, and performance testing, saving significant development and QA time.

Core Features & Use Cases

  • Browser Automation: Execute Puppeteer CLI scripts to navigate, click, fill forms, and evaluate JavaScript in a headless or headed browser.
  • Performance & Network Analysis: Monitor Core Web Vitals, track HTTP requests/responses, and capture detailed performance traces for optimization.
  • Visual Debugging & Scraping: Take full-page or element screenshots, extract interactive elements with metadata, and perform advanced web scraping operations.
  • Use Case: You need to automate testing a complex multi-step form on a website. Use this skill to navigate to the page, fill in each field, click submit, and then take a screenshot of the success page, all through simple CLI commands.

Quick Start

Take a full-page screenshot of https://example.com and save it to ./docs/screenshots/example.png.

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 tasks like filling forms and taking screenshots?▼

Browser automation executes Puppeteer CLI scripts to navigate pages, fill forms, click buttons, and capture screenshots programmatically. This Skill provides ready-made scripts for common web testing, scraping, and UI automation tasks across Chromium-based browsers without manual repetition.

Can I monitor performance metrics and network requests in headless Chrome?▼

Yes, this Skill captures Core Web Vitals, HTTP request/response data, and detailed performance traces from headless or headed Chromium browsers. Extract performance insights and network activity logs via CLI commands for optimization and debugging.

What's the best way to scrape web content and extract interactive elements?▼

Web scraping with this Skill uses Puppeteer to navigate pages, extract text and element metadata, and bypass client-side rendering. The CLI handles selector parsing with security validation, returning structured data suitable for data pipelines.

Does this work with Node.js 18 and cross-platform environments?▼

Yes, this Skill requires Node.js 18 or higher and runs cross-platform via CLI scripts. It enforces strict working-directory checks and outputs JSON for integration with CI/CD pipelines and other tools.

Can I use Puppeteer for visual debugging without manual browser inspection?▼

Visual debugging captures full-page and element-level screenshots programmatically, replacing manual browser DevTools inspection. Automate screenshot capture and comparison for regression testing and UI validation workflows.

What are the limitations when automating complex multi-step browser workflows?▼

This Skill executes JavaScript evaluation and multi-step navigation reliably, but complex interactions depend on accurate selectors and page state handling. Security validation on selectors prevents injection; Node.js 18+ requirement ensures modern async/await support.

Related Skills

Explore More Software Engineering Skills→
levanminhduclevanminhduc

chrome-devtools

Automate browser tasks and debugging workflows with Puppeteer CLI scripts.

Community
Advanced
nrminornrminor

duckdb

Query Parquet, CSV, and JSON files in place with DuckDB SQL.

Community
Intermediate
dige04dige04

chrome-devtools

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

Community
Advanced
williamzujkowskiwilliamzujkowski
17

e2e-testing

Automate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.

Community
Intermediate