skills.rest
soham2008xyz
soham2008xyzCOMMUNITY
Explore all skills by this author →
Website𝕏@nonconformismGitHub

chrome-devtools

Capture DOM snapshots, console messages, network requests, and performance traces from live Chrome contexts.

Updated Jan 8, 2026
Search Tags:#browser automation#chrome devtools#network analysis#performance profiling#dom inspection#console debugging#sse debugging
One-click install
npx skills add https://github.com/soham2008xyz/trade-tycoon --skill chrome-devtools-soham2008xyz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/soham2008xyz/trade-tycoon/tree/main/.agents/skills/chrome-devtools
Command: npx skills add https://github.com/soham2008xyz/trade-tycoon --skill chrome-devtools-soham2008xyz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you quickly diagnose why a web page is slow, broken, or behaving unexpectedly by using Chrome DevTools MCP to inspect the live DOM, network, console, and performance traces.

Core Features & Use Cases

  • Snapshot-first element targeting: Take an accessibility snapshot to reliably locate UI elements by uid, then interact with them (click, fill) without guesswork.
  • Live debugging visibility: Inspect console output and enumerate network requests to pinpoint JavaScript errors, failed resources, and unexpected API behavior.
  • Performance profiling: Start/stop performance traces and analyze insights to identify bottlenecks affecting Core Web Vitals and user experience.
  • Use case: Reproduce a UI bug on a staging site, locate the exact element involved via snapshot uids, confirm the failing API call in network logs, then validate whether performance regressions correlate with the incident.

Quick Start

Use chrome-devtools to navigate to the given URL, take a snapshot to find the login button, click it, then list console messages and failed network requests to identify the cause.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I debug failing network requests and console errors in a web app?▼

You can debug network requests and console errors by navigating to the live URL, listing console messages to pinpoint JavaScript errors, and enumerating network requests to identify failed resources and unexpected API behavior.

What is the best way to inspect the DOM and interact with UI elements during browser automation?▼

The best way to inspect the DOM for browser automation is taking an accessibility snapshot to reliably locate UI elements by uid, then interacting with them via click or fill actions without guesswork.

How do I profile web performance and check Core Web Vitals in live Chrome?▼

To profile web performance and check Core Web Vitals in live Chrome, you start and stop performance traces, then analyze the generated insights to identify bottlenecks affecting user experience.

Can I reproduce a UI bug and verify the exact failing element involved?▼

Yes, you can reproduce a UI bug by navigating to the staging site, taking a snapshot to locate the exact element by uid, and confirming the failing API call in network logs to validate correlating performance regressions.

Does Chrome DevTools debugging support page resizing and device emulation?▼

Chrome DevTools debugging supports page resizing and device emulation, allowing you to resize pages and emulate environments to verify UI interactions and troubleshoot regressions across different viewports.

Related Skills

Explore More Software Engineering Skills→
quan2005quan2005
13

agent-browser

Automate browser inspection, navigation, interaction, and screenshot capture via Chrome DevTools Protocol.

Community
Advanced
david-driscolldavid-driscoll
1

web-perf

Analyze Core Web Vitals and trace insights from Chrome DevTools performance recordings.

Community
Advanced
finasfinas
58

browser-cli

Control Chrome sessions via DevTools Protocol for browser automation and debugging.

Community
Intermediate
chlmmchlmm

chrome-devtools-mcp

Debug Chrome browsers and inspect DOM via DevTools Protocol.

Community
Intermediate