Getting Started

Get DevRecorder running in under 5 minutes.

1. Create an account

Sign in with your Google account. Your organization and API token are created automatically.

2. Install the Chrome extension

Download DevRecorder from the Chrome Web Store and pin it to your toolbar. Click the extension icon and sign in — it will connect to your account automatically.

3. Start your first recording

Click the DevRecorder icon, choose Window or Region mode, and hit Record. Console logs, network requests, and navigation events are captured automatically alongside the video.

When you're done, click Stop. The recording uploads to your dashboard.

Recording

Capture modes and what gets recorded.

Capture modes

• Window mode — records the entire browser window
• Region mode — drag to select a specific area of the page

What gets captured

• Console logs — log, warn, error, info, debug with full stack traces
• Network requests — method, URL, status, headers, request/response bodies, timing
• Navigation events — page transitions and SPA route changes

You can pause/resume recordings and add microphone audio for narration. Sensitive headers (Authorization, cookies) are automatically redacted.

Playback & Sharing

View, filter, and share your recordings.

Timeline panel

Open any recording from your dashboard to see the video player with a synchronized timeline panel. Click any event to jump to that point in the video.

• Filter events by type (console, network, navigation)
• Inspect full network request/response details
• View stack traces for console errors

Sharing recordings

Toggle a recording to public in your dashboard and copy the shareable link. Viewers see the video with all synchronized debug data — no login required.

MCP Integration

Connect DevRecorder to your AI coding tools.

Overview

DevRecorder exposes an MCP (Model Context Protocol) server so your AI coding tools can access your recorded errors, console logs, and network requests — directly in your development workflow.

Ask your AI assistant "what errors happened in my last recording?" and it will fetch the real data from your DevRecorder account.

Your MCP endpoint:

https://devrecorder.com/api/mcp

All requests require your API token as a Bearer token. Get your ready-to-copy config at Dashboard → Integrations.

Connect to Claude Code

Two ways to connect.

Option A: One command

Run this in your terminal:

claude mcp add-json devrecorder '{"type":"http","url":"https://devrecorder.com/api/mcp","headers":{"Authorization":"Bearer YOUR_API_TOKEN"}}'

Option B: Config file

Add to .mcp.json in your project root:

{
  "mcpServers": {
    "devrecorder": {
      "type": "http",
      "url": "https://devrecorder.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_TOKEN"
      }
    }
  }
}

Or add globally to ~/.claude/settings.json under the mcpServers key. Restart Claude Code to activate.

Connect to Cursor

Add MCP config for Cursor.

Add to .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "devrecorder": {
      "url": "https://devrecorder.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_TOKEN"
      }
    }
  }
}

Or add globally to ~/.cursor/mcp.json. Restart Cursor to activate.

Connect to Windsurf

Add MCP config for Windsurf.

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "devrecorder": {
      "serverUrl": "https://devrecorder.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_TOKEN"
      }
    }
  }
}

Restart Windsurf to activate.

Connect to VS Code

Add MCP config for VS Code Copilot.

Add to .vscode/mcp.json in your project:

{
  "mcpServers": {
    "devrecorder": {
      "type": "http",
      "url": "https://devrecorder.com/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_TOKEN"
      }
    }
  }
}

Reload the window (Cmd+Shift+P → Reload Window) to activate.

MCP Tools Reference

All available tools your AI assistant can use.

API Token

Authentication for extensions and integrations.

Your API token authenticates requests from the Chrome extension and MCP integrations. Find and copy it at Dashboard → Integrations.

• Each user has a unique token
• The token scopes access to your organization's recordings only
• Keep it private — it grants read access to your recorded data