To record your screen with console and network logs, open Chrome DevTools (F12), enable Preserve log and Capture screenshots in the Network panel, start a screen recorder, reproduce the bug, then export a HAR file for the network trace and copy the console output. Below are three free methods, from fully manual to one click.
Disclosure: Clipy is our product. We've kept this comparison factual and cite sources for competitor claims — tell us if anything is stale.
A screen recording shows what broke. Console errors and network requests show why. A 401 on the wrong endpoint, a null reference in a stack trace, a request that silently never fired — none of that is visible in a video alone. When you hand an engineer (or an AI coding agent) a recording plus the console and network trace, they skip the "can't reproduce" round-trip and go straight to the fix.
This guide covers three ways to bundle the two together, all free. Pick based on how often you do it: the manual DevTools method for a one-off, HAR export when the network trace is the whole story, and one-click tools when bug reports are a daily job.
What "console logs" and "network logs" actually mean
Console logs are the messages your browser and your app's JavaScript write to the DevTools Console — errors, warnings, stack traces, and any console.log() your code emits. See the Chrome DevTools Console reference and the MDN console API docs for the full surface.
Network logs are every HTTP request the page made: URL, method, status code, headers, timing, and response body. The portable, shareable form of a network log is a HAR file (HTTP Archive) — a JSON export of the whole session that any engineer can re-import into their own DevTools. Details are in the Chrome DevTools Network reference.
Now the three methods.
Method 1: Chrome DevTools + any screen recorder (the manual baseline)
This works everywhere, costs nothing, and requires no install beyond a recorder you already have. It's also the most tedious — you're driving two tools at once and stitching the artifacts together by hand. Learn it once; it's the fallback when nothing else is available.
- Open DevTools before you reproduce the bug. Press
F12, or right-click the page and choose Inspect. Open it first — DevTools only captures activity that happens while it's open. - Set up the Console tab. Click the Console tab. Open the settings gear and turn on Preserve log so messages survive page navigations and reloads. Optionally set the log level to include Verbose if you're chasing a subtle warning.
- Set up the Network tab. Click the Network tab. Tick Preserve log (so requests aren't cleared on reload) and Disable cache (so you see the real request path, not cached hits). Open the Network panel's settings gear and enable Capture screenshots if you want a per-request filmstrip inside the HAR.
- Start your screen recorder. Launch whatever recorder you have — the built-in OS tool, or a browser recorder. If you use Clipy's free Chrome screen recorder, you get an unlisted share link a couple of seconds after you hit Stop, with no watermark and no viewer sign-in wall.
- Reproduce the bug on camera. Narrate what you expect versus what happens. Trigger the failing action while recording so the timeline of your voice, the screen, and the DevTools panels line up.
- Capture the console. In the Console tab, right-click any message and choose Save as… to write the full log to a file, or select all and copy. Don't screenshot the console — a screenshot loses the stack traces an engineer needs to click into.
- Export the network trace. In the Network panel, click the Export HAR (sanitized) download button in the action bar (or right-click a request and choose Save all as HAR). See Method 2 for the sanitized-vs-sensitive detail.
- Bundle and share. Send the recording link, the
.harfile, and the console log together, with one line of context: the URL, the browser, and what you clicked.
The weakness here is obvious: eight steps, three artifacts, and it's easy to forget to open DevTools before the bug happens. Which is exactly why Methods 2 and 3 exist. For a deeper walkthrough of packaging these logs for an engineer, see how to share console logs with a developer.
Method 2: Export a HAR file + a separate recording
When the bug is fundamentally a network problem — a failing API call, a CORS error, a request that returns 200 but with the wrong body — the HAR file is the star and the video is supporting evidence. This method zooms in on getting a clean, complete HAR.
- Open the Network panel and reload the page with DevTools open so the panel records the full request waterfall from the first byte.
- Reproduce the failing request. Keep Preserve log on so navigations don't wipe the trace.
- Export the HAR. Click Export HAR (sanitized) in the Network panel's action bar, or right-click any request and choose Copy → Save all as HAR (sanitized).
A critical caveat on privacy: as of Chrome 130 (verified July 2026), the default HAR export is sanitized — it strips Cookie, Set-Cookie, and Authorization headers so you don't accidentally leak session tokens. If an engineer genuinely needs those headers to debug an auth issue, one of you must enable Settings → Preferences → Network → Allow to generate HAR with sensitive data and then export Save all as HAR (with sensitive data). Treat that file like a password — it can contain live credentials. The Chrome DevTools Network reference documents both paths.
- Record the reproduction separately. Run a short screen recording that shows the user-facing symptom, then attach it next to the HAR.
HAR files re-import cleanly: the receiving engineer opens DevTools, drags the .har into the Network panel, and inspects every request as if they'd captured it themselves. The friction is the same as Method 1, though — two artifacts, manually assembled, and the console log is a third thing you still have to grab by hand.
Method 3: One-click tools that capture the video and logs together
If you file or receive bug reports regularly, doing Methods 1 and 2 by hand every time is a tax. Purpose-built tools attach console and network logs to the recording automatically, so a bug report is one click instead of eight steps and three files.
Clipy
Clipy is a free screen recorder built around one idea: record it once, humans watch it and agents fix it. Clipy's Chrome extension captures console and network logs automatically in one click alongside the video — you don't open DevTools, you don't export a HAR, you just record. Clipy attaches captured console/network logs to the same share link humans and agents read, so a teammate gets the playable video and an engineer (or an AI coding agent) gets the technical trace from the same URL.
That last part is Clipy's real difference. Every clipy.online/video/<id> link is also fetchable as a machine-readable .md document (append ?format=md or .json) containing the AI summary, action items, key moments with extracted frames and click coordinates, and the full transcript. An agent like Claude Code or Cursor can read the recording directly — no MCP setup required — via the Clipy agent skill. For private recordings and library search there's also a hosted MCP server (npx -y @clipy/mcp). Clipy is free forever: unlimited length, up to 4K, no watermark, no viewer sign-in.
Jam
Jam is the most mature browser-based bug-capture tool and the closest competitor here. Its free Chrome extension auto-captures console logs, network errors, user actions, and device metadata with one click, and it ships Jira/Linear integrations plus MCP debugging support. Real limits, as of July 2026 (verified on Jam's pricing page): the free tier caps recordings at 5 minutes and 30 Jams per month; the Team plan is $14/creator/month billed yearly and raises recordings to 15 minutes. Jam is browser-only — it captures the tab, not your whole desktop or a native app.
The three methods compared
| Method 1: DevTools + recorder | Method 2: HAR export | Method 3: One-click (Clipy / Jam) | |
|---|---|---|---|
| Console logs | Manual copy/save | Not included | Automatic |
| Network trace | Manual HAR export | HAR export (the focus) | Automatic |
| Video | Separate recorder | Separate recorder | Bundled with logs |
| Artifacts to assemble | 3 | 2 | 1 link |
| Recording length | Unlimited | Unlimited | Clipy: unlimited · Jam free: 5 min |
| Cost | Free | Free | Clipy: free · Jam: free / $14/mo |
| Agent-readable output | No | No | Clipy: yes (.md link) |
When to use which method
- One-off bug, no tooling installed: Method 1. It's tedious but works on any machine with Chrome.
- The bug is a network failure: Method 2. A clean HAR is the highest-signal artifact you can hand an engineer for an API or CORS problem.
- Bug reports are a routine part of your work, or an AI agent is going to read the report: Method 3. The one-click tools remove the assembly tax, and Clipy's agent-readable link means a coding agent can pull the recording's transcript and key moments straight into its context.
Whichever you pick, the principle is the same: a video plus the console and network trace turns "it's broken, I don't know why" into a report someone can act on without asking you to reproduce it again.
FAQ
How do I record my screen with console logs for free?
Open Chrome DevTools (F12), enable Preserve log in both the Console and Network tabs, start any free screen recorder, reproduce the bug on camera, then save the console output and export a HAR file. All three artifacts are free to capture. One-click tools like Clipy and Jam bundle the video and logs automatically.
What is a HAR file and how do I export one?
A HAR (HTTP Archive) file is a JSON export of every network request a page made — URLs, status codes, headers, timing, and bodies. In Chrome DevTools, open the Network panel and click Export HAR (sanitized), or right-click a request and choose Save all as HAR. The engineer receiving it can drag it back into their own DevTools to inspect every request.
Do I need to open DevTools before or after the bug happens?
Before. Chrome DevTools only records console messages and network requests that occur while it's open. Open DevTools first, turn on Preserve log so nothing is cleared on reload, and then reproduce the bug.
Is the exported HAR file safe to share?
By default, yes — since Chrome 130 the standard export is sanitized and strips Cookie, Set-Cookie, and Authorization headers. If you deliberately export with sensitive data, the file can contain live session tokens and should be treated like a password.
Can an AI coding agent read a recording's console and network logs?
With Clipy, an agent can read the recording's summary, key moments, and transcript directly from the share link (as a fetchable .md document) with no MCP setup, and there's also a hosted MCP server for private recordings. Jam exposes its recordings to agents through its own MCP integration.