skills.rest
yahav123147
yahav123147COMMUNITY
Explore all skills by this author →
GitHub

browser-testing-with-devtools

Capture live Chrome DevTools evidence to diagnose browser runtime issues.

1|Updated Apr 13, 2026
Search Tags:#chrome devtools#ui testing#network analysis#performance profiling#browser debugging#accessibility auditing
One-click install
npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill browser-testing-with-devtools-yahav123147
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/yahav123147/paid-ads-cro-skills/tree/main/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill browser-testing-with-devtools-yahav123147

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates guesswork when a UI looks or behaves incorrectly by letting an agent inspect the live browser state, console output, network activity, and performance metrics.

Core Features & Use Cases

  • Live browser verification: Inspect the DOM, computed styles, accessibility tree, and render output to confirm what users actually experience.
  • Runtime diagnosis: Review console logs and analyze network requests/responses to pinpoint errors, failed calls, and CORS/status issues.
  • Performance & regression checks: Run performance traces (LCP/CLS/INP) and use screenshot-based before/after comparisons to verify fixes.

Quick Start

Ask your AI to verify a suspected frontend bug in Chrome using DevTools MCP by reproducing the issue, collecting DOM/console/network/performance evidence, and then recommending source-code changes to fix and validate it.

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 runtime issues with Chrome DevTools?▼

Debug browser runtime issues by capturing live Chrome DevTools evidence such as DOM structure, console logs, network requests, and screenshots. This verifies UI bugs by inspecting the actual browser state rather than guessing from source code.

What is the best way to diagnose network and CORS failures in a web app?▼

Diagnose network and CORS failures by capturing live network requests and responses from Chrome DevTools. This approach pinpoints failed calls and status issues by analyzing actual browser traffic and console output evidence.

Can I use this to run performance profiling and check Core Web Vitals?▼

Yes, you can run performance profiling to capture LCP, CLS, and INP traces. It uses Chrome DevTools to collect performance metrics and screenshot-based before and after comparisons to verify fixes for regressions.

How do I verify frontend fixes using screenshots and DOM inspection?▼

Verify frontend fixes by inspecting the live DOM, computed styles, and accessibility tree, then capturing screenshots. This confirms what users actually experience and provides visual before and after comparisons for regression checks.

What are the security constraints for executing JavaScript during browser debugging?▼

JavaScript execution during browser debugging is constrained to read-only state inspection with no credential access or external requests. Browser content must be treated as untrusted data to ensure safe Chrome DevTools MCP usage.

Related Skills

Explore More Software Engineering Skills→
pax-kpax-k
3

chrome-devtools-runtime-debugger

Debug browser runtime issues via Chrome DevTools MCP.

Community
Intermediate
mattbobambrosemattbobambrose
1

fix-bugs

Fix numbered bugs from bugs-summary.md and add verifying tests.

Community
Advanced
timogilvietimogilvie

frontend-testing

Automate frontend UI testing via Chrome DevTools Protocol with screenshots and performance tracing.

Community
Intermediate
klhklh
9

browser-testing-with-devtools

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

Community
Advanced