DevRecorder
Sign inGet started
DevRecorder - Screen recorder with console, network, errors & annotations | Product Hunt
v1.2.1 · Now on Chrome Web Store

Record. Debug.
Ship faster.

The only screen recorder that captures your console, network, and navigation events on the same timeline as the video. Built for engineers who are tired of "works on my machine."

Add to Chrome Free
No credit cardPrivate by defaultMCP-ready for Claude, Cursor, Windsurf
devrecorder.com/recordings/r_8c2f9a
1:24 / 2:08
REC · 01:24
localhost:3000
localhost:3000/checkout
00:00 02:08
→ /
GET /api/me 200
log: cart
POST /checkout
warn
→ /pay
TypeError
log
POST /pay 500
log: retry
00:48/ 02:08
REC 00:01 · session_8c2f9a startedLOG fetched cart [items: 3]NET GET /api/me · 200 · 84msNAV → /checkout/payNET POST /checkout/intent · 200 · 132msERR TypeError: cannot read 'token' of undefinedLOG retry attempt 1 in 800msNET POST /pay/charge · 500 · 2.1sOK recording uploaded · 4.2MB · 02:08SHARE devrecorder.com/r/8c2f9a → copiedREC 00:01 · session_8c2f9a startedLOG fetched cart [items: 3]NET GET /api/me · 200 · 84msNAV → /checkout/payNET POST /checkout/intent · 200 · 132msERR TypeError: cannot read 'token' of undefinedLOG retry attempt 1 in 800msNET POST /pay/charge · 500 · 2.1sOK recording uploaded · 4.2MB · 02:08SHARE devrecorder.com/r/8c2f9a → copied
/ Features

Everything you need to debug recorded, synced, shareable.

Stop flipping between DevTools tabs and screen recorders. DevRecorder captures the video, the logs, and every request all locked to the same timeline.

Synchronized timeline

Every log, request, and route change is anchored to the video frame. Scrub to a bug, see what the app saw.

log
/api
→
err
/checkout
warn

Window or region

Pick a window or draw a region. Only what matters makes it into the recording.

964 × 540

Every console.log captured

Logs, warnings, errors with the full stack and arg payloads preserved exactly as DevTools would show them.

00:14.2›cart.items = [{ id: 12, qty: 2 }]
00:18.7↗POST /api/checkout 200
00:24.1⚠deprecated: fetchUser() use getUser()
00:31.5✕TypeError: cannot read 'token' of undefined
00:33.0✕ at PayButton (pay.tsx:42)

Full network requests, recorded

Headers, payloads, response bodies, timings like DevTools, but locked to the frame you were looking at.

GET/api/user/me200 OK84ms
POST/api/checkout/intent200 OK132ms
POST/api/pay/charge500 ERR2.1s
GET/api/cart200 OK56ms

Navigation events

Every route change in SPAs and traditional pages. Replay the path the user actually took.

/→/products→/cart→/checkout/pay

Voice narration

Talk through the bug. Add mic audio without leaving the recorder.

AI assistants get full context

Connect via MCP your AI sees the video, logs, and network. Drag a recording into Cursor and it knows what broke.

Claude Code Cursor Windsurf VS Code MCP server

Time-stamped comments & reactions

Leave comments at any point in the recording timeline. Team members can reply, react with emoji, and jump straight to the moment you flagged. Enable or disable per organization from Settings.

01:24"The spinner never stops here"👍 3🔥 1
01:24"Looks like the /api/checkout call hangs"🚀 2
02:07"Error toast pops up after retry"👀 2❤️ 1
/ How it works

From bug to share-link in 30 seconds.

No setup. No login. No "what browser are you on?" Just record, share, and let your team see exactly what happened.

Step

Install once.

Add the DevRecorder extension from the Chrome Web Store. One click, zero config.

DevRecorder
Chrome extension · 2.4 MB
Add
Step

Hit record, reproduce.

Click the dot. Reproduce the bug. Console, network, and navigation are captured automatically.

