v0.4.81: Complete error context and configurable debug logging :release

- Fixed missing file/line info in error messages (e.g., TButtonLit.js:8:1)
- Added comprehensive debug logging system for CDP protocol analysis
- Configurable debug output to terminal and/or log file
- Distinct [DEVMIRROR:] prefix for internal debug messages
- New debug options: logExceptions, logConsoleAPI, logLogEntries, logRawCDP
- Optional logToConsole control (default: true) for terminal output

This release ensures all errors include complete context and provides
powerful debugging tools for troubleshooting CDP protocol issues.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ivg-design

.vscode/devmirror/config.json

@@ -1,4 +1,4 @@
 {
-  "extensionPath": "/Users/ivg/.vscode/extensions/ivgdesign.devmirror-0.4.75",
-  "cliPath": "/Users/ivg/.vscode/extensions/ivgdesign.devmirror-0.4.75/out/cli.js"
+  "extensionPath": "/Users/ivg/.vscode/extensions/ivgdesign.devmirror-0.4.81",
+  "cliPath": "/Users/ivg/.vscode/extensions/ivgdesign.devmirror-0.4.81/out/cli.js"
 }

CHANGELOG.md

@@ -4,17 +4,21 @@ All notable changes to the DevMirror VS Code extension will be documented in thi
 
 ## [0.4.81] - 2025-09-25
 
+### Fixed
+- **Error Context Missing**: Syntax errors now properly display file name and line number (e.g., "TButtonLit.js:8:1")
+  - Fixed extraction of file/line info from Runtime.exceptionThrown CDP events
+  - Corrected 0-based to 1-based line number conversion to match browser display
+
 ### Added
-- **Configurable Debug Logging**: Added comprehensive debug configuration to help diagnose CDP protocol issues
-  - New debug configuration in devmirror.config.json with categories: logRawCDP, logExceptions, logConsoleAPI, logLogEntries
-  - Debug logging at CDP protocol level for Runtime.exceptionThrown and Log.entryAdded events
-  - Debug output to VS Code console for troubleshooting error context capture
-- **Enhanced Error Context**: Improved extraction of file and line information from multiple CDP event locations
-  - Added file:line extraction from Log.entryAdded events
-  - Enhanced Runtime.exceptionThrown handling to capture all available context
+- **Configurable Debug Logging**: Comprehensive debug system for diagnosing CDP protocol issues
+  - New debug configuration options: logExceptions, logConsoleAPI, logLogEntries, logRawCDP
+  - Optional logToFile to save debug output to current.log
+  - Optional logToConsole (default: true) to control terminal output
+  - Distinct [DEVMIRROR:DEBUG] prefix to differentiate from application debug messages
 
 ### Changed
-- ConsoleEventHandler now includes configurable debug logging methods
+- Debug messages now clearly labeled with [DEVMIRROR:] prefix to distinguish from app debug output
+- ConsoleEventHandler includes configurable debug logging methods
 - CDPManager adds raw CDP event logging when debug mode is enabled
 
 ## [0.4.80] - 2025-09-25

README.md

@@ -2,12 +2,14 @@
 
 **Capture browser console output using Chrome DevTools Protocol**
 
