reactoradar 1.5.0 → 1.5.3

package/app.js

@@ -205,15 +205,19 @@ if (window.electronAPI) {
   window.electronAPI.on('ports', ports => { state.ports = ports; });
 
   window.electronAPI.on('cdp-targets', targets => {
-    const hasCDP = targets?.length > 0;
-    $('btnCDP').textContent = hasCDP
-      ? `JS Debugger (${targets.length}) ↗`
-      : 'JS Debugger ↗';
-    $('btnCDP').style.opacity = hasCDP ? '1' : '0.5';
-    if (hasCDP) {
-      $('btnCDP').onclick = () => window.electronAPI.openCDPTarget(targets[0].webSocketDebuggerUrl);
+    state.cdpTargets = targets;
+    const btn = $('btnCDP');
+    if (btn) {
+      const hasCDP = targets?.length > 0;
+      const port = getStoredMetroPort();
+      btn.textContent = hasCDP
+        ? `JS Debugger (:${port}) [${targets.length}] ↗`
+        : `JS Debugger (:${port}) ↗`;
+      btn.style.opacity = hasCDP ? '1' : '0.5';
+      if (hasCDP) {
+        btn.onclick = () => window.electronAPI.openCDPTarget(targets[0].webSocketDebuggerUrl);
+      }
     }
-
   });
 
   window.electronAPI.on('redux-event', handleReduxEvent);
@@ -257,8 +261,8 @@ if (window.electronAPI) {
 
   window.electronAPI.on('app-version', (version) => {
     state._appVersion = version;
-    const el = $('aboutVersion');
-    if (el) el.textContent = 'v' + version;
+    // Update anywhere the version is displayed
+    document.querySelectorAll('#aboutVersion').forEach(el => el.textContent = 'v' + version);
   });
 
   window.electronAPI.on('update-available', ({ current, latest }) => {
@@ -2149,9 +2153,9 @@ function initReactPanel() {
       <div class="react-connect-hint" id="reactHint">
         <div class="icon" style="font-size:40px;opacity:.2">⚛️</div>
         <div class="label">React DevTools</div>
-        <div class="hint">Launches as a separate window connected to your app</div>
-        <div class="hint">React Native auto-connects on port <code>8097</code> in dev mode</div>
-        <button class="btn-launch" id="btnReactDT">Open React DevTools ↗</button>
+        <div class="hint">Opens as a separate window connected to your app via port 8097</div>
+        <div class="hint" style="margin-top:8px;color:var(--yellow)">Note: The RN inspector overlay won't work while React DevTools is connected. Close the DevTools window to use the built-in inspector.</div>
+        <button class="btn-launch" id="btnReactDT" style="margin-top:12px">Open React DevTools ↗</button>
       </div>
     </div>`;
 
@@ -2182,6 +2186,12 @@ function getStoredAppName() {
 function setStoredAppName(n) {
   try { localStorage.setItem('rn-debug-appname', n); } catch {}
 }
+function getStoredMetroPort() {
+  try { return parseInt(localStorage.getItem('rn-debug-metro-port')) || 8081; } catch { return 8081; }
+}
+function setStoredMetroPort(p) {
+  try { localStorage.setItem('rn-debug-metro-port', String(p)); } catch {}
+}
 function applyAppName(name) {
   const logo = document.querySelector('.logo');
   if (logo) {
@@ -2280,10 +2290,11 @@ function initSettingsPanel() {
             </div>
           </div>
           <div class="settings-row">
-            <div>
-              <div class="settings-label">Metro Bundler</div>
-              <div class="settings-hint">CDP target discovery on :8081</div>
+            <div style="display:flex;flex-direction:column;gap:2px">
+              <div class="settings-label">Metro Bundler Port</div>
+              <div class="settings-hint">Port for CDP target discovery (default: 8081)</div>
             </div>
+            <input id="metroPortInput" type="number" class="net-search-input" style="width:70px;text-align:center" value="${getStoredMetroPort()}" />
           </div>
         </div>
         <div class="settings-section">
@@ -2334,6 +2345,7 @@ function initSettingsPanel() {
             <div class="about-links" style="display:flex;gap:16px;justify-content:center">
               <span class="about-link" id="linkGithub">GitHub</span>
               <span class="about-link" id="linkDocs">Documentation</span>
+              <span class="about-link" id="linkLinkedIn">Developer LinkedIn</span>
             </div>
           </div>
         </div>
@@ -2383,6 +2395,9 @@ function initSettingsPanel() {
   $('linkDocs')?.addEventListener('click', () => {
     window.electronAPI?.openExternal('https://github.com/sharanagouda/react-native-debugger#readme');
   });
+  $('linkLinkedIn')?.addEventListener('click', () => {
+    window.electronAPI?.openExternal('https://www.linkedin.com/in/sharanagoudamk/');
+  });
 
   // App name
   $('appNameInput').addEventListener('change', (e) => {
@@ -2396,6 +2411,15 @@ function initSettingsPanel() {
     applyAppName('ReactoRadar');
   });
 
+  // Metro Port
+  $('metroPortInput')?.addEventListener('change', (e) => {
+    let port = parseInt(e.target.value.trim());
+    if (isNaN(port) || port < 1024 || port > 65535) port = 8081;
+    e.target.value = port;
+    setStoredMetroPort(port);
+    window.electronAPI?.setMetroPort(port);
+  });
+
   // Font size controls
   $('fontSizeDown').addEventListener('click', () => {
     let size = getStoredFontSize();
@@ -2416,6 +2440,9 @@ applyTheme(getStoredTheme());
 applyFontSize(getStoredFontSize());
 applyAppName(getStoredAppName());
 
+// Send stored metro port to backend
+window.electronAPI?.setMetroPort(getStoredMetroPort());
+
 // ─────────────────────────────────────────────────────────────────────────────
 // SOURCES PANEL — CDP-based file browser + breakpoints
 // ─────────────────────────────────────────────────────────────────────────────
@@ -2667,7 +2694,8 @@ async function loadSourceFile(filepath) {
   // Strategy 2: Fetch from Metro
   if (!source) {
     try {
-      const resp = await fetch(`http://localhost:8081/${filepath}?platform=ios&dev=true`);
+      const port = getStoredMetroPort();
+      const resp = await fetch(`http://localhost:${port}/${filepath}?platform=ios&dev=true`);
       if (resp.ok) source = await resp.text();
     } catch {}
   }

package/main.js

@@ -38,16 +38,25 @@ app.whenReady().then(async () => {
 
   await createMainWindow();
 
-  // Send version to renderer (delay to ensure IPC listeners are registered)
-  const appVersion = require('./package.json').version;
+  // Send version to renderer — try package.json, fallback to app.getVersion()
+  let appVersion;
+  try { appVersion = require('./package.json').version; } catch { appVersion = app.getVersion(); }
+  // Send multiple times to ensure renderer catches it
   mainWindow?.webContents.on('did-finish-load', () => {
-    setTimeout(() => mainWindow?.webContents.send('app-version', appVersion), 500);
+    [200, 1000, 3000].forEach(delay => {
+      setTimeout(() => {
+        if (mainWindow && !mainWindow.isDestroyed()) {
+          mainWindow.webContents.send('app-version', appVersion);
+        }
+      }, delay);
+    });
   });
 
   // Check for updates (non-blocking)
   checkForUpdates();
   startBridgeServers();
-  startReactDevToolsServer();
+  // React DevTools relay NOT started by default — it blocks RN's built-in inspector.
+  // Started on-demand when user clicks React tab or Cmd+R.
   setupMetroCDPProxy();
   setupIPC();
   buildMenu();
@@ -309,6 +318,8 @@ function setupIPC() {
   });
 
   ipcMain.on('open-react-devtools', () => {
+    // Start the relay server if not already running
+    if (!reactDTServer) startReactDevToolsServer();
     // Open standalone react-devtools window
     const rdtWin = new BrowserWindow({
       width: 1100,
@@ -324,6 +335,12 @@ function setupIPC() {
 
   // clear-all is handled by renderer via clear-all-ui IPC from menu
 
+  ipcMain.on('set-metro-port', (_, port) => {
+    PORTS.METRO = port;
+    fetchCDPTargets();
+    mainWindow?.webContents.send('ports', PORTS);
+  });
+
   ipcMain.on('set-network-capture', (_, enabled) => {
     // Broadcast to connected RN apps so they can stop/start intercepting
     networkClients.forEach(ws => {
@@ -383,7 +400,7 @@ function setupIPC() {
         // Also try to detect from Metro's /json endpoint
         try {
           const result = require('child_process').execSync(
-            "lsof -i :8081 -t 2>/dev/null | head -1 | xargs -I{} lsof -p {} -Fn 2>/dev/null | grep '^n/' | grep 'node_modules' | head -1 | sed 's|^n||;s|/node_modules.*||'",
+            `lsof -i :${PORTS.METRO} -t 2>/dev/null | head -1 | xargs -I{} lsof -p {} -Fn 2>/dev/null | grep '^n/' | grep 'node_modules' | head -1 | sed 's|^n||;s|/node_modules.*||'`,
             { encoding: 'utf8', timeout: 3000 }
           ).trim();
           if (result && fs.existsSync(result)) candidates.unshift(result);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.5.0",
+  "version": "1.5.3",
   "description": "macOS debugger for React Native — Console, Sources, Network, Performance, Memory, Redux, AsyncStorage, React tree. Supports RN 0.74+ with Hermes and New Architecture.",
   "main": "main.js",
   "bin": {

package/preload.js

@@ -26,6 +26,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   setNetworkCapture: (enabled) => ipcRenderer.send('set-network-capture', enabled),
   setStackTraceCapture: (enabled) => ipcRenderer.send('set-stack-trace-capture', enabled),
   setNetworkThrottle: (profile) => ipcRenderer.send('set-network-throttle', profile),
+  setMetroPort: (port) => ipcRenderer.send('set-metro-port', port),
   readSourceFile: (filepath) => ipcRenderer.invoke('read-source-file', filepath),
   openExternal: (url) => ipcRenderer.send('open-external', url),
 });

package/sdk/RNDebugSDK.js

@@ -34,6 +34,49 @@ let _stackTraceEnabled = false; // Disabled by default for performance
 let _throttleProfile = 'none'; // 'none', 'fast3g', 'slow3g', 'offline'
 const THROTTLE_DELAYS = { none: 0, fast3g: 500, slow3g: 2000, offline: -1 };
 
+// ─── SDK Pause/Resume (allows inspector to work without SDK interference) ────
+// When paused, console/fetch/XHR interception is disabled so the RN inspector
+// and CDP debugger can work without conflicts. Controlled via the debugger app.
+let _sdkPaused = false;
+
+function _isSDKActive() {
+  return !_sdkPaused;
+}
+
+// ─── Debugger Detection ──────────────────────────────────────────────────────
+// Detect if a CDP debugger (Chrome DevTools / Hermes inspector) is attached.
+// When detected, we back off our patches to avoid conflicts with the inspector.
+let _debuggerDetected = false;
+let _debuggerCheckInterval = null;
+
+function _checkDebuggerAttached() {
+  // Method 1: Check if Hermes debugger globals are set
+  const hermesDebugger = !!(global.__DEBUGGER_CONNECTED__ || global.__HERMES_DEBUGGER_CONNECTED__);
+  // Method 2: Check React DevTools hook for debugger attachment
+  const rdtHook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  const rdtDebugger = !!(rdtHook && rdtHook._debuggerAttached);
+  // Method 3: Check if CDP is connected via the inspector agent
+  const inspectorConnected = !!(global.__inspectorGlobalObject || global.__inspector);
+
+  const wasDetected = _debuggerDetected;
+  _debuggerDetected = hermesDebugger || rdtDebugger || inspectorConnected;
+
+  if (_debuggerDetected && !wasDetected) {
+    _console.log('[RNDebugSDK] Debugger detected — SDK interception paused to avoid inspector conflicts. Use the ReactoRadar app to resume.');
+  } else if (!_debuggerDetected && wasDetected) {
+    _console.log('[RNDebugSDK] Debugger disconnected — SDK interception resumed.');
+  }
+}
+
+// Check periodically (every 3s) — lightweight, no performance impact
+_debuggerCheckInterval = setInterval(_checkDebuggerAttached, 3000);
+// Also check once immediately after a short delay (debugger may attach during startup)
+setTimeout(_checkDebuggerAttached, 1000);
+
+function _shouldIntercept() {
+  return _isSDKActive() && !_debuggerDetected;
+}
+
 // ─── WebSocket Factory ────────────────────────────────────────────────────────
 function makeChannel(port, name, onMessage) {
   let ws = null, queue = [], connected = false;
@@ -72,6 +115,21 @@ const mainCh    = makeChannel(PORTS.NETWORK_AND_CONSOLE, 'main', (msg) => {
     if (msg.action === 'set-network-capture') _networkCaptureEnabled = !!msg.enabled;
     if (msg.action === 'set-throttle') _throttleProfile = msg.profile || 'none';
     if (msg.action === 'set-stack-trace') _stackTraceEnabled = !!msg.enabled;
+    // Pause/Resume SDK interception (allows inspector to work)
+    if (msg.action === 'pause-sdk') {
+      _sdkPaused = true;
+      _console.log('[RNDebugSDK] SDK paused — inspector/debugger can now inspect the app freely.');
+      mainCh.send({ type: 'control', action: 'sdk-status', paused: true });
+    }
+    if (msg.action === 'resume-sdk') {
+      _sdkPaused = false;
+      _console.log('[RNDebugSDK] SDK resumed — interception re-enabled.');
+      mainCh.send({ type: 'control', action: 'sdk-status', paused: false });
+    }
+    // Query current status
+    if (msg.action === 'query-sdk-status') {
+      mainCh.send({ type: 'control', action: 'sdk-status', paused: _sdkPaused, debuggerDetected: _debuggerDetected });
+    }
   }
 });
 const reduxCh   = makeChannel(PORTS.REDUX,   'redux');
@@ -130,6 +188,9 @@ LEVELS.forEach(level => {
   _console[level] = console[level].bind(console);
   console[level] = (...args) => {
     _console[level](...args);
+    // Skip interception when SDK is paused or debugger is attached
+    // This prevents double-logging and message queue deadlocks with CDP
+    if (!_shouldIntercept()) return;
     const structuredArgs = args.map(serializeArg);
     const message = args.map(a => {
       if (typeof a === 'string') return a;
@@ -167,6 +228,10 @@ function _flattenHeaders(h) {
 // ─── Fetch Intercept ─────────────────────────────────────────────────────────
 const _fetch = global.fetch;
 global.fetch = async (input, init = {}) => {
+  // When SDK is paused or debugger is attached, pass through without interception
+  // This prevents racing with CDP's own Fetch.enable domain
+  if (!_shouldIntercept()) return _fetch(input, init);
+
   // Throttle: simulate slow network or offline
   const delay = THROTTLE_DELAYS[_throttleProfile] || 0;
   if (delay === -1) return Promise.reject(new TypeError('Network request failed (offline throttle)'));
@@ -236,24 +301,24 @@ global.fetch = async (input, init = {}) => {
         return _setHeader.apply(xhr, arguments);
       };
 
-      // Wrap send
-      const _send = xhr.send.bind(xhr);
-      xhr.send = function(body) {
-        if (_networkCaptureEnabled && !meta.sent) {
-          meta.sent = true;
-          let reqBody = null;
-          if (body != null) {
-            try { reqBody = typeof body === 'string' ? body : JSON.parse(JSON.stringify(body)); } catch { reqBody = String(body); }
-          }
-          mainCh.send({ type: 'network', phase: 'request', id: meta.id, url: meta.url,
-            method: meta.method, requestHeaders: meta.headers, requestBody: reqBody });
-        }
-        return _send.apply(xhr, arguments);
-      };
+       // Wrap send
+       const _send = xhr.send.bind(xhr);
+       xhr.send = function(body) {
+         if (_shouldIntercept() && _networkCaptureEnabled && !meta.sent) {
+           meta.sent = true;
+           let reqBody = null;
+           if (body != null) {
+             try { reqBody = typeof body === 'string' ? body : JSON.parse(JSON.stringify(body)); } catch { reqBody = String(body); }
+           }
+           mainCh.send({ type: 'network', phase: 'request', id: meta.id, url: meta.url,
+             method: meta.method, requestHeaders: meta.headers, requestBody: reqBody });
+         }
+         return _send.apply(xhr, arguments);
+       };
 
       // Listen for completion
-      xhr.addEventListener('readystatechange', function() {
-        if (xhr.readyState !== 4 || !meta.sent || !_networkCaptureEnabled) return;
+       xhr.addEventListener('readystatechange', function() {
+         if (xhr.readyState !== 4 || !meta.sent || !_shouldIntercept() || !_networkCaptureEnabled) return;
         try {
           const duration = Date.now() - meta.t0;
           if (xhr.status > 0) {
@@ -310,17 +375,8 @@ global.fetch = async (input, init = {}) => {
     _console.log('[RNDebugSDK] XHR constructor wrapped for network capture');
   }
 
-  // Wrap immediately if available
-  if (global.XMLHttpRequest) wrapXHR();
-
-  // Also wrap after RN polyfills set up (they replace global.XMLHttpRequest)
-  [0, 50, 200, 500].forEach(delay => {
-    setTimeout(() => {
-      if (global.XMLHttpRequest && !global.XMLHttpRequest.__dbgWrapped) {
-        wrapXHR();
-      }
-    }, delay);
-  });
+   // Wrap immediately if available
+   if (global.XMLHttpRequest) wrapXHR();
 })();
 
 // ─── Axios Interceptor (belt-and-suspenders with XHR patch) ──────────────────
@@ -334,8 +390,8 @@ setTimeout(() => {
     function addDbgInterceptors(instance) {
       if (!instance || !instance.interceptors || instance.__dbgInt) return;
       instance.__dbgInt = true;
-      instance.interceptors.request.use(config => {
-        if (!_networkCaptureEnabled) return config;
+       instance.interceptors.request.use(config => {
+         if (!_shouldIntercept() || !_networkCaptureEnabled) return config;
         const id = `ax-${Date.now()}-${Math.random().toString(36).slice(2,6)}`;
         config._dbgId = id;
         config._dbgT0 = Date.now();
@@ -348,9 +404,10 @@ setTimeout(() => {
         mainCh.send({ type:'network', phase:'request', id, url, method:(config.method||'GET').toUpperCase(), requestHeaders:h, requestBody:body });
         return config;
       }, e => Promise.reject(e));
-      instance.interceptors.response.use(resp => {
-        const c = resp.config || {};
-        if (!c._dbgId) return resp;
+       instance.interceptors.response.use(resp => {
+         if (!_shouldIntercept() || !_networkCaptureEnabled) return resp;
+         const c = resp.config || {};
+         if (!c._dbgId) return resp;
         const url = c.baseURL ? c.baseURL.replace(/\/+$/,'') + '/' + (c.url||'').replace(/^\/+/,'') : (c.url||'');
         const dur = c._dbgT0 ? Date.now() - c._dbgT0 : 0;
         const rh = {};
@@ -361,9 +418,10 @@ setTimeout(() => {
         mainCh.send({ type:'network', phase:'response', id:c._dbgId, url, method:(c.method||'GET').toUpperCase(),
           status:resp.status, statusText:resp.statusText, duration:dur, responseHeaders:rh, responseBody:body });
         return resp;
-      }, err => {
-        const c = err?.config || {};
-        if (c._dbgId) {
+       }, err => {
+         if (!_shouldIntercept() || !_networkCaptureEnabled) return Promise.reject(err);
+         const c = err?.config || {};
+         if (c._dbgId) {
           const url = c.baseURL ? c.baseURL.replace(/\/+$/,'') + '/' + (c.url||'').replace(/^\/+/,'') : (c.url||'');
           const dur = c._dbgT0 ? Date.now() - c._dbgT0 : 0;
           const r = err?.response;