skills.rest
KevinKE93
KevinKE93COMMUNITY
Explore all skills by this author →
Website𝕏@keji_laoke_aiGitHub

browser-testing-with-devtools

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

42|3|Updated May 8, 2026
Search Tags:#chrome devtools#browser testing#network analysis#performance profiling#dom inspection#accessibility audit#console debugging
One-click install
npx skills add https://github.com/KevinKE93/Dev_Agent_OPC --skill browser-testing-with-devtools-kevinke93
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/KevinKE93/Dev_Agent_OPC/tree/main/dev-agent/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/KevinKE93/Dev_Agent_OPC --skill browser-testing-with-devtools-kevinke93

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you reliably diagnose and verify browser-based behavior when static analysis or assumptions can’t explain runtime DOM changes, console errors, network problems, accessibility issues, or visual/performance regressions.

Core Features & Use Cases

  • Live browser inspection: Inspect the DOM, computed styles, accessibility tree, and runtime state using Chrome DevTools MCP.
  • Runtime verification signals: Capture screenshots for before/after comparison, review console logs, and analyze network requests/responses.
  • Performance and debugging support: Record performance traces to evaluate Core Web Vitals and identify bottlenecks.
  • Common scenarios: UI bug reproduction, fixing rendering/CSS issues, validating API calls, ensuring a11y correctness, and confirming that a change actually works in the browser.

Quick Start

Ask your agent to use Chrome DevTools MCP to reproduce the UI issue, capture a screenshot, inspect the relevant DOM element and console/network results, then propose and verify a fix in the 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 UI rendering issues and console errors in a real browser?▼

Debug UI rendering issues by inspecting the live DOM, computed styles, and console logs using Chrome DevTools MCP. This approach captures runtime state, screenshots, and network requests to accurately diagnose visual or functional regressions that static analysis misses.

What is the best way to analyze network requests and performance bottlenecks during browser testing?▼

Analyze network requests and performance bottlenecks by recording performance traces with Chrome DevTools MCP. This method evaluates Core Web Vitals, captures network responses, and identifies runtime bottlenecks directly within the browser environment.

Can I use Chrome DevTools MCP to perform an accessibility audit on my web application?▼

Yes, you can use Chrome DevTools MCP to perform an accessibility audit by inspecting the accessibility tree and runtime state. This allows you to verify a11y correctness directly in the browser, ensuring your UI changes meet accessibility standards.

How do I verify that a UI bug fix actually works in the browser?▼

Verify a UI bug fix works by reproducing the issue in the browser, capturing before and after screenshots, and inspecting the relevant DOM elements and console results. Chrome DevTools MCP facilitates this visual and functional regression check.

Does browser testing with DevTools require navigating to untrusted external links found on the page?▼

No, browser testing with DevTools treats all browser content as untrusted data. It uses safe read-only inspections by default and strictly avoids navigation, secret access, or external requests derived from page content to ensure secure operation.

Related Skills

Explore More Software Engineering Skills→
thanh-abaiithanh-abaii
34

gs:setup-browser-cookies

Import Chromium cookies into a Playwright headless browser session.

Community
Intermediate
alissonpefalissonpef

browser-testing-with-devtools

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

Community
Advanced
mohitmishra786mohitmishra786

test

Generate unit, integration, and end-to-end tests with Pytest, Jest, Playwright, and k6.

Community
Advanced
airoweairowe
14

Accessibility Audit Skill

Audit web projects for WCAG 2.1 violations using axe-core and eslint-plugin-jsx-a11y.

Community
Advanced