npm - @dynamicu/chromedebug-mcp - Versions diffs - 2.7.4 → 2.7.6 - Mend

@dynamicu/chromedebug-mcp 2.7.4 → 2.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/README.md +90 -658
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -3,170 +3,116 @@
 [![npm version](https://badge.fury.io/js/%40dynamicu%2Fchromedebug-mcp.svg)](https://www.npmjs.com/package/@dynamicu/chromedebug-mcp)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-ChromeDebug MCP is a Model Context Protocol (MCP) server that gives AI assistants like Claude Code full control over a Chrome browser instance. It provides comprehensive browser automation, debugging, and recording capabilities optimized for AI-assisted development.
+**Give your AI assistant eyes into your browser.** ChromeDebug connects Claude Code directly to Chrome, letting AI see, interact with, and debug web pages alongside you.
-**Key Features:**
-- **Multiple Recording Modes:** Screen recording, workflow recording, and screenshot recording with countdown
-- **Visual Element Selection:** Click to select elements and modify them via MCP tools
-- **Frame-by-Frame Capture:** High-quality screenshots with synchronized console logs
-- **Video Export (PRO):** Export recordings as MP4 videos with customizable settings
-- **Workflow Replay:** Record and replay user interactions for debugging
-- **100% Local:** All data stored locally - no cloud uploads
+## Why ChromeDebug?
-## 🎥 See It In Action
+- **Show, don't tell** - Record bugs instead of explaining them
+- **AI sees what you see** - Screenshots, console logs, and DOM in real-time
+- **Click to select** - Point at elements, let AI modify them
+- **100% private** - All data stays on your machine
-Watch the demo video to see how ChromeDebug MCP works:
+![ChromeDebug Extension](https://www.dynamicupgrade.com/images/chromedebug-popup.png)
-[![ChromeDebug MCP Demo](https://img.youtube.com/vi/2Y9nIsvEjks/0.jpg)](https://youtu.be/2Y9nIsvEjks?si=x5XjN0ZPHYhjZAqd)
+## Quick Start (2 minutes)
-**[▶️ Watch Demo Video](https://youtu.be/2Y9nIsvEjks?si=x5XjN0ZPHYhjZAqd)**
-## Quick Start
-### Installation from npm
+### 1. Install the MCP Server
 ```bash
-# Install globally
 npm install -g @dynamicu/chromedebug-mcp
-# Or install locally in your project
-npm install @dynamicu/chromedebug-mcp
 ```
-> **Want unlimited recordings and advanced features?** See [Installing PRO Version](#installing-pro-version) below for automated PRO installation.
-### Chrome Extension Installation
-Install the Chrome extension to enable visual element selection and recording features:
-🌐 **[Install from Chrome Web Store](https://chromewebstore.google.com/detail/chromedebug-mcp-assistant/lemgbmdnephoaniipapgeciebfeakffn)**
-- ✅ 5 recordings per day (FREE version)
-- ✅ Visual element selection
-- ✅ Screen, workflow, and screenshot recording
-- ✅ Frame viewer with console logs
-- ✅ Full MCP integration
-- ✅ Automatic updates
-### Development Installation
+### 2. Add to Claude Code
 ```bash
-# Clone and install from source
-git clone https://github.com/dynamicupgrade/ChromeDebug.git
-cd ChromeDebug
-npm install
+claude mcp add chromedebug -s user -- chromedebug-mcp
 ```
-## Installing PRO Version
-ChromeDebug PRO adds advanced features including:
-- **Unlimited recordings** - No daily recording limits
-- **Export as ZIP/MP4** - Download recordings as image archives or videos
-- **Function call tracking** - Record and replay function execution traces
-- **Advanced debugging** - Enhanced breakpoint and inspection capabilities
-- **Clean exports** - No watermarks on images or videos
-- Priority support and updates
+### 3. Install Chrome Extension
-### 🎥 PRO Installation Video
+🌐 **[Install from Chrome Web Store](https://chromewebstore.google.com/detail/chromedebug-mcp-assistant/lemgbmdnephoaniipapgeciebfeakffn)** (FREE)
-Watch the step-by-step installation guide:
+That's it! Ask Claude to "launch Chrome" and start debugging.
-[![ChromeDebug PRO Installation Guide](https://img.youtube.com/vi/TBjj5FA8DRg/0.jpg)](https://youtu.be/TBjj5FA8DRg)
+---
-**[▶️ Watch PRO Installation Guide](https://youtu.be/TBjj5FA8DRg)**
+## Features
-### Installation Steps
+### 🎬 Three Recording Modes
-After purchasing ChromeDebug PRO from [LemonSqueezy](https://chromedebug.com/checkout/buy/996773cb-682b-430f-b9e3-9ce2130bd967):
+| Mode | What it does | Best for |
+|------|--------------|----------|
+| **Screen Recording** | Captures video + console logs | Bug reports, demos |
+| **Workflow Recording** | Records clicks, inputs, screenshots | Step-by-step debugging |
+| **Screenshot Recording** | Click-to-capture with countdown | Dropdowns, modals, dynamic content |
-1. **Download your PRO extension** from the purchase confirmation email (you'll receive a ZIP file named `chromedebug-extension-pro.zip`)
-2. **Run the installer**:
-   ```bash
-   chromedebug-mcp install-pro \
-     --license YOUR_LICENSE_KEY \
-     --extension-path ~/Downloads/chromedebug-extension-pro.zip
-   ```
-3. **Restart your terminal** to load the new environment variable
-4. **Launch Chrome** - PRO features are now active!
+![Frame Editor](https://www.dynamicupgrade.com/images/chromedebug-frame-editor.png)
-### What the Installer Does
+### 🎯 Visual Element Selection
-The `install-pro` command:
-- ✓ Validates your license key format
-- ✓ Extracts the PRO extension to `~/.chromedebug-pro/extension`
-- ✓ Saves your license information securely to `~/.chromedebug-pro/license.json`
-- ✓ Configures your shell environment automatically (exports `CHROMEDEBUG_EXTENSION_PATH`)
-- ✓ Creates an installation log at `~/.chromedebug-pro/install.log` for troubleshooting
+Click any element → AI can inspect and modify it instantly.
-The environment variable `CHROMEDEBUG_EXTENSION_PATH` is automatically detected by Chrome Controller when launching Chrome, allowing it to load the PRO extension instead of the bundled FREE version.
+```
+You: "Make that button blue"
+Claude: *applies CSS to selected element*
+```
-### Verifying PRO Installation
+### 🔍 Console Log Sync
-Check that PRO is correctly installed:
+Every recording includes synchronized console output. AI sees exactly what happened when.
-```bash
-# Verify environment variable is set
-echo $CHROMEDEBUG_EXTENSION_PATH
-# Should output: /Users/YOUR_USERNAME/.chromedebug-pro/extension
+![Workflow Editor](https://www.dynamicupgrade.com/images/chromedebug-workflow-editor.png)
-# Check license file
-cat ~/.chromedebug-pro/license.json
-```
+---
-When you launch Chrome with `chromedebug-mcp`, you should see:
-- "ChromeDebug MCP Assistant PRO" in `chrome://extensions/` (with function tracking features enabled)
+## Example Prompts
-### Troubleshooting PRO Installation
+Once connected, try these with Claude:
-**Environment variable not set after installation:**
-- Restart your terminal or run: `source ~/.zshrc` (or `~/.bashrc` for Bash users)
-- If still not set, manually add to your shell config:
-  ```bash
-  export CHROMEDEBUG_EXTENSION_PATH="$HOME/.chromedebug-pro/extension"
-  ```
+```
+"Launch Chrome and go to my app"
+"Record what happens when I click checkout"
+"Show me the console errors on this page"
+"Make the selected element have rounded corners"
+"Replay my last workflow recording"
+```
-**Chrome still loading FREE version:**
-- Verify the environment variable is set: `echo $CHROMEDEBUG_EXTENSION_PATH`
-- Close ALL Chrome windows and restart ChromeDebug MCP
-- Check installation log: `cat ~/.chromedebug-pro/install.log`
+---
-**License validation errors:**
-- Verify you copied the full license key from your purchase email
-- License format should be: `LICENSEID-HASH` (e.g., `ABC12345-0123456789ABCDEF`)
-- Check for extra spaces or line breaks when copying
+## FREE vs PRO
-**Extension ZIP file not found:**
-- Verify the path to your downloaded ZIP file is correct
-- Use `~` for home directory: `~/Downloads/chromedebug-extension-pro.zip`
-- Check file permissions: `ls -la ~/Downloads/chromedebug-extension-pro.zip`
+| | FREE | PRO |
+|---|:---:|:---:|
+| Recordings per day | 5 | Unlimited |
+| Screen/Workflow/Screenshot modes | ✅ | ✅ |
+| Console log sync | ✅ | ✅ |
+| Export as ZIP/MP4 | ❌ | ✅ |
+| Function tracing | ❌ | ✅ |
+| Watermark-free exports | ❌ | ✅ |
-**Need help?**
-- Check installation log: `~/.chromedebug-pro/install.log`
-- Open an issue: [GitHub Issues](https://github.com/dynamicupgrade/ChromeDebug/issues)
+💎 **[Get PRO](https://chromedebug.com/checkout/buy/996773cb-682b-430f-b9e3-9ce2130bd967)** - Unlimited recordings + video export
-## Usage
+---
-### As MCP Server
+## Installation Details
-#### Quick Setup (Claude Code CLI)
+<details>
+<summary><strong>Windows Users (WSL2 recommended)</strong></summary>
-**macOS / Linux:**
-```bash
-claude mcp add chromedebug -s user -- chromedebug-mcp
-```
+```powershell
+# Install WSL2
+wsl --install
-**Windows (WSL2):**
-```bash
+# Then in WSL terminal:
+npm install -g @dynamicu/chromedebug-mcp
 claude mcp add chromedebug -s user -- wsl chromedebug-mcp
 ```
+</details>
-The MCP server will automatically start both the stdio MCP server and HTTP server for Chrome extension integration.
-#### Manual Configuration (Any MCP Client)
-If you're not using Claude Code CLI or want to configure manually, add this to your MCP settings file:
+<details>
+<summary><strong>Manual MCP Configuration</strong></summary>
-**Location:** `~/.claude/config.json` or your MCP client's configuration file
+Add to `~/.claude/config.json`:
 ```json
 {
@@ -177,556 +123,42 @@ If you're not using Claude Code CLI or want to configure manually, add this to y
   }
 }
 ```
+</details>
-**For WSL2 users:**
-```json
-{
-  "mcpServers": {
-    "chromedebug": {
-      "command": "wsl",
-      "args": ["chromedebug-mcp"]
-    }
-  }
-}
-```
-#### Windows Setup Details
-⚠️ **Important: WSL2 Recommended for Windows Users**
-ChromeDebug MCP uses stdio-based communication which works best on Unix systems. For Windows users, we **strongly recommend using WSL2** for full compatibility.
-**WSL2 Setup (5 minutes):**
-1. **Install WSL2** (PowerShell as Administrator):
-   ```powershell
-   wsl --install
-   ```
-2. **Restart your computer**
-3. **Open WSL terminal** and install Node.js:
-   ```bash
-   sudo apt update
-   sudo apt install nodejs npm -y
-   ```
-4. **Install ChromeDebug in WSL**:
-   ```bash
-   npm install -g @dynamicu/chromedebug-mcp
-   ```
-5. **Configure Claude Code** to use WSL:
-   ```bash
-   claude mcp add chromedebug -s user -- wsl chromedebug-mcp
-   ```
-6. **Verify it works**:
-   ```bash
-   claude mcp list
-   # Should show: chromedebug: wsl chromedebug-mcp - ✓ Connected
-   ```
-**Alternative: Native Windows (Limited Support)**
-If you cannot use WSL2, you can force native Windows mode, but stdio communication may be unreliable:
-```powershell
-# Set environment variable to enable native Windows mode
-set CHROMEDEBUG_FORCE_WINDOWS=1
-chromedebug-mcp --help
-```
-**Note:** Native Windows may experience stdio communication issues due to cmd.exe limitations. WSL2 is strongly recommended for the best experience.
-### Standalone HTTP Server (New in v2.4.3)
-For Windows users or those who prefer to run services separately, you can start the HTTP server independently:
-```bash
-# Start HTTP server only (no MCP)
-chromedebug-mcp-server
-# With options
-chromedebug-mcp-server --verbose --port 3000
-```
-**Available Options:**
-- `--port PORT` - Specify HTTP server port (optional, auto-discovers if not set)
-- `--verbose` - Enable verbose logging
-- `--debug` - Enable debug mode
-- `--no-cleanup` - Skip process cleanup on startup
-- `--session-id ID` - Set custom session ID
-**Use Cases:**
-- Windows users who want Chrome extension support without running full MCP server
-- Development environments where you want HTTP server running persistently
-- Situations where MCP and HTTP servers should run in separate processes
-### Embedded HTTP Server
-Chrome Debug can automatically start an embedded HTTP server for Chrome extension communication. The server uses ports configured in `config/chrome-pilot-config.json` (default: 3001, 3000, 3002, 3028). The server provides these REST API endpoints:
-| Endpoint | Method | Description | Body |
-|----------|--------|-------------|------|
-| `/chromedebug/evaluate` | POST | Evaluate expression | `{ "expression": "window.user" }` |
-| `/chromedebug/scopes` | GET | Get scope variables | - |
-| `/chromedebug/logs` | GET | Get recent console logs | - |
-| `/chromedebug/screenshot` | GET | Take screenshot | `{ "type": "jpeg", "fullPage": true, "path": "/path/to/save.jpg" }` |
-| `/chromedebug/dom-intent` | POST | Process natural language DOM commands | `{ "selector": "#element", "instruction": "make it blue" }` |
-| `/chromedebug/status` | GET | Check server and Chrome connection status | - |
-| `/chromedebug/upload/:dataType` | POST | Upload screen recording with logs | FormData with video file, logs JSON, and duration |
-| `/chromedebug/recording/:id` | GET | Retrieve a recording by ID | - |
-| `/chromedebug/workflow-recording` | POST | Save workflow recording | `{ "sessionId": "...", "actions": [...], "logs": [...] }` |
-| `/chromedebug/workflow-recording/:sessionId` | GET | Get workflow recording | - |
-| `/chromedebug/restore-point` | POST | Save restore point | `{ "workflowId": "...", "domSnapshot": {...}, ... }` |
-| `/chromedebug/restore-point/:id` | GET/DELETE | Get or delete restore point | - |
-| `/chromedebug/restore-points/:workflowId` | GET | List restore points for workflow | - |
-### MCP Tools
-When used as an MCP server, Chrome Debug exposes these tools:
-**Browser Control:**
-- `launch_chrome` - Start a new Chrome browser instance
-- `connect_to_existing_chrome` - Connect to existing Chrome with debugging enabled
-- `navigate_to` - Navigate to a URL
-- `check_connection` - Check Chrome connection status
-- `force_reset` - Force reset Chrome instance
-**Page Inspection:**
-- `take_screenshot` - Capture page screenshot (AI-optimized by default)
-- `get_page_content` - Extract page text, HTML, and DOM structure
-- `evaluate_expression` - Execute JavaScript expression in page context
-- `get_logs` - Retrieve console logs
-**Element Selection (via Chrome Extension):**
-- `get_selected_element` - Get info about element selected via extension
-- `apply_css_to_selected` - Apply CSS to the selected element
-- `execute_js_on_selected` - Execute JavaScript on the selected element
-- `clear_selected_element` - Clear the current selection
-**Debugging:**
-- `pause_execution` / `resume_execution` - Debugger control
-- `step_over` - Step over in debugger
-- `set_breakpoint` - Set debugging breakpoints
-- `get_scopes` - Get scope variables from top call frame
-**Workflow Recording:**
-- `get_workflow_recording` - Get a workflow recording with actions and logs (can be large)
-- `list_workflow_recordings` - List all workflow recordings
-- `get_workflow_summary` - Get a concise summary of a workflow recording
-- `get_workflow_function_traces` - Get only function execution traces
-- `get_workflow_errors` - Get only error logs and error-related actions
-- `get_workflow_actions_filtered` - Get filtered workflow actions by type with pagination
-- `play_workflow_recording` - Replay a saved workflow recording
-- `play_workflow_by_name` - Replay workflow by recording name
-**Restore Points:**
-- `save_restore_point` - Save browser state restore point
-- `restore_from_point` - Restore browser to a saved restore point
-- `list_restore_points` - List restore points for a workflow
-**Frame Recording (Screen Capture):**
-- `chromedebug_show_frames` - Display frame recording info
-- `get_frame_session_info` - Get frame capture session info
-- `get_frame` - Get specific frame from recording
-- `get_frame_screenshot` - Get screenshot image data as base64
-- `search_frame_logs` - Search logs across all frames
-- `get_frame_logs_paginated` - Get paginated frame logs
-**Extension Integration:**
-- `get_websocket_info` - Get WebSocket server info for extension connection
-## Example
-```bash
-# Start the server (automatically kills existing processes and finds available port)
-npm start
-# The server will display the port it's running on:
-# 🚀 Starting Chrome Debug Server on port 3000...
-# 📍 Extension should connect to: http://localhost:3000
-# 🔧 MCP tools will use this port for API calls
-# In another terminal, test the API (use the port shown in startup)
-curl -X POST http://localhost:3000/chromedebug/pause
-curl -X POST http://localhost:3000/chromedebug/evaluate \
-  -H "Content-Type: application/json" \
-  -d '{"expression": "document.title"}'
-```
-## Chrome Extension - Visual Element Selection
-Chrome Debug includes a Chrome extension that enables visual element selection for MCP control:
-### Installing the Extension
-#### Option 1: Chrome Web Store (Recommended - FREE Version)
-Install the FREE version directly from the Chrome Web Store:
-🌐 **[Install from Chrome Web Store](https://chromewebstore.google.com/detail/chromedebug-mcp-assistant/lemgbmdnephoaniipapgeciebfeakffn)**
-- ✅ 5 recordings per day
-- ✅ Full MCP integration
-- ✅ Visual element selection
-- ✅ Automatic updates
-- ✅ No manual installation needed
-#### Option 2: Manual Installation (Development)
-1. Open Chrome and navigate to `chrome://extensions/`
-2. Enable "Developer mode"
-3. Click "Load unpacked" and select the `chrome-extension` directory
-#### Option 3: PRO Version (Unlimited) - Automated Installation
-For unlimited recordings and advanced features, purchase the PRO version:
-💎 **[Get PRO Version](https://chromedebug.com/checkout/buy/996773cb-682b-430f-b9e3-9ce2130bd967)**
-- ✅ Unlimited recordings
-- ✅ Advanced function tracing
-- ✅ Enhanced capture features
-- ✅ Priority support
-**Installation:** PRO extension is automatically installed via the `chromedebug-mcp install-pro` command. See the [Installing PRO Version](#installing-pro-version) section above for detailed instructions.
-### Using the Extension
-1. **Element Selection**
-   - Click on any element on a webpage
-   - The element is sent to Chrome Debug and highlighted in pink
-   - Use Claude MCP tools to modify the selected element:
-     - `get_selected_element` - View the currently selected element
-     - `apply_css_to_selected` - Apply CSS styles to the element
-     - `execute_js_on_selected` - Execute JavaScript on the element
-     - `clear_selected_element` - Clear the selection
-2. **Screen Recording**
-   - Capture video of the current tab with synchronized console logs
-   - All user interactions (clicks, inputs, scrolling) are tracked
-   - Recordings stored locally in SQLite database
-3. **Workflow Recording**
-   - Click "Start Workflow Recording" to record user interactions
-   - All clicks, inputs, and drags are captured with screenshots
-   - Console logs included and associated with each action
-   - Workflows can be replayed later for debugging
-4. **Screenshot Recording** (NEW)
-   - Click-to-capture mode with configurable countdown (0/3/5 seconds)
-   - Captures the RESULT of a click, not the moment of clicking
-   - Perfect for documenting dropdown menus, modals, and form responses
-   - Filter recordings by type using the tab system
-5. **Frame Editor** (PRO)
-   - Browse all frames with visual timeline
-   - Delete unwanted frames
-   - Export as ZIP or MP4 video
-   - Full console log synchronization
-6. **Video Player** (PRO)
-   - Play recordings at various speeds (0.25x - 4x)
-   - Seek to any frame
-   - Synchronized log panel
-   - Export to MP4 format
-### Managing License Activations
-Chrome Debug uses a license activation system to prevent activation limit exhaustion when reinstalling the extension.
-#### The Problem
-When you uninstall and reinstall the Chrome extension, it clears local storage and generates a new activation instance. With a typical 3-activation limit, frequent reinstalls can exhaust your available slots.
-#### The Solution: Activation Manager
-Chrome Debug now includes an **Activation Manager** that automatically handles this scenario:
-**How It Works:**
-1. When activation limit is reached, the Activation Manager opens automatically
-2. Shows all your current activations with device info (e.g., "macOS 14.0 • Chrome 121")
-3. Identifies your current device (highlighted in green)
-4. You select which activation to deactivate
-5. Extension automatically retries activation on current device
-**Example: Reinstalling on Same Machine**
-```
-You reinstall the extension on your laptop:
-→ Try to activate license
-→ Activation Manager shows:
-  • Activation 1: "macOS 14.0 • Chrome 120" (Oct 10) ← OLD instance
-  • Activation 2: "Windows 11 • Chrome 121" (Oct 12)
-  • Activation 3: "Linux • Firefox 119" (Oct 14)
-→ You recognize #1 is this same laptop
-→ Click "Deactivate" on #1
-→ Extension automatically activates new instance
-→ Result: Still 3/3 slots, seamless experience
-```
-**Best Practices:**
-- Before uninstalling: No action needed - Activation Manager handles it
-- Multiple devices: Activation Manager helps track which is which
-- Unused devices: Periodically deactivate machines you no longer use
-#### FAQ
-**Q: What happens if I forget which activation is which?**
-A: The Activation Manager shows device information (OS, browser version) and activation dates. Your current device is highlighted in green.
-**Q: Can I deactivate my current device?**
-A: No, the button is disabled for your current device to prevent accidental lockout.
-**Q: Does reinstalling the browser consume an activation?**
-A: Yes, because local storage is cleared. Use the Activation Manager to deactivate the old instance first or after reinstalling.
+<details>
+<summary><strong>PRO Installation</strong></summary>
-## Development
+After purchasing, run:
 ```bash
-npm run dev  # Run with --watch flag
+chromedebug-mcp install-pro \
+  --license YOUR_LICENSE_KEY \
+  --extension-path ~/Downloads/chromedebug-extension-pro.zip
 ```
-## Example Prompts for Claude
-Once Chrome Debug is installed as an MCP server, you can use these prompts with Claude:
-### Basic Browser Control
-- "Launch Chrome and navigate to https://example.com"
-- "Evaluate document.title in the browser"
-- "Get all the links on the current page"
-- "Take a screenshot of the current page"
-### Web Scraping & Automation
-- "Navigate to https://news.ycombinator.com and get the titles of the top 5 stories"
-- "Fill out the search form with 'JavaScript' and submit it"
-- "Click the login button and enter username 'test' and password 'demo'"
-- "Monitor the network requests and show me all API calls"
-### Debugging Web Apps
-- "Show me all console errors on this page"
-- "Watch for any uncaught exceptions and report them"
-- "Profile the page load performance"
-- "Check if there are any memory leaks by monitoring heap usage"
-### Advanced Debugging
-- "Set conditional breakpoints when userId === 5"
-- "Trace the execution flow of the checkout() function"
-- "Show me all event listeners attached to the submit button"
-- "Evaluate the current state of the Redux store"
-### Visual Element Modification
-After selecting an element with the Chrome extension:
-- "Show me what element is currently selected"
-- "Make the selected element blue with rounded corners"
-- "Apply CSS: background-color: #2196F3 !important; padding: 20px !important"
-- "Hide the selected element"
-- "Execute JavaScript to get the element's text content"
-- "Click the selected element"
-- "Clear the selected element"
-## Screen Recording Feature
-Chrome Debug includes a powerful screen recording feature that captures video of the current tab along with synchronized console logs. This helps users explain issues more effectively by providing visual context with technical details.
-### How to Use Recording
-1. **Start Recording:**
-   - Click the Chrome Debug extension icon
-   - Click "Start Recording" button
-   - The browser will prompt for permission to capture the tab
-   - Recording starts immediately after permission is granted
-2. **During Recording:**
-   - The button changes to "Stop Recording" and pulses red
-   - A timer shows the recording duration
-   - All console logs (log, warn, error, info) are captured with timestamps
-   - Continue using the browser normally - all interactions are recorded
-3. **Stop Recording:**
-   - Click "Stop Recording" button
-   - The video and logs are automatically uploaded to the Chrome Debug server
-   - You'll receive a recording ID (e.g., `rec_1234567890_abc123`)
-4. **Share with Claude:**
-   - Tell Claude: "Get recording rec_1234567890_abc123"
-   - Claude will retrieve the video and synchronized console logs
-   - The logs show precise timing relative to the video
-### Recording Details
-- **Video Format:** WebM with VP9 codec for efficient compression
-- **Resolution:** Up to 1920x1080 (adapts to tab size)
-- **Console Logs:** Captured with millisecond precision timestamps
-- **User Interactions:** Mouse clicks, keyboard input, scrolling automatically captured
-- **Storage:** Recordings are stored temporarily (last 10 recordings kept)
-- **No Audio:** Audio is not captured to focus on visual debugging
-### Captured Interactions
-Screen recordings now automatically capture all user interactions:
-- **Clicks:** Position, element selector, XPath, and clicked text
-- **Input:** Text entered into forms with field selectors
-- **Keypresses:** Special keys like Enter, Escape, Tab
-- **Scrolling:** Scroll positions throughout the recording
+[Watch PRO Installation Video](https://youtu.be/TBjj5FA8DRg)
+</details>
-### Example Use Cases
+---
-- **Bug Reports:** Record the exact steps to reproduce an issue
-- **UI Problems:** Show visual glitches or unexpected behavior
-- **Performance Issues:** Capture slow interactions with console timing
-- **Complex Workflows:** Document multi-step processes that are hard to explain
-- **User Testing:** Review exactly how users interact with your interface
+## Privacy
-### MCP Tools for Recording
+- ✅ **100% Local** - Recordings never leave your machine
+- ✅ **No cloud** - No uploads, no accounts
+- ✅ **No tracking** - Zero analytics or telemetry
-- `get_recording` - Retrieve a recording by ID to analyze video and logs
-- `chromedebug_show_frames` - Display frame-by-frame recording with interactions and logs
-- `get_frame` - Get specific frame with its interactions and console logs
-- `get_screen_interactions` - Query specific interaction data from recordings
+---
-## Screenshot Recording (Click-to-Capture)
+## Links
-Screenshot Recording is a dedicated mode for capturing high-quality screenshots with an optional countdown timer. Unlike Workflow Recording which captures actions immediately, Screenshot Recording waits for the page to respond to your click before capturing.
-### How It Works
-1. **Start Screenshot Recording** from the extension popup
-2. **Click anywhere on the page** to trigger a capture
-3. **Countdown timer** (0/3/5 seconds) gives the page time to respond
-4. **Screenshot captured** after the countdown
-### Use Cases
-- **Capture dropdown menus:** Click to open, countdown lets menu animate, screenshot captures open state
-- **Document form submissions:** Click submit, countdown waits for response, screenshot shows result
-- **Record modal dialogs:** Click trigger, countdown waits for animation, screenshot shows modal
-- **Step-by-step documentation:** Each click captures the result, not the moment of clicking
-### Settings
-- **Countdown Timer:** 0 seconds (instant), 3 seconds (default), or 5 seconds
-- **Hide Cursor:** Option to hide the mouse cursor during capture
-## Frame Editor (PRO)
-The Frame Editor is a powerful PRO feature for reviewing, editing, and exporting your recordings.
-### Features
-- **Timeline Navigation:** Browse all frames in your recording with a visual timeline
-- **Frame Thumbnails:** Quick preview strip at the bottom for easy navigation
-- **Frame Information:** View timestamp, dimensions, and capture metadata
-- **Console Logs:** See console output associated with each frame
-- **Delete Frames:** Remove unwanted frames from your recording
-### Export Options
-- **Download as ZIP:** Export all frames as individual images with metadata JSON
-- **Export as MP4:** Create a video from your frame recording with customizable settings:
-  - Frame rate selection (1-30 fps)
-  - Quality settings (1080p, 720p, 480p)
-  - Playback speed control
-## Video Player (PRO)
-The Video Player provides a complete playback experience for your frame recordings.
-### Playback Controls
-- **Play/Pause:** Control video playback
-- **Seek Bar:** Jump to any point in the recording
-- **Speed Control:** 0.25x, 0.5x, 1x, 2x, 4x playback speeds
-- **Frame Counter:** Shows current frame and total frame count
-- **Time Display:** Current time and total duration
-### Viewing Options
-- **Loop Playback:** Continuously replay the recording
-- **Auto-scroll Logs:** Keep console logs synced with current frame
-- **Log Panel Position:** Right side, bottom, or overlay
-- **Show/Hide Logs:** Toggle console log panel visibility
-### Console Log Panel
-- **Synchronized with Playback:** Logs highlight as video plays
-- **Color-coded Levels:** Different colors for log, info, warn, error, debug
-- **Timestamp Display:** See exact timing for each log entry
-- **Searchable:** Find specific log entries
-## Tab Filtering for Recordings
-Manage your recordings with built-in filtering:
-- **All:** View all workflow and screenshot recordings
-- **Workflow:** Filter to show only workflow recordings (action tracking)
-- **Screenshots:** Filter to show only screenshot recordings (click-to-capture)
-Each recording displays a visual badge indicating its type for easy identification.
-## FREE vs PRO Comparison
-| Feature | FREE | PRO |
-|---------|------|-----|
-| **Recording Modes** | | |
-| Screen Recording | ✅ | ✅ |
-| Workflow Recording | ✅ | ✅ |
-| Screenshot Recording | ✅ | ✅ |
-| **Daily Limits** | | |
-| Recordings per Day | 5 | Unlimited |
-| **Export Features** | | |
-| View Recordings | ✅ | ✅ |
-| Frame Editor | Watermarked | ✅ Full Access |
-| Download ZIP | ❌ | ✅ |
-| Export as MP4 | ❌ | ✅ |
-| **Advanced Features** | | |
-| Function Tracing | ❌ | ✅ |
-| Enhanced Debugging | ❌ | ✅ |
-| Video Player | Watermarked | ✅ Full Access |
-| **Support** | | |
-| Community Support | ✅ | ✅ |
-| Priority Support | ❌ | ✅ |
-### Upgrade to PRO
-Ready for unlimited recordings and full export capabilities?
-💎 **[Get ChromeDebug PRO](https://chromedebug.com/checkout/buy/996773cb-682b-430f-b9e3-9ce2130bd967)**
-## Privacy & Data
-ChromeDebug respects your privacy:
-- **100% Local:** All recordings are stored locally on your machine
-- **No Cloud Upload:** Your data never leaves your computer
-- **No Analytics:** No usage tracking or telemetry
-- **No Account Required:** Use the FREE version without any sign-up
-- **License Only:** PRO version requires a license key, but no account or login
-## Troubleshooting
-### Common Issues
-**Extension not connecting to server:**
-- Ensure ChromeDebug MCP server is running
-- Check that the port matches (default: 3001)
-- Look for "Connected" status in the extension popup
-**Recording not starting:**
-- Grant screen capture permission when prompted
-- Ensure you're not on a restricted page (chrome://, Chrome Web Store)
+- 📺 [Demo Video](https://youtu.be/2Y9nIsvEjks)
+- 🌐 [Chrome Extension](https://chromewebstore.google.com/detail/chromedebug-mcp-assistant/lemgbmdnephoaniipapgeciebfeakffn)
+- 💎 [Get PRO](https://chromedebug.com/checkout/buy/996773cb-682b-430f-b9e3-9ce2130bd967)
+- 🐛 [Report Issues](https://github.com/dynamicupgrade/ChromeDebug/issues)
+- 💬 [Discussions](https://github.com/dynamicupgrade/ChromeDebug/discussions)
-**Frames not capturing:**
-- Check console for errors
-- Ensure sufficient storage space
-- Try reducing capture quality in settings
+---
-### Getting Help
+## License
-- 📚 [Documentation](https://www.npmjs.com/package/@dynamicu/chromedebug-mcp)
-- 🐛 [Report Issues](https://github.com/dynamicupgrade/ChromeDebug/issues)
-- 💬 [Discussions](https://github.com/dynamicupgrade/ChromeDebug/discussions)
+MIT

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@dynamicu/chromedebug-mcp",
-  "version": "2.7.4",
+  "version": "2.7.6",
   "description": "ChromeDebug MCP - MCP server that provides full control over a Chrome browser instance for debugging and automation with AI assistants like Claude Code",
   "main": "src/index.js",
   "type": "module",