Guides · Bugs and AI coding agents
How to give Claude Code your browser console logs
Updated Sep 23, 2026
Claude Code can read browser console logs through Claude in Chrome (run claude --chrome), through Chrome DevTools MCP, or through the Roll MCP server, which serves a recorded bug's timeline, console errors and failed requests from your disk. Add Roll with one command: claude mcp add roll -- npx -y @rollapp.pro/mcp.
1. Claude in Chrome (live)
Install the Claude in Chrome extension, then start Claude Code with:
claude --chrome
Claude can now open tabs, click, and read console output, network requests and the DOM while it works. Tell it what to look for ("check the console for errors after submitting the form") rather than asking for every log line, since console output gets long.
Use this when Claude can reproduce the bug itself, typically on your local dev server.
2. Chrome DevTools MCP (live)
Add the Chrome DevTools MCP server and Claude gets list_console_messages, list_network_requests, screenshots and performance traces. It launches its own Chrome with a separate profile unless you use --autoConnect with Chrome 144+. Good for performance work and anything where you want the raw DevTools protocol. When it beats a recording.
3. The Roll MCP server (recorded)
For the bug that won't happen on command, or happened to someone else, record it once and let Claude read the recording.
- Install Roll from the Chrome Web Store. It records the tab with console, network bodies and clicks. No account.
- Add the MCP server to Claude Code:
claude mcp add roll -- npx -y @rollapp.pro/mcp
- Record the bug: click Record, reproduce it, stop.
- Ask Claude: "Open the latest Roll and tell me why the save failed."
What Claude calls, in the order it usually calls them:
| Tool | Returns |
|---|---|
get_latest_jam | The most recent recording and its id |
get_timeline | Clicks, requests and errors merged in time order, as markdown |
get_network (failed_only: true) | Only the 4xx, 5xx and transport failures, with request and response bodies |
get_console (level: "error") | Errors with their stacks |
get_keyframes | A few JPEG stills, if Claude needs to see the screen |
Everything is read from ~/.trace/jams on your machine. A published rollapp.pro/c/… link works as the id, so you can paste a teammate's recording straight into the session. See the demo recording for what Claude gets, or the MCP docs for Codex and manual setup.
No tools at all?
Save the console (right-click → Save as), export a HAR from the Network tab, and describe the steps in order. The AI bug report template shows the structure Claude handles best.
Questions
Can Claude Code see my browser without an extension?
No. Claude Code runs in your terminal or editor. It needs a bridge: Claude in Chrome, a DevTools MCP server, or files it can read, such as a Roll recording on disk.
What's the difference between claude --chrome and the Roll MCP?
claude --chrome lets Claude drive your browser live and read the console as it goes. The Roll MCP gives Claude a recording of something that already happened: the clicks, requests and errors from a session you or a teammate captured. Many people use both, the recording to find the cause and the live browser to check the fix.
Will the recording flood Claude's context?
No. Claude reads timeline.md first, a short merged summary, and only pulls failed requests or error-level console entries when it needs them. The video never goes into context.
Does it work with Codex too?
Yes. The same MCP server works in Codex. Add a [mcp_servers.roll] block to ~/.codex/config.toml; the snippet is in the Roll MCP docs.