Guides · Bugs and AI coding agents

How to give your AI coding agent browser console and network logs

Updated Sep 23, 2026

Either let the agent drive a browser itself (Cursor's browser tool, Claude in Chrome, Chrome DevTools MCP), or record the bug once and hand the agent the recording over MCP. Live tools are best when the agent can reproduce the bug on your machine. A recording is the only option when the bug already happened, or happened to someone else.

The three options

They are not either/or. A common loop: someone records the bug, the agent reads the recording to find the cause, then uses a live browser to check the fix.

Option 1: let the agent open the page

Cursor has a built-in browser tool. The agent opens your dev server, clicks through it, and reads console messages and network requests on its own. Claude Code does the same through the Claude in Chrome extension: install it, start a session with claude --chrome, and Claude can read the console, network requests and DOM of the tabs it works in.

This is the least setup. It works when the agent can reproduce the bug by itself: your local app, a route it can reach, no special account state.

Option 2: connect a DevTools MCP server

Chrome DevTools MCP gives the agent the DevTools protocol: list_console_messages, list_network_requests, screenshots, performance traces. By default it starts its own Chrome with a separate profile, so you're not logged in there. On Chrome 144+ you can point it at your normal browser with --autoConnect after enabling remote debugging at chrome://inspect.

More detail on when this beats a recording, and when it doesn't: Chrome DevTools MCP vs a recorded bug report.

Option 3: record the bug once, serve it over MCP

The first two options need the bug to happen again, in front of the agent. Many don't: the race condition that shows up one time in five, the 500 a customer got on their account, the error a teammate saw on staging yesterday.

Roll records the tab and keeps the console, every fetch and XHR request with its body, and every click, on one timeline. When you stop, it writes a timeline.md that puts them in order:

t+00:02.14 · click   "Continue" · button.primary
t+00:02.31 · net     POST /v2/preferences → 500 · 2.5s
             res: {"error":"plan is undefined"}
t+00:07.02 · console TypeError: Cannot read properties
             of undefined (reading 'plan')
             at PreferenceForm (onboarding.tsx:142)

A local MCP server reads recordings straight from your disk. No cloud endpoint, no API key. Add it to Claude Code:

claude mcp add roll -- npx -y @rollapp.pro/mcp

Or to Cursor, in .cursor/mcp.json:

{
  "mcpServers": {
    "roll": {
      "command": "npx",
      "args": ["-y", "@rollapp.pro/mcp"]
    }
  }
}

Then ask the agent:

Open the latest Roll and tell me why checkout failed.

It calls get_timeline first, then get_network with failed_only: true and get_console with level: "error" for the detail. A published link like rollapp.pro/c/… works as the id too, so a bug a teammate recorded is one paste away. Full setup is in the MCP docs. To see what a recording holds before installing anything, open the live demo.

What to give the agent, whichever you pick

• The failed request, with its body. Status codes alone hide the cause. The body usually names it.
• Console errors with stacks, not just the message.
• What the user did right before, in order, with timestamps.
• The URL and environment: staging or production, browser, viewport.

If you're writing this by hand, use the bug report template for AI agents.