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

Ready to run

npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools-addyosmani

💬 Prompt for ChatGPT / Claude Chat▼

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.