skills.rest
jankneumann
jankneumannCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

browser-testing-with-devtools

Capture browser runtime evidence including screenshots, DOM state, console logs, network requests, accessibility trees, and performance traces.

Updated Apr 12, 2026
Search Tags:#debugging#mcp#devtools#ui testing#browser#console monitoring#performance tracing
One-click install
npx skills add https://github.com/jankneumann/agentic-assistant --skill browser-testing-with-devtools-jankneumann
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-testing-with-devtools
Source: https://github.com/jankneumann/agentic-assistant/tree/main/.agents/skills/browser-testing-with-devtools
Command: npx skills add https://github.com/jankneumann/agentic-assistant --skill browser-testing-with-devtools-jankneumann

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents UI regressions by letting agents inspect and validate what actually happens in a live browser at runtime, including DOM structure, console errors, network traffic, and performance signals.

Core Features & Use Cases

  • Real-browser runtime verification: Screenshot capture, DOM inspection, and accessibility tree checks to confirm the rendered UI matches expectations.
  • Debugging for browser-side failures: Console log collection and network monitoring to pinpoint errors, failed requests, and payload/response mismatches.
  • Performance validation: Performance traces to measure Core Web Vitals signals and identify long tasks or bottlenecks in the real rendering pipeline.

Use Case: When a UI change appears fine in code review but breaks in production, the agent can reproduce the flow in a real browser, verify the DOM and accessibility output, confirm API calls in the Network panel, and ensure performance metrics did not regress.

Quick Start

Ask the parent testing or debugging skill to "verify in the browser" for the specific page and scenario that should work.

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 using real browser runtime evidence?▼

Validate UI regressions by capturing real browser runtime evidence like screenshots, DOM state, and console logs. This confirms that the rendered UI matches expectations and reproduces production flows to pinpoint exact errors.

Can I capture network requests and console logs to diagnose failing client-side requests?▼

Yes, you can collect console logs and monitor network traffic to diagnose failing client-side requests. This captures failed requests, console errors, and payload or response mismatches directly from the live browser environment.

What is the best way to validate browser performance regressions for rendered features?▼

Validate performance regressions by capturing performance traces to measure Core Web Vitals signals. This identifies long tasks and rendering bottlenecks within the real rendering pipeline of browser-rendered features.

Does browser testing with DevTools require the Chrome DevTools MCP toolchain?▼

Yes, browser testing with DevTools requires using Chrome DevTools via the Chrome DevTools MCP toolchain. It enforces explicit security boundaries for navigation and JavaScript execution while treating browser-derived content as untrusted.

What security limitations apply when executing JavaScript during browser UI testing?▼

When executing JavaScript during browser UI testing, all browser-derived content is treated as untrusted data. The agent must follow explicit security boundaries for navigation and JavaScript execution to prevent unsafe operations.

Related Skills

Explore More Software Engineering Skills→
d0whc3rd0whc3r
2

browser-testing-with-devtools

Inspect DOM, console, network, and performance in Chrome DevTools.

Community
Intermediate
harishgovardhandamodarharishgovardhandamodar

browser-testing-with-devtools

Inspect live web applications with Chrome DevTools MCP for debugging.

Community
Advanced
pyinxpyinx
14

webapp-testing

Automate end-to-end testing of local web applications with Python Playwright.

Community
Intermediate
brucesongsbrucesongs
60

browser-qa

Automates browser-based security testing using Playwright and devtools.

Community
Advanced