Recording…console · network · nav · mic
Step

Share the link.

Get a shareable URL. Your team views the video with synchronized debug data no login required.

✓devrecorder.com/r/8c2f9aCopy
KML+3
/ The synced view

Click an event. Jump to the frame.

Errors aren't just lines in a log anymore they're moments in a video. Click any event in the timeline and the player jumps to the exact second it happened.

recordings/checkout-bug-r_8c2f9a
Public
01:24 / 02:08
app.acme.com/checkout
app.acme.com/checkout/pay
00:00 02:08
log
GET /me
→ /cart
POST /checkout
err
POST /pay
w
retry
01:11/ 02:08

Events at this frame

01:11
01:09.4↗POST /api/pay/charge → 500
01:09.8✕TypeError: cannot read 'token'
01:10.0✕ at PayButton (pay.tsx:42)
01:10.0✕ at renderWithHooks
01:11.2›retry attempt 1 in 800ms
01:11.4⚠Sentry: captured payment-failed
Synced to recording timelineLive
/ Reviews

Loved by developers & founders.

Real feedback from real people shipping real products.

P
Pervez Ali
Founder, Markury
Product Hunt

"Super useful idea!"

Roman Milyushkevich
Roman Milyushkevich
CEO, HasData
Product Hunt

"That's cool! I'll give it to our customers when they reach out with problems inside the product, so they can record the video and we can see what's going on. Now I'm asking: 'do you have an adblock? please disable it', 'could you send a screenshot of the errors in the dev tools console if there any' and etc. Love the idea!"

Zahidul Islam
Zahidul Islam
Founder, Evendeals
Chrome Web Store

"I got a devrecorder link from my QA and I could see the network requests in real time, it was super easy to debug. Highly recommended!"

/ Pricing

Start free. Stay free, or scale up.

No seat math, no asterisks. Pick a plan that matches how much you record. Cancel anytime.

Free

$0/forever
No credit card required
  • 5 recordings
  • 500 MB storage
  • 5 min max duration
  • 1 team member
  • Console & network capture
  • Share links

Pro

$9/mo
Billed monthly, cancel anytime
  • Unlimited recordings
  • 25 GB storage
  • 15 min max duration
  • 5 team members
  • Console & network capture
  • Response body capture
  • Share links
  • Download recordings

Enterprise

$14/mo
Billed monthly, cancel anytime
  • Unlimited recordings
  • 200 GB storage
  • 60 min max duration
  • 15 team members
  • Console & network capture
  • Response body capture
  • Share links
  • Download recordings
  • Priority support
  • Custom branding
/ FAQ

Questions, answered.

Still curious? Talk to us.

What does DevRecorder actually record? +
Screen video (full window or a region you draw), browser console logs (log, warn, error with stack traces), network requests with headers/payloads/responses/timings, page navigations and SPA route changes, and optional microphone audio all anchored to the same timeline.
Is the free plan actually free? +
Yes. 5 recordings per month, 500MB storage, 5-minute max length. No credit card, no expiring trial. You only upgrade when you need more.
How do shared recordings work? +
Toggle a recording to public and copy the link. Whoever opens it sees the video with the full synchronized debug timeline they don't need an account, an extension, or DevTools.
Does it work on localhost & staging? +
Yes. DevRecorder works on any URL you visit in Chrome localhost:3000, staging.acme.com, production. Same capture, same timeline.
What about AI / MCP? +
Run our MCP server and any compatible assistant Claude Code, Cursor, Windsurf, VS Code can read your recordings as structured context. Paste a link, ask "what broke?" and it sees the video, logs, and requests together.
Is my data secure? +
All recordings are private by default and encrypted in transit and at rest. Storage runs on Cloud Storage. Only people you explicitly share with can view a recording unless you mark it public.
/ Ready when you are

Record your first bug in 30 seconds.

Free forever for 5 recordings/mo. No setup, no credit card. Add it to Chrome and you're in.