@dynamicu/chromedebug-mcp 2.5.15 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamicu/chromedebug-mcp",
-  "version": "2.5.15",
+  "version": "2.6.1",
   "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",
@@ -118,6 +118,8 @@
     "joi": "^18.0.0",
     "jsonwebtoken": "^9.0.2",
     "multer": "^2.0.2",
+    "pino": "^10.1.0",
+    "pino-pretty": "^13.1.2",
     "puppeteer": "^24.25.0",
     "uuid": "^11.1.0",
     "web-vitals": "^5.1.0",

package/scripts/webpack.config.pro.cjs

@@ -62,8 +62,8 @@ module.exports = {
         { from: 'chrome-extension/logger.js', to: 'logger.js' },
         { from: 'chrome-extension/license-helper.js', to: 'license-helper.js' },
         { from: 'chrome-extension/firebase-client.js', to: 'firebase-client.js' },
-        { from: 'chrome-extension/firebase-config.js', to: 'firebase-config.js' },
-        { from: 'chrome-extension/firebase-config.module.js', to: 'firebase-config.module.js' },
+        { from: 'chrome-extension/firebase-config.public.js', to: 'firebase-config.public.js' },
+        { from: 'chrome-extension/firebase-config.public-sw.js', to: 'firebase-config.js' },
         { from: 'chrome-extension/activation-manager.js', to: 'activation-manager.js' },
         { from: 'chrome-extension/frame-capture.js', to: 'frame-capture.js' },
         { from: 'chrome-extension/chrome-session-manager.js', to: 'chrome-session-manager.js' },

package/src/cli.js

@@ -18,8 +18,12 @@ import {
   findActiveSessions
 } from './services/unified-session-manager.js';
 import logger from './utils/logger.js';
+import { interceptStdout } from './logger.js';
 import { installPro } from './commands/install-pro.js';
 
+// CRITICAL: Intercept stdout FIRST to prevent MCP JSON-RPC pollution
+interceptStdout();
+
 /**
  * Main CLI entry point
  */

package/src/http-server.js

@@ -8,6 +8,10 @@ import { findAvailablePort } from './utils.js';
 import { writePortFile, removePortFile } from './port-discovery.js';
 import { configLoader } from './config-loader.js';
 import { setupProcessTracking } from './services/process-tracker.js';
+import { createLogger, logHttpRequest } from './logger.js';
+
+// Create component-specific logger
+const logger = createLogger('HTTP-Server');
 
 // Security imports
 import { authenticate, authorize, PERMISSIONS } from './middleware/auth.js';
@@ -83,10 +87,10 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     const contentType = req.get('content-type') || 'none';
     const contentLength = req.get('content-length') || '0';
 
-    console.error(`[RAW-REQUEST] ${timestamp} - ${req.method} ${req.originalUrl}`);
-    console.error(`[RAW-REQUEST] IP: ${ip} | UA: ${userAgent}`);
-    console.error(`[RAW-REQUEST] Content-Type: ${contentType} | Length: ${contentLength}bytes`);
-    console.error(`[RAW-REQUEST] Headers:`, Object.keys(req.headers).map(h => `${h}=${req.headers[h]}`).join(', '));
+    logger.debug(` ${timestamp} - ${req.method} ${req.originalUrl}`);
+    logger.debug(` IP: ${ip} | UA: ${userAgent}`);
+    logger.debug(` Content-Type: ${contentType} | Length: ${contentLength}bytes`);
+    logger.debug(` Headers:`, Object.keys(req.headers).map(h => `${h}=${req.headers[h]}`).join(', '));
 
     // Capture body parsing errors
     const originalJson = express.json();
@@ -96,8 +100,8 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     const originalStatus = res.status;
     res.status = function(code) {
       if (code === 400) {
-        console.error(`[RAW-REQUEST] HTTP 400 ERROR for ${req.method} ${req.originalUrl}`);
-        console.error(`[RAW-REQUEST] This request will be rejected with 400`);
+        logger.debug(` HTTP 400 ERROR for ${req.method} ${req.originalUrl}`);
+        logger.debug(` This request will be rejected with 400`);
       }
       return originalStatus.call(this, code);
     };
@@ -108,10 +112,10 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   // ENHANCED BODY PARSING - For debugging body parsing issues (only for screen-interactions)
   app.use('/chromedebug/screen-interactions/*', (req, res, next) => {
     if (req.method === 'POST') {
-      console.error(`[BODY-DEBUG] Processing screen-interactions request for ${req.originalUrl}`);
-      console.error(`[BODY-DEBUG] Content-Type: ${req.get('content-type')}`);
-      console.error(`[BODY-DEBUG] Content-Length: ${req.get('content-length')}`);
-      console.error(`[BODY-DEBUG] User-Agent: ${req.get('user-agent')}`);
+      logger.debug(` Processing screen-interactions request for ${req.originalUrl}`);
+      logger.debug(` Content-Type: ${req.get('content-type')}`);
+      logger.debug(` Content-Length: ${req.get('content-length')}`);
+      logger.debug(` User-Agent: ${req.get('user-agent')}`);
 
       // Store original data handler to capture raw body
       const originalData = req.on;
@@ -130,16 +134,16 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           const wrappedHandler = () => {
             if (chunks.length > 0) {
               const rawBody = Buffer.concat(chunks).toString();
-              console.error(`[BODY-DEBUG] Raw body captured (${rawBody.length} chars):`, rawBody);
+              logger.debug(` Raw body captured (${rawBody.length} chars):`, rawBody);
               req.rawBody = rawBody;
 
               // Try to parse manually
               try {
                 const parsedBody = JSON.parse(rawBody);
-                console.error(`[BODY-DEBUG] Manual JSON parse successful`);
-                console.error(`[BODY-DEBUG] Parsed data:`, JSON.stringify(parsedBody, null, 2));
+                logger.debug(` Manual JSON parse successful`);
+                logger.debug(` Parsed data:`, JSON.stringify(parsedBody, null, 2));
               } catch (parseError) {
-                console.error(`[BODY-DEBUG] Manual JSON parse FAILED:`, parseError.message);
+                logger.debug(` Manual JSON parse FAILED:`, parseError.message);
               }
             }
             return originalHandler();
@@ -155,9 +159,9 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   // JSON PARSING ERROR HANDLER - Catch malformed JSON before it reaches our handlers
   app.use('/chromedebug/screen-interactions/*', (err, req, res, next) => {
     if (err instanceof SyntaxError && err.status === 400 && 'body' in err) {
-      console.error(`[JSON-PARSE-ERROR] Malformed JSON in screen-interactions request:`, err.message);
-      console.error(`[JSON-PARSE-ERROR] Raw body:`, req.rawBody || 'not captured');
-      console.error(`[JSON-PARSE-ERROR] Request body:`, req.body);
+      logger.error(` Malformed JSON in screen-interactions request:`, err.message);
+      logger.error(` Raw body:`, req.rawBody || 'not captured');
+      logger.error(` Request body:`, req.body);
       return res.status(400).json({
         error: 'Invalid JSON format',
         details: err.message
@@ -169,13 +173,13 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   // ENHANCED VALIDATION ERROR HANDLER - Catch and log detailed validation errors
   app.use('/chromedebug/screen-interactions/*', (err, req, res, next) => {
     if (err && err.status === 400 && err.details) {
-      console.error(`[VALIDATION-ERROR] Screen interactions validation failed:`);
-      console.error(`[VALIDATION-ERROR] Request path:`, req.originalUrl);
-      console.error(`[VALIDATION-ERROR] User agent:`, req.get('user-agent'));
-      console.error(`[VALIDATION-ERROR] Content type:`, req.get('content-type'));
-      console.error(`[VALIDATION-ERROR] Raw body:`, req.rawBody || 'not captured');
-      console.error(`[VALIDATION-ERROR] Parsed body:`, JSON.stringify(req.body, null, 2));
-      console.error(`[VALIDATION-ERROR] Validation errors:`, JSON.stringify(err.details, null, 2));
+      logger.warn(` Screen interactions validation failed:`);
+      logger.warn(` Request path:`, req.originalUrl);
+      logger.warn(` User agent:`, req.get('user-agent'));
+      logger.warn(` Content type:`, req.get('content-type'));
+      logger.warn(` Raw body:`, req.rawBody || 'not captured');
+      logger.warn(` Parsed body:`, JSON.stringify(req.body, null, 2));
+      logger.warn(` Validation errors:`, JSON.stringify(err.details, null, 2));
     }
     next(err);
   });
@@ -208,7 +212,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   // JSON error handling middleware
   app.use((err, req, res, next) => {
     if (err instanceof SyntaxError && err.status === 400 && 'body' in err) {
-      console.error('[JSON Parse Error]', {
+      logger.error('[JSON Parse Error]', {
         url: req.url,
         method: req.method,
         contentType: req.get('content-type'),
@@ -288,8 +292,8 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     createValidator(workflowRecordingSchema),
     async (req, res) => {
     const { sessionId, url, title, includeLogs, actions, logs, functionTraces, name, screenshotSettings } = req.body;
-    console.error('[HTTP Server] Received workflow recording with name:', name);
-    console.error('[HTTP Server] Function traces count:', functionTraces ? functionTraces.length : 0);
+    logger.info('[HTTP Server] Received workflow recording with name:', name);
+    logger.info('[HTTP Server] Function traces count:', functionTraces ? functionTraces.length : 0);
     if (!sessionId || !actions) {
       return res.status(400).json({ error: 'sessionId and actions are required' });
     }
@@ -298,7 +302,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       const result = await activeController.storeWorkflowRecording(sessionId, url, title, includeLogs, actions, logs, name, screenshotSettings, functionTraces);
       res.json(result);
     } catch (error) {
-      console.error('Error storing workflow recording:', error);
+      logger.error('Error storing workflow recording:', error);
       res.status(500).json({ error: 'Failed to store workflow recording', details: error.message });
     }
   });
@@ -316,7 +320,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       }
       res.json(result);
     } catch (error) {
-      console.error('Error retrieving workflow recording:', error);
+      logger.error('Error retrieving workflow recording:', error);
       res.status(500).json({ error: 'Failed to retrieve workflow recording', details: error.message });
     }
   });
@@ -329,7 +333,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       const result = await activeController.listWorkflowRecordings();
       res.json(result);
     } catch (error) {
-      console.error('Error listing workflow recordings:', error);
+      logger.error('Error listing workflow recordings:', error);
       res.status(500).json({ error: 'Failed to list workflow recordings', details: error.message });
     }
   });
@@ -360,18 +364,18 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           return res.status(400).json({ error: 'No data provided' });
         }
         
-        console.error(`[Upload] Received batch ${batchId} for recording ${recordingId} with ${events.length} events`);
+        logger.debug(` Received batch ${batchId} for recording ${recordingId} with ${events.length} events`);
         
         // Ensure recording exists (auto-create if needed)
         try {
           const existingRecording = activeController.database.getRecording(recordingId);
           if (!existingRecording) {
-            console.error(`[Upload] Auto-creating recording ${recordingId} for full data upload`);
+            logger.debug(` Auto-creating recording ${recordingId} for full data upload`);
             activeController.database.storeRecording(recordingId, 'full_data_recording');
           }
         } catch (error) {
           // Recording doesn't exist, create it
-          console.error(`[Upload] Auto-creating recording ${recordingId} for full data upload (error case)`);
+          logger.debug(` Auto-creating recording ${recordingId} for full data upload (error case)`);
           activeController.database.storeRecording(recordingId, 'full_data_recording');
         }
         
@@ -394,7 +398,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
               await activeController.database.storePerformanceMetric(recordingId, event);
               break;
             default:
-              console.error(`[Upload] Unknown event type: ${event.type}`);
+              logger.debug(` Unknown event type: ${event.type}`);
           }
         }
         
@@ -404,7 +408,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           eventsProcessed: events.length 
         });
       } catch (error) {
-        console.error('[Upload] Error processing batch:', error);
+        logger.debug(' Error processing batch:', error);
         res.status(500).json({ 
           error: 'Failed to process batch', 
           details: error.message 
@@ -434,7 +438,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           data = typeof req.body === 'string' ? JSON.parse(req.body) : req.body;
         }
         
-        console.error(`[Upload] Received ${dataType} data for recording ${recordingId}`);
+        logger.debug(` Received ${dataType} data for recording ${recordingId}`);
         
         // Store data based on type
         const storeMethod = `store${dataType.charAt(0).toUpperCase() + dataType.slice(1).replace(/-/g, '')}`;
@@ -445,7 +449,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
           res.status(400).json({ error: `Unknown data type: ${dataType}` });
         }
       } catch (error) {
-        console.error(`[Upload] Error processing ${req.params.dataType}:`, error);
+        logger.debug(` Error processing ${req.params.dataType}:`, error);
         res.status(500).json({ 
           error: 'Failed to process data', 
           details: error.message 
@@ -461,23 +465,23 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     authorize(PERMISSIONS.FRAME_WRITE),
     upload.none(),
     async (req, res) => {
-    console.error('[FORMDATA-DEBUG] ==========================================');
-    console.error('[FORMDATA-DEBUG] Frame batch request received');
-    console.error('[FORMDATA-DEBUG] Content-Type:', req.headers['content-type']);
-    console.error('[FORMDATA-DEBUG] Request method:', req.method);
-    console.error('[FORMDATA-DEBUG] User:', req.user?.name || 'unknown');
-    console.error('[FORMDATA-DEBUG] Raw body keys:', Object.keys(req.body || {}));
-    console.error('[FORMDATA-DEBUG] Raw body:', req.body);
+    logger.debug(' ==========================================');
+    logger.debug(' Frame batch request received');
+    logger.debug(' Content-Type:', req.headers['content-type']);
+    logger.debug(' Request method:', req.method);
+    logger.debug(' User:', req.user?.name || 'unknown');
+    logger.debug(' Raw body keys:', Object.keys(req.body || {}));
+    logger.debug(' Raw body:', req.body);
     
     // Handle both JSON and FormData
     let sessionId, frames, sessionName;
 
     if (req.headers['content-type']?.includes('application/json')) {
-      console.error('[FORMDATA-DEBUG] Processing as JSON request');
+      logger.debug(' Processing as JSON request');
       // JSON request - validate with schema
       const { error, value } = frameBatchSchema.validate(req.body);
       if (error) {
-        console.error('[FORMDATA-DEBUG] JSON validation failed:', error.details);
+        logger.debug(' JSON validation failed:', error.details);
         return res.status(400).json({
           error: 'Validation failed',
           details: error.details.map(detail => ({
@@ -490,37 +494,37 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       frames = value.frames;
       sessionName = value.sessionName || null;
 
-      console.error('[FORMDATA-DEBUG] JSON parsed successfully:', { sessionId, frameCount: frames?.length, sessionName });
+      logger.debug(' JSON parsed successfully:', { sessionId, frameCount: frames?.length, sessionName });
     } else {
-      console.error('[FORMDATA-DEBUG] Processing as FormData request');
+      logger.debug(' Processing as FormData request');
       
       // FormData request - manual validation
       sessionId = req.body.sessionId;
       sessionName = req.body.sessionName || null;
 
-      console.error('[FORMDATA-DEBUG] SessionId from FormData:', sessionId);
-      console.error('[FORMDATA-DEBUG] SessionName from FormData:', sessionName);
-      console.error('[FORMDATA-DEBUG] Frames field type:', typeof req.body.frames);
-      console.error('[FORMDATA-DEBUG] Frames field length:', req.body.frames?.length);
-      console.error('[FORMDATA-DEBUG] Frames field preview:', req.body.frames?.substring(0, 200));
+      logger.debug(' SessionId from FormData:', sessionId);
+      logger.debug(' SessionName from FormData:', sessionName);
+      logger.debug(' Frames field type:', typeof req.body.frames);
+      logger.debug(' Frames field length:', req.body.frames?.length);
+      logger.debug(' Frames field preview:', req.body.frames?.substring(0, 200));
       
       try {
         if (!req.body.frames) {
-          console.error('[FORMDATA-DEBUG] ❌ No frames field in FormData');
+          logger.debug(' ❌ No frames field in FormData');
           frames = null;
         } else {
-          console.error('[FORMDATA-DEBUG] 🔄 Attempting to parse frames JSON...');
+          logger.debug(' 🔄 Attempting to parse frames JSON...');
           frames = JSON.parse(req.body.frames);
-          console.error('[FORMDATA-DEBUG] ✅ Frames JSON parsed successfully');
-          console.error('[FORMDATA-DEBUG] Parsed frames count:', frames?.length);
-          console.error('[FORMDATA-DEBUG] First frame structure:', frames?.[0] ? Object.keys(frames[0]) : 'no frames');
+          logger.debug(' ✅ Frames JSON parsed successfully');
+          logger.debug(' Parsed frames count:', frames?.length);
+          logger.debug(' First frame structure:', frames?.[0] ? Object.keys(frames[0]) : 'no frames');
         }
         
-        console.error('[FORMDATA-DEBUG] 🔄 Validating parsed FormData...');
+        logger.debug(' 🔄 Validating parsed FormData...');
         // Validate the parsed data
         const { error, value } = frameBatchSchema.validate({ sessionId, frames, sessionName });
         if (error) {
-          console.error('[FORMDATA-DEBUG] ❌ FormData validation failed:', error.details);
+          logger.debug(' ❌ FormData validation failed:', error.details);
           return res.status(400).json({
             error: 'Validation failed',
             details: error.details.map(detail => ({
@@ -533,47 +537,47 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         frames = value.frames;
         sessionName = value.sessionName;
 
-        console.error('[FORMDATA-DEBUG] ✅ FormData validation successful');
+        logger.debug(' ✅ FormData validation successful');
       } catch (parseError) {
-        console.error('[FORMDATA-DEBUG] ❌ Failed to parse frames JSON:', parseError);
-        console.error('[FORMDATA-DEBUG] Raw frames data:', req.body.frames);
+        logger.debug(' ❌ Failed to parse frames JSON:', parseError);
+        logger.debug(' Raw frames data:', req.body.frames);
         return res.status(400).json({ error: 'Invalid frames JSON format' });
       }
     }
     
     if (!sessionId || !frames) {
-      console.error('[FORMDATA-DEBUG] ❌ Missing required data');
-      console.error('[FORMDATA-DEBUG] SessionId:', sessionId);
-      console.error('[FORMDATA-DEBUG] Frames:', frames ? 'present' : 'null');
+      logger.debug(' ❌ Missing required data');
+      logger.debug(' SessionId:', sessionId);
+      logger.debug(' Frames:', frames ? 'present' : 'null');
       return res.status(400).json({ error: 'sessionId and frames are required' });
     }
     
-    console.error('[FORMDATA-DEBUG] ✅ All data validated, proceeding to storage');
-    console.error('[FORMDATA-DEBUG] Session ID:', sessionId);
-    console.error('[FORMDATA-DEBUG] Frame count:', frames?.length);
+    logger.debug(' ✅ All data validated, proceeding to storage');
+    logger.debug(' Session ID:', sessionId);
+    logger.debug(' Frame count:', frames?.length);
     
     try {
-      console.error('[FORMDATA-DEBUG] 🔄 Calling activeController.storeFrameBatch...');
+      logger.debug(' 🔄 Calling activeController.storeFrameBatch...');
       if (frames && frames.length > 0) {
-        console.error('[FORMDATA-DEBUG] First frame structure:', Object.keys(frames[0]));
-        console.error('[FORMDATA-DEBUG] First frame has imageData:', !!frames[0].imageData);
-        console.error('[FORMDATA-DEBUG] ImageData length:', frames[0].imageData ? frames[0].imageData.length : 'N/A');
+        logger.debug(' First frame structure:', Object.keys(frames[0]));
+        logger.debug(' First frame has imageData:', !!frames[0].imageData);
+        logger.debug(' ImageData length:', frames[0].imageData ? frames[0].imageData.length : 'N/A');
       }
 
-      console.error('[FORMDATA-DEBUG] Session name:', sessionName || 'none');
+      logger.debug(' Session name:', sessionName || 'none');
 
       const result = await activeController.storeFrameBatch(sessionId, frames, sessionName);
-      console.error('[FORMDATA-DEBUG] ✅ Frame batch storage result:', result);
+      logger.debug(' ✅ Frame batch storage result:', result);
 
-      console.error('[FORMDATA-DEBUG] Result recording ID:', result?.id);
-      console.error('[FORMDATA-DEBUG] Result frame count:', result?.total_frames);
-      console.error('[FORMDATA-DEBUG] ==========================================');
+      logger.debug(' Result recording ID:', result?.id);
+      logger.debug(' Result frame count:', result?.total_frames);
+      logger.debug(' ==========================================');
 
       res.json(result);
     } catch (error) {
-      console.error('[FORMDATA-DEBUG] ❌ Storage error:', error);
-      console.error('[FORMDATA-DEBUG] Error stack:', error.stack);
-      console.error('[FORMDATA-DEBUG] ==========================================');
+      logger.debug(' ❌ Storage error:', error);
+      logger.debug(' Error stack:', error.stack);
+      logger.debug(' ==========================================');
       res.status(500).json({ error: 'Failed to store frame batch', details: error.message });
     }
   });
@@ -592,12 +596,12 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       // Debug: Verify logs are properly included and formatted
       if (result.frames?.length > 0 && result.frames[0]?.logs?.length > 0) {
-        console.error(`[INFO] Frame session ${sessionId}: Loaded ${result.frames.length} frames with console logs`);
+        logger.info(` Frame session ${sessionId}: Loaded ${result.frames.length} frames with console logs`);
       }
 
       res.json(result);
     } catch (error) {
-      console.error('Error retrieving frame session:', error);
+      logger.error('Error retrieving frame session:', error);
       res.status(500).json({ error: 'Failed to retrieve frame session', details: error.message });
     }
   });
@@ -633,7 +637,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         limit: limit
       });
     } catch (error) {
-      console.error('Error retrieving snapshots:', error);
+      logger.error('Error retrieving snapshots:', error);
       res.status(500).json({ error: 'Failed to retrieve snapshots', details: error.message });
     }
   });
@@ -655,7 +659,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       if (req.body.logs) {
         const compliance = analyzeLogFieldCompliance(req.body.logs);
         if (!compliance.isCompliant) {
-          console.error('[LogTransform] Applied field filtering:', {
+          logger.debug(' Applied field filtering:', {
             originalLogs: req.body.logs.length,
             nonSchemaFields: compliance.nonSchemaFields,
             missingFields: compliance.missingRequiredFields
@@ -690,7 +694,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         if (logs) {
           const compliance = analyzeLogFieldCompliance(logs);
           if (!compliance.isCompliant) {
-            console.error('[LogTransform] Applied field filtering (FormData):', {
+            logger.debug(' Applied field filtering (FormData):', {
               originalLogs: logs.length,
               nonSchemaFields: compliance.nonSchemaFields,
               missingFields: compliance.missingRequiredFields
@@ -724,7 +728,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       const result = await activeController.associateLogsWithFrames(sessionId, logs);
       res.json(result);
     } catch (error) {
-      console.error('Error associating logs with frames:', error);
+      logger.error('Error associating logs with frames:', error);
       res.status(500).json({ error: 'Failed to associate logs', details: error.message });
     }
   });
@@ -784,7 +788,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       const result = await activeController.streamLogsToFrames(sessionId, logs);
       res.json(result);
     } catch (error) {
-      console.error('Error streaming logs to frames:', error);
+      logger.error('Error streaming logs to frames:', error);
       res.status(500).json({ error: 'Failed to stream logs', details: error.message });
     }
   });
@@ -834,7 +838,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         chromeConnected: status.connected
       });
     } catch (error) {
-      console.error('Error handling DOM intent:', error);
+      logger.error('Error handling DOM intent:', error);
       res.status(500).json({ 
         error: 'Failed to process DOM intent',
         details: error.message 
@@ -1060,7 +1064,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         res.status(404).json(result);
       }
     } catch (error) {
-      console.error('Error deleting recording:', error);
+      logger.error('Error deleting recording:', error);
       res.status(500).json({ error: 'Failed to delete recording', details: error.message });
     }
   });
@@ -1080,7 +1084,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
         res.status(404).json(result);
       }
     } catch (error) {
-      console.error('Error deleting workflow recording:', error);
+      logger.error('Error deleting workflow recording:', error);
       res.status(500).json({ error: 'Failed to delete workflow recording', details: error.message });
     }
   });
@@ -1096,33 +1100,33 @@ async function startHttpServer(chromeController = null, targetPort = null) {
     const { interactions } = req.body;
 
     // Debug logging to identify validation issues
-    console.error('[SCREEN-INTERACTIONS-DEBUG] ==========================================');
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Request received for session:', sessionId);
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Content-Type:', req.get('content-type'));
-    console.error('[SCREEN-INTERACTIONS-DEBUG] User agent:', req.get('user-agent'));
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Auth user:', req.user?.name || 'unknown');
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Request body keys:', Object.keys(req.body || {}));
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Interactions field present:', !!interactions);
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Interactions type:', typeof interactions);
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Interactions length:', Array.isArray(interactions) ? interactions.length : 'N/A');
+    logger.debug(' ==========================================');
+    logger.debug(' Request received for session:', sessionId);
+    logger.debug(' Content-Type:', req.get('content-type'));
+    logger.debug(' User agent:', req.get('user-agent'));
+    logger.debug(' Auth user:', req.user?.name || 'unknown');
+    logger.debug(' Request body keys:', Object.keys(req.body || {}));
+    logger.debug(' Interactions field present:', !!interactions);
+    logger.debug(' Interactions type:', typeof interactions);
+    logger.debug(' Interactions length:', Array.isArray(interactions) ? interactions.length : 'N/A');
     if (Array.isArray(interactions) && interactions.length > 0) {
-      console.error('[SCREEN-INTERACTIONS-DEBUG] First interaction:', JSON.stringify(interactions[0], null, 2));
+      logger.debug(' First interaction:', JSON.stringify(interactions[0], null, 2));
     }
-    console.error('[SCREEN-INTERACTIONS-DEBUG] Raw body:', JSON.stringify(req.body, null, 2));
-    console.error('[SCREEN-INTERACTIONS-DEBUG] ==========================================');
+    logger.debug(' Raw body:', JSON.stringify(req.body, null, 2));
+    logger.debug(' ==========================================');
 
     try {
       const { database } = await import('./database.js');
       const result = database.storeScreenInteractions(sessionId, interactions);
       
       if (result.success) {
-        console.error(`[HTTP] Stored ${result.count} screen interactions for recording ${sessionId}`);
+        logger.info(` Stored ${result.count} screen interactions for recording ${sessionId}`);
         res.json({ success: true, count: result.count });
       } else {
         res.status(500).json({ success: false, error: result.error });
       }
     } catch (error) {
-      console.error('Error storing screen interactions:', error);
+      logger.error('Error storing screen interactions:', error);
       res.status(500).json({ error: error.message });
     }
   });
@@ -1131,14 +1135,14 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   app.post('/chromedebug/debug-interactions/:sessionId',
     authenticate,
     (req, res) => {
-      console.error('[DEBUG-ENDPOINT] ==========================================');
-      console.error('[DEBUG-ENDPOINT] Auth bypass test successful!');
-      console.error('[DEBUG-ENDPOINT] User:', JSON.stringify(req.user, null, 2));
-      console.error('[DEBUG-ENDPOINT] Session ID:', req.params.sessionId);
-      console.error('[DEBUG-ENDPOINT] Content-Type:', req.get('content-type'));
-      console.error('[DEBUG-ENDPOINT] Request headers:', Object.keys(req.headers));
-      console.error('[DEBUG-ENDPOINT] Request body:', JSON.stringify(req.body, null, 2));
-      console.error('[DEBUG-ENDPOINT] ==========================================');
+      logger.debug(' ==========================================');
+      logger.debug(' Auth bypass test successful!');
+      logger.debug(' User:', JSON.stringify(req.user, null, 2));
+      logger.debug(' Session ID:', req.params.sessionId);
+      logger.debug(' Content-Type:', req.get('content-type'));
+      logger.debug(' Request headers:', Object.keys(req.headers));
+      logger.debug(' Request body:', JSON.stringify(req.body, null, 2));
+      logger.debug(' ==========================================');
 
       res.json({
         debug: true,
@@ -1163,7 +1167,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       const interactions = database.getScreenInteractions(sessionId);
       res.json({ interactions });
     } catch (error) {
-      console.error('Error retrieving screen interactions:', error);
+      logger.error('Error retrieving screen interactions:', error);
       res.status(500).json({ error: error.message });
     }
   });
@@ -1185,7 +1189,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(result);
     } catch (error) {
-      console.error('License validation error:', error);
+      logger.error('License validation error:', error);
       res.status(500).json({ error: 'License validation failed' });
     }
   });
@@ -1202,7 +1206,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(result);
     } catch (error) {
-      console.error('Usage check error:', error);
+      logger.error('Usage check error:', error);
       res.status(500).json({ error: 'Usage check failed' });
     }
   });
