DevRecorder Documentation

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.

Comments & reactions

Leave time-stamped comments at any point during playback. Team members can reply to start threaded conversations and react with emoji to quickly acknowledge or flag moments.

• Time-stamped each comment is anchored to a specific moment in the recording. Click the timestamp to jump straight there.
• Threaded replies reply to any comment to keep context organized
• Emoji reactions react with any of the 8 built-in emoji to quickly signal agreement, urgency, or a fix

This feature can be toggled per organization. Go to Dashboard → Settings and flip the Enable Comment Replay switch. When disabled, the comment panel is hidden and comment creation is blocked for all recordings in your organization.

Project Management Integrations

Create issues and tickets directly from recordings.

DevRecorder integrates with Linear, Jira, ClickUp, and Trello. Connect once, then create tickets from any recording with one click — the description automatically includes console logs, network errors, and a link to the exact video frame.

Connect your integrations at Dashboard → Integrations.

Linear

Connect: Go to Integrations and click Connecton the Linear card. You'll be redirected to Linear to authorize DevRecorder. Select your workspace and approve.

Create an issue: Open any recording, then in the sidebar click Create Linear Issue. A modal opens where you can:

• Select the team to create the issue in
• Set a title (pre-filled with the recording name)
• Edit the description (pre-filled with URL, duration, and link)
• Choose a priority (Urgent, High, Medium, Low)

The created issue appears as a linked task in the recording sidebar with a direct link to Linear.

Jira

Connect: Go to Integrations and click Connecton the Jira card. You'll be redirected to Atlassian to authorize. Make sure you have at least one Jira Cloud site — the connection will use the first available site.

Create an issue: Open any recording, then click Create Jira Issue in the sidebar. You can:

• Select the project to create the issue in
• Set a summary (pre-filled with recording name)
• Edit the description
• Choose a priority (Highest, High, Medium, Low, Lowest)

A DevRecorder label is automatically added to every created issue for easy filtering.

ClickUp

Connect: Go to Integrations and click Connect on the ClickUp card. Authorize DevRecorder in the ClickUp OAuth flow.

Create a task: Open any recording and click Create ClickUp Task. You can:

• Select a list from your workspace (organized by space and folder)
• Set a title and description
• Choose a priority (Urgent, High, Normal, Low)
• Set a due date

A DevRecorder tag is automatically added to the task.

Trello

Connect: Go to Integrations and click Connecton the Trello card. You'll authorize via Trello's token-based flow.

Create a card: Open any recording and click Create Trello Card. You can:

• Select a board and list
• Set a name and description
• Set a due date

A red DevRecorder label is automatically created on the board and attached to the card.

Disconnecting

To disconnect any integration, go to Integrations and click Disconnect on the connected card. This removes the access token — existing linked tasks on recordings are not affected.

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