browser-debugger

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

22|2|Updated Mar 24, 2026

Search Tags:#debugging #evidence #browser #cross-browser #reproduction #dom #network-logs

Ready to run

npx skills add https://github.com/jshsakura/awesome-opencode-skills --skill browser-debugger-jshsakura

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: browser-debugger
Source: https://github.com/jshsakura/awesome-opencode-skills/tree/main/skills/browser-debugger
Command: npx skills add https://github.com/jshsakura/awesome-opencode-skills --skill browser-debugger-jshsakura

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates browser-based reproduction and evidence collection for UI bugs, enabling faster diagnosis and higher quality releases.

Core Features & Use Cases

Evidence-driven browser debugging: capture exact reproduction steps, environment context, and user interactions.
Network, console, and DOM analysis: collect request/response data, console errors, and DOM/state transitions to diagnose failures.
Cross-browser/viewport validation: identify differences in behavior across browsers and screen sizes to prevent flaky UX.

Quick Start

Describe exact steps to reproduce the issue in a browser, including environment, inputs, and expected vs actual results, then collect network logs, console errors, and DOM/state transitions.

Frequently Asked Questions about browser-debugger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I collect evidence for reproducing flaky UI bugs?▼

To collect evidence for flaky UI bugs, describe exact reproduction steps including environment, inputs, and expected versus actual results. This process captures network logs, console errors, and DOM transitions to diagnose failures.

How does browser debugging help diagnose network-related client-side bugs?▼

Browser debugging diagnoses network-related client-side bugs by collecting request and response data alongside console errors. This evidence-driven approach captures exact user interactions and environment context to pinpoint failures.

Can I validate cross-browser differences across various viewport sizes?▼

Yes, you can validate cross-browser differences across various viewport sizes. This process identifies differences in behavior across browsers and screen sizes to prevent flaky UX and ensure consistent layouts.

Do I need manual browser environment access to capture DOM state snapshots?▼

Yes, manual browser environment access is required to capture DOM state snapshots. This access enables the collection of reproducible steps, network traces, console logs, and state transitions needed to guide fixes.

What's the best way to capture network traces and console logs for layout issues?▼

The best way to capture network traces and console logs for layout issues is by automating browser-based reproduction. This method collects request data, console errors, and DOM state transitions to guide fixes.

Why does UI behavior change across different browsers and screen sizes?▼

UI behavior changes across different browsers and screen sizes due to varying rendering engines and viewport dimensions. Cross-browser validation identifies these differences in behavior to prevent flaky UX during client-side interactions.