browser-debugging

Automate structured browser debugging escalation when tests pass but features fail.

Updated Feb 20, 2026
One-click install
npx skills add https://github.com/mdmagnuson-creator/yo-go --skill browser-debugging
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-debugging
Source: https://github.com/mdmagnuson-creator/yo-go/tree/main/skills/browser-debugging
Command: npx skills add https://github.com/mdmagnuson-creator/yo-go --skill browser-debugging

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This protocol provides a structured approach to diagnosing and escalating browser-specific issues when automated tests pass but the feature fails in the user’s browser.

Core Features & Use Cases

  • Evidence-based debugging workflow: Gather browser details, console logs, and environment data to identify whether failures are environment, runtime, or rendering related.
  • Guided diagnostics across environments: Use cross-browser checks, headed Playwright runs, and environment comparisons to isolate browser-specific problems.
  • Reproducible escalation: Inject diagnostic markers and preserve traces to reproduce issues in subsequent sessions.

Use Case: When tests pass in CI but a user in Chrome reports a visual discrepancy, this protocol steps through structured verification and reporting to pinpoint the root cause.

Quick Start

Initiate the escalation by collecting browser version, DevTools console logs, and a screenshot, then share findings with the debugging agent.

Frequently Asked Questions about browser-debugging

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

FAQPage Schema
How do I debug a browser bug when automated tests pass but the feature fails in the user's browser?

Browser debugging escalation works by applying a multi-level workflow that injects diagnostic markers and preserves traces to reproduce issues in subsequent sessions, isolating whether failures are environment, runtime, or rendering related.

How do I isolate a visual discrepancy reported in Chrome but not caught by CI tests?

To isolate a visual discrepancy in Chrome, initiate structured verification by collecting the browser version, DevTools console logs, and a screenshot, then use cross-browser checks and headed Playwright runs to compare environments and pinpoint the root cause.

Does this diagnostics protocol support cross-browser troubleshooting across different runtime and rendering environments?

Yes, the diagnostics protocol supports cross-browser troubleshooting by applying structured diagnostic steps and environment comparisons across different browsers, environments, and runtime versus rendering discrepancies to isolate browser-specific problems.

What data do I need to collect to escalate a browser-specific issue for diagnostics?

To escalate a browser-specific issue for diagnostics, collect the browser version, DevTools console logs, and a screenshot, then share these findings with the debugging agent to apply a structured, evidence-based debugging workflow.

Can I use Playwright to reproduce and diagnose browser-specific failures during escalation?

Yes, you can use Playwright to reproduce and diagnose browser-specific failures by running headed Playwright sessions as part of a guided diagnostics workflow to isolate rendering or runtime discrepancies across environments.

What is the best way to structure browser debugging escalation when automated tests pass but user reports fail?

The best way to structure browser debugging escalation is to apply a multi-level workflow with diagnostic markers and environment comparisons, gathering evidence-based data like console logs and browser details to isolate the root cause.