Browser Debugging

Browser Debugging Skill

Drive a real (headless) Chromium against the running NXTG-Forge dashboard from inside Claude Code, using the Playwright MCP server. No Windows Chrome dependency — Playwright launches its own headless Chromium inside WSL.

Where the tools come from (read first)

The Playwright MCP server is registered in forge-ui/.mcp.json, NOT in the plugin's .mcp.json (which only registers governance / orchestrator / semgrep). The browser_* tools only exist when a Claude Code session has forge-ui/.mcp.json loaded — i.e. you are working in the forge-ui/ repo. From the plugin repo alone they are unavailable. Config as shipped:

"playwright": { "command": "npx", "args": ["@playwright/mcp@latest", "--headless", "--console-level", "debug"] }

Two consequences of that exact config:

• --console-level debug → browser_console_messages returns verbose debug logs, not just errors. Filter for error/warning yourself; do not assume a clean-looking tail means no errors.
• No --caps flag → the pdf, vision (coordinate clicks/screenshots), and devtools capabilities are OFF. browser_pdf_save and coordinate-based interaction are not available here.

Prerequisites

Start both servers from forge-ui/ (one command starts Vite :5050 + Express API :5051):

cd forge-ui && npm run dev

Confirm they're up before driving the browser:

curl -sf http://localhost:5050 >/dev/null && echo "UI up"
curl -sf http://localhost:5051/api/health >/dev/null && echo "API up"

Core tools (Playwright MCP)

Task	Tool
Go to a URL	browser_navigate
Get the DOM as an accessibility tree (+ element refs)	browser_snapshot
Capture the page as an image	browser_take_screenshot
Read console output	browser_console_messages
List HTTP requests the page made	browser_network_requests
Wait for text / state (not a fixed sleep)	browser_wait_for
Click / type on a snapshot element	browser_click / browser_type (need a ref)
Run JS in page context	browser_evaluate
Multiple tabs	browser_tabs (single tool, action arg)