@@ -1220,7 +1224,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(result);
     } catch (error) {
-      console.error('Usage increment error:', error);
+      logger.error('Usage increment error:', error);
       res.status(500).json({ error: 'Usage increment failed' });
     }
   });
@@ -1237,7 +1241,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(result);
     } catch (error) {
-      console.error('License info error:', error);
+      logger.error('License info error:', error);
       res.status(500).json({ error: 'Failed to get license info' });
     }
   });
@@ -1258,7 +1262,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json({ instances });
     } catch (error) {
-      console.error('List instances error:', error);
+      logger.error('List instances error:', error);
       res.status(500).json({ error: 'Failed to list instances' });
     }
   });
@@ -1279,7 +1283,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(result);
     } catch (error) {
-      console.error('Deactivate instance error:', error);
+      logger.info('Deactivate instance error:', error);
       res.status(500).json({ error: 'Failed to deactivate instance' });
     }
   });
@@ -1294,7 +1298,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json(status);
     } catch (error) {
-      console.error('Cache status error:', error);
+      logger.info('Cache status error:', error);
       res.status(500).json({ error: 'Failed to get cache status' });
     }
   });
@@ -1309,14 +1313,14 @@ async function startHttpServer(chromeController = null, targetPort = null) {
 
       res.json({ success: true, message: 'License cache cleared' });
     } catch (error) {
-      console.error('Clear cache error:', error);
+      logger.info('Clear cache error:', error);
       res.status(500).json({ error: 'Failed to clear cache' });
     }
   });
 
   // Add a catch-all route for debugging
   app.use('*', (req, res, next) => {
-    console.error(`[HTTP] ${req.method} ${req.originalUrl}`);
+    logger.info(` ${req.method} ${req.originalUrl}`);
     next();
   });
 