-[![Version](https://img.shields.io/badge/version-0.4.80-blue.svg)](CHANGELOG.md) [![Publisher](https://img.shields.io/badge/publisher-IVGDesign-green.svg)](https://marketplace.visualstudio.com/publishers/IVGDesign) [![License](https://img.shields.io/badge/license-MIT-lightgrey.svg)](LICENSE)
+[![Version](https://img.shields.io/badge/version-0.4.81-blue.svg)](CHANGELOG.md) [![Publisher](https://img.shields.io/badge/publisher-IVGDesign-green.svg)](https://marketplace.visualstudio.com/publishers/IVGDesign) [![License](https://img.shields.io/badge/license-MIT-lightgrey.svg)](LICENSE)
 
 DevMirror is a VS Code extension that captures browser console output to timestamped log files using Chrome DevTools Protocol (CDP) or Adobe CEF debugging.
 
-## Current Features (v0.4.80)
+## Current Features (v0.4.81)
 
+- **Complete Error Context** - All errors now include file name, line and column numbers
+- **Configurable Debug Logging** - Advanced CDP protocol debugging for troubleshooting
 - **Complete Console Capture** - Logs all console messages with formatted arrays/objects as foldable JSON
 - **Enhanced Formatting** - Arrays and objects display as multi-line, indented JSON for better readability
 - **Console.table() Support** - Displays as formatted ASCII tables with all object properties as columns
@@ -97,6 +99,39 @@ Logs are written to `./devmirror-logs/` folder with timestamps.
 | autoOpenBrowser | boolean | Open browser in CEF mode | false |
 | captureDeprecationWarnings | boolean | Capture browser warnings | true |
 | cliPath | string | Path to CLI (auto-managed) | Auto-updated |
+| debug | object | Debug configuration | See below |
+
+### Debug Configuration
+
+DevMirror includes powerful debug logging to help diagnose CDP protocol issues. Add to `devmirror.config.json`:
+
+```json
+{
+  "outputDir": "./devmirror-logs",
+  "mode": "cdp",
+  "url": "http://localhost:3000",
+  "debug": {
+    "enabled": true,
+    "logExceptions": true,     // Log raw Runtime.exceptionThrown events
+    "logConsoleAPI": true,      // Log raw Runtime.consoleAPICalled events
+    "logLogEntries": true,      // Log raw Log.entryAdded events
+    "logRawCDP": false,         // Log ALL CDP traffic (verbose!)
+    "logToFile": true,          // Write debug to current.log file
+    "logToConsole": false       // Output to terminal (default: true)
+  }
+}
+```
+
+**Debug Options:**
+- `enabled`: Master switch for debug logging
+- `logExceptions`: Capture raw exception data from CDP
+- `logConsoleAPI`: Capture raw console API calls
+- `logLogEntries`: Capture browser log entries
+- `logRawCDP`: Log ALL CDP protocol traffic (very verbose)
+- `logToFile`: Save debug output to current.log
+- `logToConsole`: Show debug in terminal where DevMirror runs
+
+Debug messages are prefixed with `[DEVMIRROR:]` to distinguish from application debug output.
 
 ## Log Output Format
 

src/cdpManager.ts

@@ -256,7 +256,10 @@ export class CDPManager {
         this.client.on('Runtime.exceptionThrown', (event: any) => {
             // Debug log the raw CDP event if debug is enabled
             if (this.config.debug?.enabled && this.config.debug?.logExceptions) {
-                console.log('[DevMirror Debug] Raw Runtime.exceptionThrown event:', JSON.stringify(event, null, 2));
+                const logToConsole = this.config.debug.logToConsole !== false;
+                if (logToConsole) {
+                    console.log('[DevMirror Debug] Raw Runtime.exceptionThrown event:', JSON.stringify(event, null, 2));
+                }
             }
             this.consoleHandler.handleExceptionThrown(event.exceptionDetails);
         });
@@ -296,7 +299,10 @@ export class CDPManager {
         this.client.on('Log.entryAdded', (event: any) => {
             // Debug log the raw CDP event if debug is enabled
             if (this.config.debug?.enabled && this.config.debug?.logLogEntries) {
-                console.log('[DevMirror Debug] Raw Log.entryAdded event:', JSON.stringify(event, null, 2));
+                const logToConsole = this.config.debug.logToConsole !== false;
+                if (logToConsole) {
+                    console.log('[DevMirror Debug] Raw Log.entryAdded event:', JSON.stringify(event, null, 2));
+                }
             }
             this.consoleHandler.handleLogEntry(event);
         });

src/configHandler.ts

@@ -20,7 +20,8 @@ export interface DevMirrorConfig {
         logExceptions?: boolean;  // Log detailed exception data
         logConsoleAPI?: boolean;  // Log raw console API calls
         logLogEntries?: boolean;  // Log raw Log.entryAdded events
-        logToFile?: boolean;  // Save debug logs to a separate file
+        logToFile?: boolean;  // Save debug logs to current.log
+        logToConsole?: boolean;  // Output debug logs to VS Code Developer Tools console (default: true)
     };
 }
 

src/handlers/ConsoleEventHandler.ts

@@ -22,18 +22,25 @@ export class ConsoleEventHandler {
                 (category === 'cdp' && debugConfig.logRawCDP);
 
             if (shouldLog) {
-                const timestamp = new Date().toISOString();
-                const output = `[${timestamp}] [DEBUG:${category.toUpperCase()}] ${message}`;
-                console.log(output);
-                if (data) {
-                    console.log(JSON.stringify(data, null, 2));
+                // Default logToConsole to true if not specified
+                const logToConsole = debugConfig.logToConsole !== false;
+
+                // Output to console if enabled (default behavior)
+                if (logToConsole) {
+                    const timestamp = new Date().toISOString();
+                    const output = `[${timestamp}] [DEBUG:${category.toUpperCase()}] ${message}`;
+                    console.log(output);
+                    if (data) {
+                        console.log(JSON.stringify(data, null, 2));
+                    }
                 }
 
                 // Optionally write to debug file
                 if (debugConfig.logToFile && this.logWriter) {
+                    // Use a distinct prefix for DevMirror's internal debug messages
                     this.logWriter.write({
                         type: 'debug',
-                        message: `[${category.toUpperCase()}] ${message}\n${data ? JSON.stringify(data, null, 2) : ''}`,
+                        message: `[DEVMIRROR:${category.toUpperCase()}] ${message}${data ? '\n' + JSON.stringify(data, null, 2).split('\n').map(line => '                             ' + line).join('\n') : ''}`,
                         timestamp: Date.now()
                     });
                 }
@@ -126,16 +133,18 @@ export class ConsoleEventHandler {
             }
         }
 
-        // Try to extract file and line info from exception object
+        // Try to extract file and line info - it's directly on details, not exceptionDetails!
+        // CDP uses 0-based line numbers, but browsers display 1-based, so add 1
         let fileInfo = '';
-        if (details.exceptionDetails) {
-            const exDetails = details.exceptionDetails;
-            if (exDetails.url && exDetails.lineNumber !== undefined) {
-                const fileName = exDetails.url.split('/').pop();
-                fileInfo = ` (${fileName}:${exDetails.lineNumber}:${exDetails.columnNumber || 0})`;
-            } else if (exDetails.scriptId && exDetails.lineNumber !== undefined) {
-                fileInfo = ` (script:${exDetails.scriptId}:${exDetails.lineNumber}:${exDetails.columnNumber || 0})`;
-            }
+        if (details.url && details.lineNumber !== undefined) {
+            const fileName = details.url.split('/').pop();
+            const lineNumber = details.lineNumber + 1; // Convert from 0-based to 1-based
+            const columnNumber = (details.columnNumber || 0) + 1; // Columns are also 0-based
+            fileInfo = ` (${fileName}:${lineNumber}:${columnNumber})`;
+        } else if (details.scriptId && details.lineNumber !== undefined) {
+            const lineNumber = details.lineNumber + 1;
+            const columnNumber = (details.columnNumber || 0) + 1;
+            fileInfo = ` (script:${details.scriptId}:${lineNumber}:${columnNumber})`;
         }
 
         if (fileInfo) {