skills.rest
carl10086
carl10086COMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

Inspect DOM, console logs, and network requests via Chrome DevTools MCP.

7|Updated Apr 10, 2026
Search Tags:#testing#ui#performance#debugging#accessibility#devtools#browser
One-click install
npx skills add https://github.com/carl10086/ys-powers --skill browser-testing-with-devtools-carl10086
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/carl10086/ys-powers/tree/main/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/carl10086/ys-powers --skill browser-testing-with-devtools-carl10086

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @anthropic/chrome-devtools-mcp.

What problem does it solve?

This skill bridges the gap between static code analysis and live browser execution, allowing the agent to see, inspect, and diagnose web applications in real-time to eliminate guesswork during development.

Core Features & Use Cases

  • Live Inspection: Access the DOM, console logs, and network requests to diagnose UI layout issues or API failures.
  • Performance Profiling: Record and analyze performance traces to identify bottlenecks and improve Core Web Vitals.
  • Automated Verification: Use screenshots and accessibility tree analysis to ensure visual and a11y standards are met before shipping.

Quick Start

Use the browser-testing-with-devtools skill to inspect the current page and identify the cause of the console errors appearing on the login screen.

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 UI layout issues and inspect the DOM in a browser?▼

Live UI debugging requires real-time browser interaction to inspect the DOM, console logs, and network requests. This skill uses Chrome DevTools MCP to diagnose layout issues or API failures directly in the running web application.

Can I profile web application performance and analyze Core Web Vitals?▼

Yes, you can profile web application performance by recording and analyzing performance traces. This skill leverages Chrome DevTools MCP to identify runtime bottlenecks and evaluate Core Web Vitals for your web-based applications.

Does browser testing with DevTools work for automated accessibility verification?▼

Automated accessibility verification is supported through screenshot capture and accessibility tree analysis. This allows you to ensure visual and a11y standards are met before shipping your web application.

What do I need to configure to diagnose network requests and console errors?▼

You need the chrome-devtools MCP server configured to enable live browser access. Once set up, the skill can interact with the browser to diagnose network request failures and inspect console errors on pages like a login screen.

Why use live browser inspection instead of static code analysis for web debugging?▼

Live browser inspection bridges the gap between static code analysis and live execution by allowing the agent to see and diagnose web applications in real-time. This eliminates guesswork during development by directly accessing the running DOM and network state.

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

The primary limitation is the strict dependency on the chrome-devtools MCP server; without it configured, the skill cannot perform live browser access, DOM manipulation, or real-time diagnostic capabilities for web-based applications.

Related Skills

Explore More Software Engineering Skills→
fsollafsolla

browser-testing-with-devtools

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

Community
Advanced
LimaTechnologiesLimaTechnologies

ui-ux-audit

Automate UI/UX audits for accessibility, responsiveness, and design-system consistency.

Community
Basic
bhaumikmaanbhaumikmaan
3

browser-testing

Automate browser UI testing with snapshots, retries, and failure escalation.

Community
Advanced
kevindreekevindree

browser-testing-with-devtools

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

Community
Advanced