@@ -1325,7 +1329,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   
   // 404 handler - must be last
   app.use((req, res) => {
-    console.error(`[HTTP] 404 - Route not found: ${req.method} ${req.originalUrl}`);
+    logger.info(` 404 - Route not found: ${req.method} ${req.originalUrl}`);
     res.status(404).json({ 
       success: false, 
       error: 'Endpoint not found',
@@ -1353,7 +1357,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   if (targetPort) {
     // Use the target port provided by session manager
     portsToTry = [targetPort];
-    console.error(`Attempting to start HTTP server on session manager allocated port: ${targetPort}`);
+    logger.info(`Attempting to start HTTP server on session manager allocated port: ${targetPort}`);
   } else {
     // Fall back to configured ports
     const configuredPorts = configLoader.getHttpServerPorts();
@@ -1364,7 +1368,7 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       ? [startPort, ...configuredPorts.filter(p => p !== startPort)]
       : configuredPorts;
 
-    console.error('Attempting to start HTTP server on configured ports:', portsToTry);
+    logger.info('Attempting to start HTTP server on configured ports:', portsToTry);
   }
   
   // Try configured ports in order
@@ -1373,14 +1377,14 @@ async function startHttpServer(chromeController = null, targetPort = null) {
       await new Promise((resolve, reject) => {
         server = app.listen(port, () => {
           actualPort = port;
-          console.error(`HTTP server listening on port ${actualPort}`);
+          logger.info(`HTTP server listening on port ${actualPort}`);
           resolve();
         }).on('error', reject);
       });
       break;
     } catch (error) {
       if (error.code === 'EADDRINUSE') {
-        console.error(`Port ${port} is in use, trying next...`);
+        logger.info(`Port ${port} is in use, trying next...`);
         continue;
       }
       throw error;
@@ -1388,12 +1392,12 @@ async function startHttpServer(chromeController = null, targetPort = null) {
   }
   
   if (!server || !actualPort) {
-    console.error('ERROR: All configured ports are in use:', portsToTry);
-    console.error('Please free up one of these ports or configure different ports');
+    logger.info('ERROR: All configured ports are in use:', portsToTry);
+    logger.info('Please free up one of these ports or configure different ports');
     throw new Error(`Could not find available port for HTTP server. All ports in use: ${portsToTry.join(', ')}`);
   }
   
-  console.error(`HTTP server started on port ${actualPort}`);
+  logger.info(`HTTP server started on port ${actualPort}`);
   
   // Write port file for discovery
   writePortFile(actualPort);
@@ -1419,7 +1423,7 @@ async function startWebSocketServer() {
   const wss = new WebSocketServer({ port: wsPort });
   
   wss.on('connection', async (ws) => {
-    console.error(`WebSocket client connected`);
+    logger.info(`WebSocket client connected`);
     wsClients.add(ws);
     
     // Send initial status
@@ -1459,10 +1463,10 @@ async function startWebSocketServer() {
             break;
             
           default:
-            console.error(`Unknown WebSocket message type: ${msg.type}`);
+            logger.info(`Unknown WebSocket message type: ${msg.type}`);
         }
       } catch (error) {
-        console.error('WebSocket message error:', error);
+        logger.info('WebSocket message error:', error);
         ws.send(JSON.stringify({
           type: 'error',
           data: { message: error.message }
@@ -1471,17 +1475,17 @@ async function startWebSocketServer() {
     });
     
     ws.on('close', () => {
-      console.error('WebSocket client disconnected');
+      logger.info('WebSocket client disconnected');
       wsClients.delete(ws);
     });
     
     ws.on('error', (error) => {
-      console.error('WebSocket error:', error);
+      logger.info('WebSocket error:', error);
       wsClients.delete(ws);
     });
   });
   
-  console.error(`WebSocket server listening on port ${wsPort}`);
+  logger.info(`WebSocket server listening on port ${wsPort}`);
 }
 
 // Export for use by MCP server
@@ -1499,12 +1503,12 @@ if (import.meta.url === `file://${process.argv[1]}`) {
     // Start WebSocket server for Chrome extension
     await startWebSocketServer();
 
-    console.error('ChromeDebug MCP HTTP server running with WebSocket support');
+    logger.info('ChromeDebug MCP HTTP server running with WebSocket support');
   }
 
   // Clean shutdown
   const cleanup = async (signal) => {
-    console.error(`Received ${signal}, shutting down HTTP server...`);
+    logger.info(`Received ${signal}, shutting down HTTP server...`);
     await activeController.close();
     process.exit(0);
   };
@@ -1512,5 +1516,5 @@ if (import.meta.url === `file://${process.argv[1]}`) {
   process.on('SIGINT', () => cleanup('SIGINT'));
   process.on('SIGTERM', () => cleanup('SIGTERM'));
 
-  main().catch(console.error);
+  main().catch((err) => logger.error(err, "Fatal error in HTTP server"));
 }

package/src/index.js

@@ -17,6 +17,11 @@ import {
   findActiveSessions
 } from './services/unified-session-manager.js';
 import logger from './utils/logger.js';
+import { interceptStdout } from './logger.js';
+
+// CRITICAL: Intercept stdout FIRST to prevent MCP JSON-RPC pollution
+// This must happen before any other code runs
+interceptStdout();
 
 /**
  * Main application class that orchestrates all components

package/src/logger.js

@@ -1,11 +1,102 @@
-// Simple conditional logger for Chrome Debug
-// All logs go to stderr to avoid interfering with MCP stdio communication
-const isDev = process.env.NODE_ENV === 'development';
-
-module.exports = {
-  log: (...args) => { if (isDev) console.error(...args); },
-  error: (...args) => console.error(...args),
-  warn: (...args) => { if (isDev) console.error(...args); },
-  info: (...args) => { if (isDev) console.error(...args); },
-  debug: (...args) => { if (isDev) console.error(...args); }
-};
+/**
+ * Structured logging for ChromeDebug MCP
+ * Uses pino for performance and structured output
+ * All logs go to stderr to preserve MCP stdout for JSON-RPC
+ */
+
+import pino from 'pino';
+
+// Determine log level based on environment
+const getLogLevel = () => {
+  if (process.env.LOG_LEVEL) {
+    return process.env.LOG_LEVEL;
+  }
+  if (process.env.DEBUG === 'true' || process.env.DEBUG === '1') {
+    return 'debug';
+  }
+  if (process.env.NODE_ENV === 'production') {
+    return 'warn';
+  }
+  return 'info'; // Default for development
+};
+
+// Create base pino instance
+const baseLogger = pino({
+  level: getLogLevel(),
+  transport: {
+    target: 'pino-pretty',
+    options: {
+      destination: 2, // stderr
+      colorize: true,
+      ignore: 'pid,hostname',
+      translateTime: 'HH:MM:ss',
+      singleLine: false
+    }
+  }
+});
+
+/**
+ * Create a child logger with component context
+ * @param {string} component - Component name for log context
+ * @returns {pino.Logger} Configured pino logger
+ */
+export function createLogger(component) {
+  return baseLogger.child({ component });
+}
+
+/**
+ * HTTP request logger helper
+ * Only logs if DEBUG_HTTP is enabled or in debug level
+ * @param {pino.Logger} logger - Pino logger instance
+ * @param {object} req - Express request object
+ * @param {object} options - Logging options
+ */
+export function logHttpRequest(logger, req, options = {}) {
+  const shouldLog = process.env.DEBUG_HTTP === 'true' ||
+                    process.env.DEBUG === 'true' ||
+                    logger.level === 'debug';
+
+  if (!shouldLog) return;
+
+  const requestData = {
+    method: req.method,
+    url: req.originalUrl || req.url,
+    ip: req.ip,
+    userAgent: req.get('user-agent')
+  };
+
+  if (options.verbose) {
+    requestData.headers = req.headers;
+    requestData.contentType = req.get('content-type');
+    requestData.contentLength = req.get('content-length');
+  }
+
+  logger.debug(requestData, 'HTTP Request');
+}
+
+/**
+ * Intercept stdout to prevent MCP JSON-RPC pollution
+ * Call this at application startup for MCP servers
+ */
+export function interceptStdout() {
+  const originalWrite = process.stdout.write;
+
+  process.stdout.write = function(chunk, encoding, callback) {
+    // Redirect all stdout to stderr with a warning prefix
+    const message = chunk.toString();
+    const redirectedMessage = `[STDOUT-REDIRECT] ${message}`;
+
+    return process.stderr.write(redirectedMessage, encoding, callback);
+  };
+
+  baseLogger.info('Stdout interception enabled - all output redirected to stderr for MCP safety');
+}
+
+// Default export for backward compatibility
+export default {
+  error: (...args) => baseLogger.error(...args),
+  warn: (...args) => baseLogger.warn(...args),
+  info: (...args) => baseLogger.info(...args),
+  debug: (...args) => baseLogger.debug(...args),
+  log: (...args) => baseLogger.info(...args)
+};

package/src/standalone-server.js

@@ -5,6 +5,10 @@
 
 import { startHttpServer, startWebSocketServer } from './http-server.js';
 import { removePortFile } from './port-discovery.js';
+import { interceptStdout } from './logger.js';
+
+// CRITICAL: Intercept stdout FIRST to prevent MCP JSON-RPC pollution
+interceptStdout();
 
 console.error('╔════════════════════════════════════════════════════════════════╗');
 console.error('║              Chrome Debug HTTP Server                          ║');