skills.rest
josuenavarroaguado
josuenavarroaguadoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

browser-testing-with-devtools

Inspect live web pages and capture DOM, console, network, screenshot, and performance data via Chrome DevTools MCP.

1|Updated Jan 28, 2025
Search Tags:#devtools#browser-testing#ui-debugging#console-logs#performance-profiling#dom-inspection#network-monitor
One-click install
npx skills add https://github.com/josuenavarroaguado/josuenavarroaguado.github.io --skill browser-testing-with-devtools-josuenavarroaguado
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/josuenavarroaguado/josuenavarroaguado.github.io/tree/main/.github/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/josuenavarroaguado/josuenavarroaguado.github.io --skill browser-testing-with-devtools-josuenavarroaguado

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill bridges the gap between static code review and live browser behavior by giving an agent direct visibility into the rendered page, DOM, console output, network activity, screenshots, and performance traces so you can diagnose and verify UI issues with real runtime data.

Core Features & Use Cases

  • Live DOM inspection: Read the actual DOM tree to verify component rendering and structure.
  • Console and network analysis: Capture console errors/warnings and monitor network requests and responses to diagnose API or runtime failures.
  • Visual verification: Capture before/after screenshots for visual regression checks and responsive layout validation.
  • Performance profiling: Record traces for LCP, CLS, INP, and long tasks to find rendering and performance bottlenecks.
  • Safe JS execution: Run constrained, read-only JavaScript in page context for state inspection while enforcing strict no-exfiltration and no-credential rules.
  • Use case: Reproduce a reported UI glitch, inspect the element, check related network calls, capture a screenshot, and confirm the fix in the browser.

Quick Start

Open the target site in a Chrome DevTools MCP session, reproduce the issue, take a screenshot, list console errors, inspect the DOM for the problematic element, and capture relevant network requests for review.

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 inspect live DOM elements to debug a browser-rendered UI?▼

Live DOM inspection captures the actual rendered DOM tree to verify component structure and diagnose UI bugs. It reads runtime page elements directly, allowing you to isolate rendering failures and confirm component mounting during development or QA.

Can I capture console logs and monitor network requests to reproduce a UI glitch?▼

Console and network monitoring captures runtime errors, warnings, and API interactions to diagnose failures. You can reproduce the issue, list console errors, and inspect related network calls to pinpoint the root cause of front-end bugs.

What is browser performance profiling for front-end web pages?▼

Browser performance profiling records runtime traces for LCP, CLS, INP, and long tasks to identify rendering bottlenecks. It analyzes front-end performance metrics to find specific layout shifts and slow interactions affecting user experience.

Does Chrome DevTools MCP support restricted JavaScript execution for state inspection?▼

Yes, it runs constrained, read-only JavaScript in the page context for safe state inspection. It enforces strict no-exfiltration and no-credential rules, requiring explicit user confirmation for any navigations or DOM mutations.

What is the best way to perform visual regression checks on responsive layouts?▼

Capturing before and after screenshots provides visual verification for responsive layouts and regression checks. It compares rendered page states directly, confirming that UI fixes and component changes display correctly across different viewports.

Related Skills

Explore More Software Engineering Skills→
sc30gswsc30gsw
11

chrome

Orchestrate Chrome DevTools MCP for DOM inspection, network monitoring, and automated browser interactions.

Community
Advanced
mattdurhammattdurham
9

debugger

Collect logs and traces to diagnose software issues and write reports to bots/debug.md.

Community
Advanced
teimurjanteimurjan
330

blazediff

Automate end-to-end visual regression testing for web applications.

Community
Advanced
tfsugjptfsugjp
3

web-design-reviewer

Inspect web pages and apply source-level fixes for visual design issues.

Official
Intermediate