browser-debug

Browser Debug Skill

Comprehensive browser log capture for AI-led debugging using Chrome DevTools MCP.

Works with any Chromium-based browser: Dia, Chrome, Edge, Brave, Opera, etc.

When to Use This Skill

This skill auto-loads when:

• Debugging browser console errors
• Investigating network request failures (API errors, CORS issues)
• Analyzing page performance issues
• Reproducing and diagnosing user-reported bugs
• Conducting systematic browser debugging sessions
• Working with web applications during development

Browser Compatibility

✅ Supported Browsers (Chromium-based):

• Dia (primary - Chromium-based browser)
• Google Chrome
• Microsoft Edge
• Brave Browser
• Opera
• Vivaldi
• Any browser using Chrome DevTools Protocol

Why Chromium? These browsers all use the Chrome DevTools Protocol, which provides consistent debugging APIs across platforms.

Log Capture Workflow

Step 1: Initialize Session

Create timestamped session directory for organized log storage:

• Directory: ~/browser-logs/sessions/YYYYMMDD-HHMMSS-{page-description}/
• Symlink: ~/browser-logs/latest/ points to most recent session
• Configurable via ~/.claude/forge/config/browser-capture.yaml

Step 2: Capture Console Logs

Use Chrome DevTools MCP to capture all console messages with filtering:

Error messages (critical):

mcp__plugin_product-design_chrome-devtools__list_console_messages(
    pageIdx=0,
    pageSize=100,
    types=["error"],
    includePreservedMessages=True  # Last 3 navigations
)

Warnings (important):

mcp__plugin_product-design_chrome-devtools__list_console_messages(
    pageIdx=0,
    pageSize=100,
    types=["warn"],
    includePreservedMessages=True
)

All logs (context):

mcp__plugin_product-design_chrome-devtools__list_console_messages(
    pageIdx=0,
    pageSize=100,
    types=["error", "warn", "info", "log", "debug"],
    includePreservedMessages=True
)

Output files:

• console-error.log - Only errors
• console-warn.log - Only warnings
• console-all.log - All console output