Browser Debugging Tools

Some work cannot be verified by reading files.

For frontend tasks, Claude needs browser evidence: screenshots, console errors, network requests, layout state, and form behavior.

Useful tool categories

• Playwright MCP for driving a fresh browser, filling forms, and taking screenshots.
• Chrome DevTools MCP for console logs, network requests, performance data, and runtime inspection.
• Claude in Chrome, the built-in integration, for pages that need your login. Start it with claude --chrome and manage it with /chrome. Claude opens new tabs in your own Chrome or Edge, shares your signed-in state, and can read console errors and DOM state, fill forms, and record GIFs. It needs the Claude in Chrome extension and a Pro, Max, Team, or Enterprise plan. It is not available with API key authentication.

Playwright’s own README now points coding agents toward the Playwright CLI with skills as a more token-efficient option than the MCP server. Consider it if browser tool schemas are eating your context.

Good uses

• Reproduce a UI bug.
• Compare a screenshot to a design.
• Test a form flow.
• Inspect console errors.
• Check network failures.
• Verify responsive layouts.

Prompt pattern

Use browser tooling to open the local app, reproduce the bug,
capture a screenshot and console errors, then fix the issue.
Verify the page again before stopping.

Browser tools pair especially well with verification loops.