skills.rest
jaimedhenriques
jaimedhenriquesCOMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Control live Chrome sessions to navigate pages, inspect state, and analyze network traffic.

Updated Apr 1, 2026
Search Tags:#debugging#browser automation#devtools#chrome#network analysis#performance profiling
One-click install
npx skills add https://github.com/jaimedhenriques/finsyt --skill chrome-devtools-jaimedhenriques
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/jaimedhenriques/finsyt/tree/main/artifacts/platform/.agents/skills/chrome-devtools
Command: npx skills add https://github.com/jaimedhenriques/finsyt --skill chrome-devtools-jaimedhenriques

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chrome DevTools Agent removes the friction of manually testing, inspecting, and debugging live web pages by giving you a structured way to automate browser actions and analyze page behavior.

Core Features & Use Cases

  • Browser Automation: Open pages, click elements, fill forms, handle dialogs, and move through multi-step workflows in a live Chrome session.
  • Debugging and Inspection: Capture snapshots, take screenshots, review console output, inspect network traffic, and evaluate JavaScript in page context.
  • Performance Analysis: Record traces, identify rendering bottlenecks, and investigate Core Web Vitals or layout shift issues.
  • Use Case: When a checkout flow fails or a dashboard loads slowly, use this Skill to reproduce the issue, inspect the page state, and isolate the root cause.

Quick Start

Use the chrome-devtools skill to open the target page, inspect its state, and debug any console or network issues you find.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I automate Chrome browser sessions to interact with live web pages?▼

You can automate Chrome browser sessions by controlling a live browser to navigate pages, click elements, fill forms, and handle dialogs. This enables multi-step workflow automation and visual verification across active browser tabs.

What is the best way to inspect console output and network traffic during web debugging?▼

Inspecting console output and network traffic requires a structured debugging tool to capture snapshots, review console logs, and analyze network requests in real-time. This isolates root causes of page failures and errors.

How do I record performance traces to identify rendering bottlenecks and layout shifts?▼

To record performance traces, use browser profiling tools to capture rendering data, investigate Core Web Vitals, and identify layout shift issues. This trace-based analysis isolates bottlenecks in slow-loading pages.

Can I use Chrome DevTools to evaluate JavaScript and inspect page state in an active tab?▼

Yes, you can use Chrome DevTools to evaluate JavaScript directly in page context and inspect the current page state. This requires snapshot-first element identification to accurately target and interact with page elements.

Does browser automation work for emulating different viewports and environments during testing?▼

Browser automation supports viewport and environment emulation to test how pages respond across different conditions. This allows you to reproduce issues, inspect page state, and verify visual output without manual device switching.

Related Skills

Explore More Software Engineering Skills→
yuexpsyuexps
3

browser_cdp

Connect to Chrome browsers via CDP and scan debugging ports.

Community
Intermediate
kiwamizamuraikiwamizamurai
7

networking

Analyze PCAP captures for data exfiltration and protocol misuse.

Community
Intermediate
vrcmsvrcms
1

browser-qa

Automate visual testing and UI interaction verification for web applications.

Community
Advanced
RxFitRxFit

browse

Automate headless browser interactions to verify web pages and test user flows.

Community
Advanced