DevRecorder

What is DevRecorder?

DevRecorder is a screen recorder built for developers to capture debugging context alongside what happened in the UI. It records a video with a synchronized timeline of console logs, network requests, and navigation events so you can scrub to the exact moment a bug occurs.

The recorder also captures request/response details (including headers, payloads, and response bodies) and can add microphone audio while you talk through the reproduction. It’s designed to help teams share bug reports with full context using a shareable link.

Key Features

• Frame-synchronized debugging timeline: Logs, network, and route/navigation changes are anchored to the video frames, letting you scrub directly to the moment in the recording.
• Console capture with preserved details: Records console logs, warnings, and errors with full stack traces and argument payloads “exactly as DevTools would show them.”
• Network capture with DevTools-like fidelity: Captures full network requests with headers, payloads, response bodies, and timing information comparable to what DevTools displays.
• Navigation and route-change tracking: Records navigation events for SPAs and traditional page flows, so the recording reflects the path the user took.
• Mic narration support: Lets you add microphone audio during recording to explain what’s happening without leaving the recorder.
• Shareable link output (no login required to view): Produces a URL that teammates can open to see the video with synchronized debug data.
• AI assistant context via MCP: You can connect through MCP so an AI assistant can access the recording context (video, logs, and network). The page specifically mentions workflows such as dragging a recording into Cursor.

How to Use DevRecorder

1. Install the extension: Add the DevRecorder Chrome extension from the Chrome Web Store.
2. Start a recording: Click the record dot, then reproduce the issue you want to capture.
3. Record what matters: Optionally pick a window or draw a region so only the relevant part of your screen is included.
4. Verify the capture: As you reproduce, DevRecorder captures console output, network activity, and navigation events automatically (with mic narration if enabled).
5. Share for review: Use the share option to generate a shareable URL so your team can view the synchronized debug context.
6. (Optional) Send context to AI tools: Connect via MCP so supported AI tools can use the recording content.

Use Cases

• Reproducing a client-side error: Record while triggering a JavaScript/TypeError flow, then scrub to the precise frame where the error appears in console output.
• Debugging request/response mismatches: Capture a failing API call (including status, payload, headers, and response body) and correlate it to the UI state and timing shown in the video.
• Tracking SPA route transitions: When a bug appears after navigation (e.g., moving from products to cart to checkout), use the navigation events to confirm the user’s actual route path.
• Writing a narrated bug report: Record and speak through the reproduction steps, so reviewers can follow the reasoning while also seeing the underlying logs and network activity.
• Preparing AI-assisted analysis: Provide the recording context to an AI assistant connected via MCP, enabling the assistant to reference what happened in the video along with the recorded debug data.

FAQ

Does DevRecorder require a login to share recordings?

The page states that team viewers can open the shareable link without requiring a login.

What does DevRecorder capture during recording?

It captures synchronized console logs (including stack traces and arguments), network requests (including headers, payloads, response bodies, and timings), and navigation events, and it can include microphone narration.

Can I record only part of my screen?

Yes. The page describes picking a window or drawing a region so only the selected area is captured.

How do AI assistants get context from DevRecorder?

The site states that you can connect via MCP so the AI assistant can access the recording context (video, logs, and network). It also mentions dragging a recording into Cursor as an example workflow.

What browser setup is mentioned?

The installation guidance on the page is to add the DevRecorder extension from the Chrome Web Store.

Alternatives

• DevTools Performance/Network/Console recording workflow: Built into Chrome DevTools and focused on captured traces and network details; it typically requires manual export and correlation, rather than a single frame-synchronized video timeline.
• General-purpose screen recording tools with annotations: Tools that record video for tutorials/bug reproduction can be paired with separate log exporting, but they may not automatically synchronize console and network data to the video.
• Bug reporting tools that collect sessions (e.g., session replay): Session replay products capture user interaction timelines and sometimes network details; the emphasis is usually on user interactions rather than a DevTools-like capture of console/network with frame-locked correlation.