skills.rest
FernanSuoza
FernanSuozaCOMMUNITY
Explore all skills by this author →
GitHub

qa-chrome-devtools-verification

Inspect Chrome DevTools panels to capture runtime evidence for UI verification.

Updated Mar 22, 2026
Search Tags:#performance#debugging#troubleshooting#devtools#cdp#network#ui-verification
One-click install
npx skills add https://github.com/FernanSuoza/AIDD-project-bootstrap --skill qa-chrome-devtools-verification
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-chrome-devtools-verification
Source: https://github.com/FernanSuoza/AIDD-project-bootstrap/tree/main/templates/skills/qa-chrome-devtools-verification
Command: npx skills add https://github.com/FernanSuoza/AIDD-project-bootstrap --skill qa-chrome-devtools-verification

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use Chrome DevTools, the Chrome DevTools Protocol, or DevTools MCP to inspect, debug, and validate browser behavior when UI verification needs deeper runtime evidence.

Core Features & Use Cases

  • Inspect console, network, performance, storage, and rendering panels to debug browser behavior.
  • Use DevTools Protocol or MCP for automated instrumentation and trace collection during verification.
  • Suitable for bug triage, flaky UI tests, and post-release verifications to gather evidence and reproduce issues.

Quick Start

Launch the verification workflow in your AI chat by asking it to collect DevTools evidence for a failing UI scenario and summarize findings.

Frequently Asked Questions about qa-chrome-devtools-verification

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

FAQPage Schema
How do I capture Chrome DevTools evidence for a failing UI scenario?▼

You can collect DevTools evidence for a failing UI scenario by launching the verification workflow in your AI chat to inspect console, network, and rendering panels, then summarizing findings to reproduce issues.

Can I use Chrome DevTools Protocol to gather network evidence during bug triage?▼

Yes, you can use the Chrome DevTools Protocol to gather network evidence during bug triage by applying automated instrumentation and trace collection to validate browser behavior and document debugging notes.

What is DevTools MCP used for in UI verification?▼

DevTools MCP is used in UI verification to inspect, debug, and validate browser behavior by automating trace collection and runtime evidence gathering across console, performance, storage, and rendering panels.

Does this approach work for troubleshooting flaky UI tests?▼

Yes, this approach works for troubleshooting flaky UI tests by using DevTools, CDP, and DevTools MCP to capture runtime evidence, reproduce issues, and document fixes during post-release verifications.

What's the best way to inspect browser performance and storage during debugging sessions?▼

The best way to inspect browser performance and storage during debugging sessions is interfacing with Chrome DevTools and CDP to capture runtime evidence, reproduce issues, and document fixes or debugging notes.

When do I need Chrome DevTools Protocol for UI verification instead of manual inspection?▼

You need Chrome DevTools Protocol for UI verification when manual inspection is insufficient, allowing automated instrumentation and trace collection for deeper runtime evidence during flaky tests or bug triage.

Related Skills

Explore More Software Engineering Skills→
BorisserzBorisserz
1

browser-testing-with-devtools

Inspect DOM, console, network, and performance data via Chrome DevTools MCP.

Community
Intermediate
jshsakurajshsakura
22

browser-debugger

Automates browser-based reproduction and evidence collection for UI bugs.

Community
Advanced
mymx2mymx2
4

browser-testing-with-devtools

Inspect DOM, network traffic, and screenshots via Chrome DevTools MCP.

Community
Advanced
MathiasPaulenkoMathiasPaulenko

WaveXis Network Testing

Capture and manipulate HTTP/HTTPS traffic for performance auditing and API testing.

Community
Advanced