skills.rest
harishgovardhandamodar
harishgovardhandamodarCOMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

Inspect live web applications with Chrome DevTools MCP for debugging.

Updated Apr 8, 2026
Search Tags:#debugging#accessibility#devtools#browser-testing#network-monitoring#performance-profiling#dom-inspection
One-click install
npx skills add https://github.com/harishgovardhandamodar/adversarialStudy --skill browser-testing-with-devtools-harishgovardhandamodar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/harishgovardhandamodar/adversarialStudy/tree/main/Distributionally-Adversarial-Attack/.agents/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/harishgovardhandamodar/adversarialStudy --skill browser-testing-with-devtools-harishgovardhandamodar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill closes the gap between static code review and live browser behavior by giving agents the ability to observe and diagnose what actually runs in a real browser, eliminating guesswork about DOM structure, console errors, network activity, and performance bottlenecks.

Core Features & Use Cases

  • Visual Verification & Screenshots: Capture before/after screenshots for visual regression and responsive layout checks.
  • DOM Inspection & Styles: Read the live DOM tree and computed styles to verify component rendering and CSS issues.
  • Console & Network Analysis: Retrieve console logs and network requests to diagnose errors, failed API calls, and payload mismatches.
  • Performance Profiling: Record performance traces to measure LCP, CLS, INP, and identify long tasks.
  • Accessibility Checks: Inspect the accessibility tree and heading/focus structures to validate screen reader experience.
  • Safe JS Execution: Run scoped, read-only JavaScript for state inspection while enforcing strict security boundaries and avoiding credential access.

Quick Start

Open the target page with Chrome DevTools MCP and capture a screenshot, DOM snapshot, console logs, network trace, and a short performance trace for the failing interaction.

Frequently Asked Questions about browser-testing-with-devtools

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

FAQPage Schema
How do I debug browser UI rendering issues using DevTools?▼

Debug browser UI rendering issues by connecting to Chrome DevTools MCP to inspect the live DOM tree, read computed CSS styles, and capture before-and-after screenshots to verify component rendering and responsive layouts.

Can I capture network traces and console logs for failed API calls in a live browser?▼

Yes, you can capture network traces and console logs in a live browser. The Skill retrieves network requests and console output to diagnose JavaScript errors, failed API calls, and payload mismatches during execution.

What's the best way to measure web performance metrics like LCP and CLS during development?▼

Measure web performance metrics like LCP and CLS by recording performance traces in the browser. The profiling captures Core Web Vitals, identifies long tasks, and highlights bottlenecks to optimize page load and responsiveness.

Does this approach support checking the accessibility tree for screen reader compatibility?▼

Yes, this approach supports checking the accessibility tree for screen reader compatibility. It inspects heading and focus structures directly from the live browser to validate the user experience for assistive technologies.

Is it safe to run JavaScript for state inspection when debugging network requests?▼

Running JavaScript for state inspection is safe because the Skill executes scoped, read-only commands. It enforces strict untrusted-data boundaries and prevents credential exposure while diagnosing issues.

What are the limitations of using browser DevTools for UI debugging?▼

A key limitation is that browser DevTools UI debugging enforces read-only JavaScript execution and untrusted-data boundaries, meaning it cannot mutate live state, submit forms, or access credentials to modify application behavior.

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
yash-gargyash-garg

web-perf

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

Community
Advanced
rodrigorjsfrodrigorjsf
1

browser-testing-with-devtools

Inspect DOM, analyze console logs, monitor network requests, and capture screenshots via Chrome DevTools MCP.

Community
Advanced
betaTridentbetaTrident

browser-qa

Automate visual regression testing and UI interaction verification for web applications.

Community
Advanced