skills.rest
kevindree
kevindreeCOMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

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

Updated May 3, 2026
Search Tags:#accessibility#chrome devtools#browser testing#performance profiling#network monitoring#ui debugging#console analysis
One-click install
npx skills add https://github.com/kevindree/geehoo-gateway --skill browser-testing-with-devtools-kevindree
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/kevindree/geehoo-gateway/tree/main/.github/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/kevindree/geehoo-gateway --skill browser-testing-with-devtools-kevindree

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you verify and debug browser-facing behavior using real runtime data instead of guesses, so you can catch UI, console, network, and performance issues where they actually happen.

Core Features & Use Cases

  • Live DOM Inspection: Check the rendered structure, element state, and computed styles in an actual browser session.
  • Console and Network Analysis: Diagnose errors, warnings, request failures, payload mismatches, and response issues.
  • Performance and Accessibility Checks: Measure page responsiveness, inspect accessibility output, and confirm the experience is usable.
  • Use Case: A frontend bug looks correct in code review but still misbehaves in the browser; this Skill helps you reproduce it, inspect the runtime state, and validate the fix visually and technically.

Quick Start

Use the browser-testing-with-devtools skill to open the target page, inspect the live DOM, console, and network activity, and confirm the fix in a real browser.

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 issues using live runtime data instead of static code analysis?▼

Debugging browser UI issues with live runtime data involves inspecting the rendered DOM, computed styles, and console logs in an actual browser session to catch visual and runtime failures where they actually happen.

Can I diagnose network request failures and payload mismatches with Chrome DevTools?▼

Yes, you can diagnose network request failures and payload mismatches by analyzing live network traffic, response issues, and console errors directly from the active browser session to pinpoint the exact runtime cause.

Do I need Chrome DevTools MCP to inspect console logs and accessibility data?▼

Yes, you need Chrome DevTools MCP because it provides the interface to read the live DOM, console logs, network traffic, screenshots, computed styles, and accessibility data without relying on static code analysis.

What is the best way to profile page performance and check accessibility in a live browser?▼

The best way to profile page performance and check accessibility is to measure page responsiveness and inspect accessibility output directly in a real browser session to confirm the experience is visually and technically usable.

Why does my frontend bug look correct in code review but still misbehave in the browser?▼

A frontend bug may look correct in code review but misbehave in the browser due to runtime state changes; inspecting the live DOM and network activity helps reproduce the issue and validate the fix.

Related Skills

Explore More Software Engineering Skills→
alissonpefalissonpef

browser-testing-with-devtools

Diagnoses browser runtime issues by inspecting live page behavior, console output, network activity, and rendered DOM state.

Community
Advanced
addyosmaniaddyosmani
84.9k

browser-testing-with-devtools

Inspect and debug live browser environments via Chrome DevTools MCP.

Community
Advanced
cyalcalacyalcala
1

browser-testing-with-devtools

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

Community
Intermediate
BozhidarN7BozhidarN7

agent-browser

Automate web interactions including navigation, form submission, and data scraping.

Community
Advanced