skills.rest
1J6K21
1J6K21COMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

Inspect live web pages with Chrome DevTools for DOM, console, network, and performance data.

Updated Mar 28, 2026
Search Tags:#accessibility#devtools#browser-testing#chrome-devtools#performance-profiling#dom-inspection#network-monitor
One-click install
npx skills add https://github.com/1J6K21/build4good --skill browser-testing-with-devtools-1j6k21
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/1J6K21/build4good/tree/main/.gemini/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/1J6K21/build4good --skill browser-testing-with-devtools-1j6k21

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill bridges the gap between static code inspection and real runtime behavior by giving an agent direct, inspectable access to a running browser so UI bugs, console errors, network issues, and performance regressions can be observed and verified in context.

Core Features & Use Cases

  • DOM Inspection & Screenshots: Capture live DOM trees and screenshots to verify rendered structure and visual state before and after changes.
  • Console & Network Analysis: Collect console logs and network request/response details to diagnose errors, API problems, and CORS or payload issues.
  • Performance & Accessibility Profiling: Record performance traces (LCP, CLS, INP, long tasks) and read the accessibility tree to surface bottlenecks and a11y regressions.
  • Safe JavaScript Execution: Run read-only page scripts for state inspection while enforcing no external requests, no credential access, and requiring confirmation for mutations.
  • Test Plan & Verification Workflow: Follow a reproducible REPRODUCE → INSPECT → DIAGNOSE → FIX → VERIFY workflow for UI, network, and performance issues.

Quick Start

Open the target page in Chrome DevTools MCP and capture a screenshot, DOM snapshot, console logs, and a network 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 UI bugs and network issues in a live browser environment?▼

To debug UI bugs and network issues in a live browser, use Chrome DevTools to capture DOM state, console output, network traffic, and screenshots. This allows you to observe runtime behavior directly and verify front-end changes in context.

Can I capture performance traces and accessibility tree data using Chrome DevTools?▼

Yes, you can capture performance traces and accessibility tree data using Chrome DevTools. It records performance metrics like LCP, CLS, and INP, and reads the accessibility tree to surface bottlenecks and a11y regressions in web applications.

How do I inspect DOM state and run JavaScript safely during browser testing?▼

Inspect DOM state and run JavaScript safely by executing read-only page scripts for state inspection. The system enforces no external requests and no credential access, requiring explicit user confirmation for any navigations or DOM mutations.

What is the standard workflow for reproducing and fixing front-end issues with DevTools?▼

The standard workflow for reproducing and fixing front-end issues is REPRODUCE, INSPECT, DIAGNOSE, FIX, and VERIFY. This process uses browser inspection to capture screenshots, network traces, and console logs for failing interactions.

Do I need a specific server setup to run Chrome DevTools for local or staging environments?▼

Yes, you need integration with a Chrome DevTools MCP server to run live browser debugging in local or staging environments. This connection enables direct DOM inspection, network monitoring, and performance profiling for your web applications.

How does live browser debugging handle untrusted content during network diagnostics?▼

Live browser debugging handles untrusted content by enforcing read-only JavaScript execution and blocking external requests or credential access. It requires explicit user confirmation before performing any navigations or mutations on the inspected page.

Related Skills

Explore More Software Engineering Skills→
GraffiohGraffioh

web-browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Advanced
jshsakurajshsakura
22

browser-debugger

Automates browser-based reproduction and evidence collection for UI bugs.

Community
Advanced
klu-devklu-dev
2

browser-qa

Automate visual and interactive web testing with browser automation frameworks.

Community
Advanced
pacphipacphi
14

Chrome DevTools

Debug web pages via Chrome DevTools MCP with performance, network, and DOM inspection.

Community
Advanced