skills.rest
addyosmani
addyosmaniCOMMUNITY
Explore all skills by this author →
Website𝕏@addyosmaniGitHub

browser-testing-with-devtools

Inspect and debug live browser environments via Chrome DevTools MCP.

84.9k|9.1k|Updated Feb 15, 2026
Search Tags:#performance#debugging#accessibility#devtools#browser testing#ui verification
One-click install
npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools-addyosmani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/addyosmani/agent-skills/tree/main/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools-addyosmani

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between static code analysis and live browser execution, allowing AI agents to directly inspect, debug, and verify web application behavior in real-time.

Core Features & Use Cases

  • Live DOM Inspection: Examine the structure and computed styles of elements.
  • Runtime Error Diagnosis: Capture console logs and network requests.
  • Performance Profiling: Analyze page load and interaction performance.
  • Visual Verification: Use screenshots for regression testing.
  • Use Case: Debug a UI layout issue by inspecting the DOM and CSS, or verify that an API call returns the expected data by monitoring network requests.

Quick Start

Use the browser-testing-with-devtools skill to capture a screenshot of the current page.

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 live browser applications using Chrome DevTools?▼

You can debug live browser applications by using Chrome DevTools MCP to programmatically inspect the DOM, capture console logs, and monitor network requests in real-time.

Can I run automated accessibility checks on a live web page?▼

Yes, automated accessibility checks are supported. The skill enables AI agents to interact with the live browser environment to verify UI accessibility and capture visual regressions.

What is the best way to diagnose UI layout issues and network anomalies?▼

The best way to diagnose UI layout issues and network anomalies is to inspect the live DOM structure and computed styles while capturing real-time network request data.

How do I profile page load performance bottlenecks in a live environment?▼

You can profile page load performance bottlenecks by accessing Chrome DevTools performance data, allowing you to analyze runtime behavior and interaction metrics programmatically.

Does browser testing with DevTools work without additional dependencies?▼

Yes, browser testing with DevTools works without additional dependencies, bridging static code analysis and live execution to directly inspect web application behavior.

How do I verify API calls return expected data during browser testing?▼

You can verify API calls by monitoring network requests through DevTools, capturing the live traffic to ensure the API returns the expected data payloads during execution.

Related Skills

Explore More Software Engineering Skills→
klhklh
9

browser-testing-with-devtools

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

Community
Advanced
NeuveAINeuveAI
1

perf-agent

Profile UI performance changes in Chrome and measure Core Web Vitals.

Official
Advanced
santanapolsantanapol

browser-testing-with-devtools

Inspect live browser DOM, console logs, and network traffic via Chrome DevTools MCP.

Community
Intermediate
archibatearchibate
6

electron

Automate Electron desktop app testing via Chrome DevTools Protocol.

Community
Intermediate