BugTape blog

How to give Claude Code your browser console logs and network requests

Four ways to give Claude Code the console and failed requests: a saved DevTools log, a sanitized HAR, Chrome DevTools MCP, or an error tracker over MCP.

Claude Code does not see your browser until you connect one. There are five ways to give it the evidence. If you can make the bug happen on your own machine, save the console from DevTools and give Claude Code the file, export a HAR from the Network panel after you remove secrets, connect Claude Code to Chrome with its Chrome integration, or let the agent drive a local Chrome with Chrome DevTools MCP. If a real user hit the bug in production and you can't make it happen, you need a tool that recorded the console and network at the time and serves them over MCP. BugTape (our product) does that, and Sentry and PostHog also offer MCP servers. Jam offers one too, for bugs that a person recorded.

No account: npx -y bugtape --help prints the commands and does not sign you in. The demo MCP at https://app.bugtape.ai/demo/mcp needs no sign-in. Your own workspace needs one.

Page owner: Jaco Veldsman, hi@bugtape.ai. Last checked 26 October 2026. I build BugTape. Facts about other tools come from their own docs, linked below.

Option 1: save the console and give Claude Code the file

This works when you can reproduce the bug yourself.

1. Open DevTools on the broken page and go to the Console.
2. Turn on Preserve log. Chrome clears the Console on every page load by default. Turn on Log XMLHttpRequests too, so fetch and XHR requests show up in the same log (Chrome Console reference, checked 26 Oct 2026).
3. Reproduce the bug.
4. Right-click in the Console. In Chrome, Save as... writes every message to a plain .log file, and Copy console copies them to the clipboard. In Firefox, Export Visible Messages To has Clipboard and File (Firefox console messages, checked 26 Oct 2026).
5. Give the file to Claude Code. Type @ and the path, for example @logs/checkout.log, and ask it to find the cause. You can also paste the text, or pipe it in with cat checkout.log | claude -p "find the first error and the code that throws it" (Claude Code common workflows, checked 26 Oct 2026).

Limits

• The log comes from your browser. It shows nothing from a user's session.
• An @ reference includes the file only when it fits the Read tool's limit (25,000 tokens by default). Claude Code does not include a text file larger than 256KB. For a big log, give the path in plain text and ask Claude to search it.
• Console lines can hold tokens your app logged. Read the file before you share it.

Option 2: export a HAR and remove the secrets first

A HAR file holds the page's network requests: URLs, headers, status codes and timing.

1. Open the Network panel and reproduce the bug.
2. Click Export HAR (sanitized)... in the action bar, or right-click a request and choose Copy > Save all listed as HAR (sanitized). Chrome says the sanitized export leaves out sensitive information such as the Cookie, Set-Cookie and Authorization headers. An export with that data needs a setting turned on first: Settings > Preferences > Network > Allow to generate HAR with sensitive data (Chrome Network reference, checked 26 Oct 2026).
3. Check the file for secrets that Chrome does not remove. Tokens in query strings, custom API-key headers and request or response bodies can still be in it. Our HAR sanitizer helps with that step.
4. Save the cleaned file in your project and give Claude Code its path. A HAR is often larger than 256KB, so @ may not include it. Ask Claude to search the file for requests with a 4xx or 5xx status instead.

Limits: the HAR comes from your browser too, and it holds no console output or stack. Pair it with Option 1.

Option 3: connect Claude Code to Chrome

Claude Code has its own Chrome integration. Start Claude Code with claude --chrome. With the Claude in Chrome extension installed, Claude Code can "read console errors and DOM state directly, then fix the code that caused them". It opens new tabs in a visible Chrome window (Claude Code with Chrome, checked 26 Oct 2026).

You need:

• Chrome, Edge or another Chromium browser.
• The Claude in Chrome extension, version 1.0.36 or later.
• A direct Anthropic plan (Pro, Max, Team or Enterprise), and sign-in with /login.

Run /chrome to see the connection status.

Limits

• It reads your own browser. It can't see what happened in a user's browser.
• It shares your browser's login state, so it can reach every site you are signed in to.
• It does not work through Amazon Bedrock, Google Cloud's Agent Platform or Microsoft Foundry, and it is not supported in WSL.

Option 4: let Claude Code drive Chrome with Chrome DevTools MCP

Chrome DevTools MCP is an open-source (Apache-2.0) server published by the ChromeDevTools organization on GitHub (README, checked 26 Oct 2026). The agent opens pages, clicks and reads the console and network itself. Add it to Claude Code with the command from its docs (client configurations, checked 26 Oct 2026):

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Then ask Claude Code to open your local app and repeat the steps. Its tools include list_console_messages (with stack traces on request), list_network_requests and get_network_request (tool reference, checked 26 Oct 2026). Our comparison shows it next to BugTape.

