skills.rest
miptah21
miptah21COMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Inspect live browser state to diagnose UI, console, and network issues.

2|Updated Apr 8, 2026
Search Tags:#browser automation#chrome devtools#performance profiling#network debugging#javascript evaluation#accessibility snapshot
One-click install
npx skills add https://github.com/miptah21/skills --skill chrome-devtools-miptah21
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/miptah21/skills/tree/main/.agents/skills/chrome-devtools
Command: npx skills add https://github.com/miptah21/skills --skill chrome-devtools-miptah21

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates guesswork when a web page UI, networking, or performance behavior is broken by letting you inspect and diagnose the live browser state directly.

Core Features & Use Cases

  • Browser automation & element interaction: Navigate pages, click, fill forms, upload files, and handle dialogs reliably using element identifiers.
  • Inspection for troubleshooting: Read console output, snapshot the accessibility/DOM structure, evaluate JavaScript, and analyze network requests including failures.
  • Performance analysis: Record performance traces, then analyze insights to pinpoint issues affecting Core Web Vitals and perceived speed.

Quick Start

Use the chrome-devtools skill to take a snapshot of https://example.com and then capture console errors and failed network requests to identify what is preventing the page from working correctly.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I debug a web page using live browser state instead of static HTML?▼

Debugging web pages involves inspecting live UI structure, console errors, and network behavior to locate root causes of failures and regressions using accessibility snapshots and network introspection.

Can I use Chrome DevTools to record performance traces for Core Web Vitals analysis?▼

You can record performance traces and analyze insights to pinpoint issues affecting Core Web Vitals and perceived speed by inspecting live network behavior and evaluating JavaScript.

What's the best way to automate browser interactions like clicking and form filling during debugging?▼

Automate browser interactions by navigating pages, clicking elements, filling forms, and handling dialogs reliably using element identifiers derived from accessibility snapshots.

How do I inspect network behavior and console errors when troubleshooting broken web flows?▼

Inspect network behavior and console errors by reading console output, analyzing network requests including failures, and evaluating JavaScript to troubleshoot broken web flows.

Does browser automation with accessibility snapshots work for visual and text inspection?▼

Browser automation supports visual and text inspection via screenshots or accessibility snapshots, allowing you to interact with elements by snapshot identifiers to locate UI failures.

Related Skills

Explore More Software Engineering Skills→
tkerseytkersey
66

web-browser

Automate Chrome/Chromium via CDP to navigate, click, fill forms, evaluate JavaScript, and capture screenshots.

Community
Intermediate
yash-gargyash-garg

web-perf

Analyze web performance bottlenecks and identify optimization opportunities using Chrome DevTools.

Community
Advanced
leroylim20leroylim20

agent-browser

Automate web browsing, form filling, and data extraction via headless browser navigation.

Community
Intermediate
appautomatonappautomaton
18

html-to-markdown

Converts HTML or live web pages into structured Markdown with metadata and link inventories.

Official
Intermediate