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.