Limits

• It inspects a Chrome on your machine. It can't see what happened in a user's browser.
• The server exposes the content of the browser to the MCP client (README, checked 26 Oct 2026).
• get_network_request shows request headers such as Cookie and response headers such as Set-Cookie (tool reference, checked 26 Oct 2026).
• The --isolated flag makes a temporary profile that the server removes when the browser closes (configuration, checked 26 Oct 2026). We suggest you keep the server away from a browser signed in to real accounts.
• Google collects usage statistics by default. The --no-usage-statistics flag turns this off.

Option 5: use an error tracker that records production bugs and serves them over MCP

Options 1 to 4 need you to make the bug happen. Many production bugs only happen to users, and nobody has DevTools open at that moment.

BugTape's browser capture runs on your site. It reports uncaught errors, failed requests after a user action and requests that hang, with nobody pressing a button. BugTape groups repeats into one issue. Your agent reads the failed request, the console, the stack and a replay of the page. BugTape rebuilds that replay from DOM events. It does not record screen video.

Connect Claude Code in one command:

npx -y bugtape connect claude

You get a link and a code. Open the link and click Allow. With OAuth instead:

claude mcp add --transport http bugtape https://app.bugtape.ai/mcp

Then run /mcp in Claude Code and choose BugTape (full steps). To try it with no account, add the read-only demo:

claude mcp add --transport http bugtape-demo https://app.bugtape.ai/demo/mcp

Ask the agent to call list_recommended_critical, then get_repro_context. Your agent reads the evidence and writes the fix. You review the pull request and ship it.

Limits

• The capture must be on your site before the bug happens.
• BugTape is hosted only.
• Servers send errors and stacks. They have no replay or console. The Swift SDK captures handled errors and breadcrumbs only.
• Screenshots and voice notes in the built-in report form are not available yet.
• MCP works on every plan. On Free and Prepaid credits, each agent read of a bug costs 2 credits, and Free includes 150 credits a month. On Pro, reads are free. See pricing.

Other tools with MCP servers. Sentry runs a hosted MCP server at https://mcp.sentry.dev/mcp for searching errors and triaging issues (Sentry MCP, checked 26 Oct 2026). Jam's MCP server at https://mcp.jam.dev/mcp gives agents the console logs and network requests from a Jam that a person recorded (Jam MCP, checked 26 Oct 2026). PostHog runs a free hosted MCP server at https://mcp.posthog.com/mcp (some tools that use AI can be billed as PostHog AI spend), and its docs show an agent pulling errors and stack traces (PostHog MCP, checked 26 Oct 2026). Claude Code's docs tell you to verify that you trust each server before you connect it, because servers that fetch outside content carry a prompt-injection risk (Claude Code MCP, checked 26 Oct 2026). Treat evidence from user sessions the same way, and keep a person reviewing every pull request.

Compare the five options

Jam needs a person to record the bug. The agent then reads the console and network from that recording.

A common loop uses two of them: read the user's failure from the tracker, reproduce it in Chrome with Claude Code or Chrome DevTools MCP, then check the fix there.

FAQ

How do I send console logs to Claude Code?

Save the console from DevTools (Save as... in Chrome, Export Visible Messages To > File in Firefox) and reference the file with @ in Claude Code. You can also paste the text or pipe the file in with claude -p. For bugs your users hit in production, connect an error tracker over MCP so the agent reads the console that was recorded at the time.

How do I capture console logs?

In DevTools, turn on Preserve log and Log XMLHttpRequests, reproduce the bug, then save or copy the messages. To capture logs from real users, you need code on your site that records them, such as BugTape's browser capture.

How do I send files to Claude Code?

Type @ followed by a relative or absolute path. Claude Code includes the file when it fits the Read tool's limit, and it does not include text files over 256KB. For bigger files, give the path and ask Claude to search the file.

How do I debug with Claude Code?

Give it the error, the steps to reproduce and the command that shows a stack trace. Claude Code's docs suggest saying whether the error is intermittent or consistent. For browser bugs, add the console and the failed request using one of the five options on this page.

See also

Bug report template for coding agents · Best bug reporting tools · Best error tracking MCP servers · What evidence a coding agent needs · BugTape vs Jam · BugTape vs Chrome DevTools MCP · LogRocket alternatives

Start free. No card needed.

Your team reviews the PR. Agents do not silent-ship.