reactoradar 1.6.10 → 1.6.12

package/README.md

@@ -53,6 +53,17 @@
 | **React** | Component tree and props inspector via `react-devtools-core` relay |
 | **Settings** | 9 color themes, font family/size, configurable panel visibility with drag-to-reorder, Metro port config, keyboard shortcuts, auto-update, support link |
 
+### What's New in v1.6.11
+
+- **Auto-clear on reconnect** — All tabs reset automatically when the RN app relaunches (fresh session, no stale data)
+- **No more `[object Object]`** — Safe string serialization everywhere in Console, Network, and Redux panels
+- **SDK auto-detects platform** — Android emulator (`10.0.2.2`) and iOS simulator (`127.0.0.1`) detected at runtime. No manual HOST editing.
+- **Setup auto-patches legacy `createStore`** — Detects `const middleware = []` pattern and wires `reduxMiddleware` automatically
+- **SDK hardened** — BigInt/circular-safe JSON, Redux state >1MB truncated, binary response guard, reconnect backoff, console try/catch
+- **Version rollback** — Settings > Version History shows all releases with download/install buttons
+- **Panel-per-file architecture** — Each panel in its own file under `panels/`. Safer, easier to maintain.
+- **Null guards everywhere** — All panel init functions, badge updates, and DOM access null-safe
+
 ### What's New in v1.6.0
 
 - **Auto-Update** — `.dmg` builds auto-download updates from GitHub Releases. Settings shows "Restart & Update" when ready.
@@ -134,7 +145,7 @@ Console, Network, Redux, GA4, AsyncStorage data flows automatically. No config n
 | Android real device (USB) | `10.0.2.2` | `adb reverse` tunnels over USB (auto-configured) |
 | iOS real device (USB/WiFi) | Mac's LAN IP | Auto-detected. Device must be on same WiFi as Mac. |
 
-`npx reactoradar setup` auto-detects your platform and sets the correct HOST.
+The SDK auto-detects the platform at runtime. For iOS real devices, set `HOST_OVERRIDE` in `src/debug/RNDebugSDK.js` to your Mac's LAN IP. `npx reactoradar setup` handles this automatically.
 
 ### Uninstall
 
@@ -146,7 +157,7 @@ npx reactoradar remove
 
 | ReactoRadar | React Native | Engine | Architecture |
 |---|---|---|---|
-| v1.6+ | 0.74 — 0.81+ | Hermes | Old & New Architecture |
+| v1.6.11+ | 0.74 — 0.81+ | Hermes | Old & New Architecture |
 
 ## Network Inspector
 
@@ -203,13 +214,26 @@ export const store = configureStore({
 });
 ```
 
-**Legacy Redux (createStore):**
+**Legacy Redux (createStore with middleware array):**
+```js
+const middleware = [];
+// ... your existing middleware (saga, thunk, etc.)
+if (__DEV__) {
+  try {
+    const { reduxMiddleware } = require('./debug/RNDebugSDK');
+    if (reduxMiddleware) middleware.push(reduxMiddleware);
+  } catch {}
+}
+const store = createStore(rootReducer, applyMiddleware(...middleware));
+```
+
+**Legacy Redux (createStore without middleware):**
 ```js
 import { reduxEnhancer } from '../debug/RNDebugSDK';
 const store = createStore(reducer, __DEV__ ? reduxEnhancer : undefined);
 ```
 
-> **Note:** The import path is relative from your store file to `src/debug/RNDebugSDK`. Run `npx reactoradar setup` to auto-detect the correct path.
+> **Note:** `npx reactoradar setup` auto-detects your store file and patches it. If it can't, follow the examples above. The import path is relative from your store file to `src/debug/RNDebugSDK`.
 
 ## Settings
 
@@ -293,7 +317,8 @@ const store = createStore(reducer, __DEV__ ? reduxEnhancer : undefined);
 | Network tab empty | Run Metro with `--reset-cache` |
 | Blank screen after long use | Click "Clear All Data" on the memory warning banner, or restart the app |
 | Redux shows "No actions dispatched" | Verify `reduxMiddleware` is wired in your store. Run `npx reactoradar setup` to auto-detect. |
-| Real device not connecting | Ensure HOST in `src/debug/RNDebugSDK.js` matches your Mac's LAN IP. Re-run `npx reactoradar setup`. |
+| Android emulator not connecting | Run `adb reverse tcp:9090 tcp:9090 && adb reverse tcp:9091 tcp:9091 && adb reverse tcp:9092 tcp:9092`. Re-run after emulator restart. |
+| Real device not connecting | Set `HOST_OVERRIDE` in `src/debug/RNDebugSDK.js` to your Mac's LAN IP. Re-run `npx reactoradar setup`. |
 | `XHRInterceptor.js` warning | Set `networking: false` in ReactotronConfig.js |
 | GA4 events not showing | Restart Metro with `--reset-cache` after setup |
 | Port conflict | Run `kill $(lsof -ti :9092)` to free the port, then restart |

package/app.js

@@ -46,6 +46,14 @@ const esc = s => s == null ? '' : String(s)
   .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
 const ts = ms => new Date(ms).toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});
 
+// Safe string conversion — never returns [object Object]
+function safeStr(val) {
+  if (val == null) return '';
+  if (typeof val === 'string') return val;
+  if (typeof val === 'number' || typeof val === 'boolean') return String(val);
+  try { return JSON.stringify(val); } catch { return '[Complex object]'; }
+}
+
 
 function pretty(val) {
   if (val == null) return '';
@@ -63,11 +71,28 @@ function syntaxHighlight(json) {
     });
 }
 
+// Sort object keys alphabetically for display (recursive)
+function _sortKeys(obj) {
+  if (Array.isArray(obj)) return obj.map(_sortKeys);
+  if (obj !== null && typeof obj === 'object') {
+    const sorted = {};
+    Object.keys(obj).sort().forEach(k => { sorted[k] = _sortKeys(obj[k]); });
+    return sorted;
+  }
+  return obj;
+}
+
 function renderJSON(val) {
+  if (val == null) return '<span style="color:var(--text-dim)">Empty response</span>';
   try {
-    const str = typeof val === 'string' ? val : JSON.stringify(val, null, 2);
+    let data = val;
+    // Parse string JSON so we can sort keys
+    if (typeof data === 'string') { try { data = JSON.parse(data); } catch { return syntaxHighlight(esc(data)); } }
+    const sorted = _sortKeys(data);
+    const str = JSON.stringify(sorted, null, 2);
+    if (!str || str === '{}' || str === '""') return '<span style="color:var(--text-dim)">Empty response body</span>';
     return syntaxHighlight(esc(str));
-  } catch { return esc(typeof val === 'object' ? JSON.stringify(val) : String(val)); }
+  } catch { try { return esc(JSON.stringify(val)); } catch { return esc('[Unserializable data]'); } }
 }
 
 function tryURL(url) { try { return new URL(url); } catch { return null; } }

package/bin/setup.js

@@ -383,30 +383,9 @@ ${SDK_MARKER_END}
          } else {
            log('Redux store already has RNDebugSDK wired correctly — skipping');
          }
-       } else if (storeContent.includes('configureStore')) {
-         // RTK configureStore
-         // Try to add middleware to configureStore
-         if (storeContent.includes('middleware:') || storeContent.includes('middleware :')) {
-           warn('Redux store found at', C.bold + storeFile + C.reset, '— has custom middleware');
-           console.log(C.dim + '    Add manually to your middleware:' + C.reset);
-           console.log(C.dim + `      import { reduxMiddleware } from '${relSDK}';` + C.reset);
-           console.log(C.dim + '      middleware: (getDefault) => __DEV__' + C.reset);
-           console.log(C.dim + '        ? getDefault().concat(reduxMiddleware)' + C.reset);
-           console.log(C.dim + '        : getDefault(),' + C.reset);
-         } else {
-           // Add middleware field to configureStore
-           const patched = storeContent.replace(
-             /(configureStore\s*\(\s*\{)/,
-             `$1\n  middleware: (getDefaultMiddleware) =>\n    __DEV__\n      ? getDefaultMiddleware().concat(require('${relSDK}').reduxMiddleware)\n      : getDefaultMiddleware(),`
-           );
-           if (patched !== storeContent) {
-             fs.writeFileSync(storePath, patched);
-             log('Patched', C.bold + storeFile + C.reset, '— Redux middleware wired');
-           } else {
-             warn('Could not auto-patch', storeFile, '— wire Redux manually');
-           }
-         }
-        } else if (storeContent.includes('createStore')) {
+        } else if (/createStore\s*\(/.test(storeContent)) {
+          // Legacy createStore (check this BEFORE configureStore — a file may have both
+          // if the user named their wrapper function "configureStore" but uses Redux's createStore inside)
           // Legacy createStore — try to auto-patch by adding reduxMiddleware to middleware array
           let patched = storeContent;
           let didPatch = false;
@@ -449,9 +428,30 @@ ${SDK_MARKER_END}
             console.log(C.dim + '    Could not auto-patch. Add manually:' + C.reset);
             console.log(C.dim + `      if (__DEV__) { try { const { reduxMiddleware } = require('${relSDK}'); middleware.push(reduxMiddleware); } catch {} }` + C.reset);
             console.log(C.dim + '    Add this BEFORE the createStore() call in your middleware setup.' + C.reset);
+           }
+         } else if (/configureStore\s*\(\s*\{/.test(storeContent)) {
+          // RTK configureStore({ ... }) — actual Redux Toolkit usage
+          if (storeContent.includes('middleware:') || storeContent.includes('middleware :')) {
+            warn('Redux store found at', C.bold + storeFile + C.reset, '— has custom middleware');
+            console.log(C.dim + '    Add manually to your middleware:' + C.reset);
+            console.log(C.dim + `      import { reduxMiddleware } from '${relSDK}';` + C.reset);
+            console.log(C.dim + '      middleware: (getDefault) => __DEV__' + C.reset);
+            console.log(C.dim + '        ? getDefault().concat(reduxMiddleware)' + C.reset);
+            console.log(C.dim + '        : getDefault(),' + C.reset);
+          } else {
+            const patched = storeContent.replace(
+              /(configureStore\s*\(\s*\{)/,
+              `$1\n  middleware: (getDefaultMiddleware) =>\n    __DEV__\n      ? getDefaultMiddleware().concat(require('${relSDK}').reduxMiddleware)\n      : getDefaultMiddleware(),`
+            );
+            if (patched !== storeContent) {
+              fs.writeFileSync(storePath, patched);
+              log('Patched', C.bold + storeFile + C.reset, '— Redux middleware wired (RTK)');
+            } else {
+              warn('Could not auto-patch', storeFile, '— wire Redux manually');
+            }
           }
-        }
-     } else {
+         }
+      } else {
        warn('Redux detected but store file not found automatically');
        console.log(C.dim + '    Add to your store setup:' + C.reset);
        console.log(C.dim + '      import { reduxMiddleware } from \'./src/debug/RNDebugSDK\';' + C.reset);

package/init.js

@@ -47,21 +47,32 @@ if (window.electronAPI) {
 
   window.electronAPI.on('clear-all-ui', clearAll);
 
-  // When all device bridges disconnect, release heavy memory but keep logs visible.
-  // Debounced to avoid data loss during hot reloads or flaky connections.
+  // Device disconnect → debounced freeMemory. Reconnect → clearAll (fresh session).
   let _disconnectTimer = null;
+  let _wasDisconnected = false;
+
   window.electronAPI.on('device-all-disconnected', () => {
+    _wasDisconnected = true;
     clearTimeout(_disconnectTimer);
     _disconnectTimer = setTimeout(() => {
       console.log('[App] All devices disconnected — freeing memory');
       freeMemory();
     }, 3000);
   });
-  // Cancel pending free if a device reconnects
-  const _cancelDisconnectTimer = () => { clearTimeout(_disconnectTimer); _disconnectTimer = null; };
-  window.electronAPI.on('redux-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('redux', on); });
-  window.electronAPI.on('network-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('network', on); });
-  window.electronAPI.on('storage-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('storage', on); });
+
+  const _handleReconnect = () => {
+    clearTimeout(_disconnectTimer);
+    _disconnectTimer = null;
+    if (_wasDisconnected) {
+      _wasDisconnected = false;
+      console.log('[App] Device reconnected — clearing old session data');
+      clearAll();
+    }
+  };
+
+  window.electronAPI.on('redux-connected', on => { if (on) _handleReconnect(); updateDeviceBanner('redux', on); });
+  window.electronAPI.on('network-connected', on => { if (on) _handleReconnect(); updateDeviceBanner('network', on); });
+  window.electronAPI.on('storage-connected', on => { if (on) _handleReconnect(); updateDeviceBanner('storage', on); });
   window.electronAPI.on('react-dt-status', on => { updateDeviceBanner('reactDT', on); });
 
   // Cmd+F — focus the search input for the active panel

package/main.js

@@ -739,11 +739,15 @@ function setupIPC() {
     if (platform === 'android') {
       // adb logcat — show only new logs from now (not historical buffer)
       cmd = 'adb';
-      args = ['logcat', '-v', 'threadtime', '-T', '1', '*:W']; // -T 1 = last 1 line then real-time
+      // -T 1 = last 1 line then real-time. Include Firebase tags at Verbose level for GA4 event capture.
+      args = ['logcat', '-v', 'threadtime', '-T', '1', 'FA:V', 'FA-SVC:V', 'FirebaseAnalytics:V', '*:W'];
     } else if (platform === 'ios-sim') {
-      // xcrun simctl for iOS Simulator — use syslog style for parseable output
-      cmd = 'xcrun';
-      args = ['simctl', 'spawn', 'booted', 'log', 'stream', '--style', 'syslog', '--level', 'error'];
+      // Use macOS unified log to capture iOS simulator logs
+      // processImagePath CONTAINS "CoreSimulator" filters to simulator processes only
+      // Captures errors + Firebase/FIRAnalytics events (requires -FIRDebugEnabled in Xcode scheme)
+      cmd = '/usr/bin/log';
+      args = ['stream', '--style', 'syslog', '--predicate',
+        'processImagePath CONTAINS "CoreSimulator" AND (messageType >= error OR composedMessage CONTAINS "firebase" OR composedMessage CONTAINS "FIRAnalytics" OR composedMessage CONTAINS "Logging event" OR composedMessage CONTAINS "GoogleAnalytics" OR composedMessage CONTAINS "[GA4]")'];
     } else if (platform === 'ios-device') {
       // idevicesyslog for real iOS device
       cmd = 'idevicesyslog';
@@ -808,13 +812,50 @@ function setupIPC() {
     if (_nativeLogProcess) { try { _nativeLogProcess.kill(); } catch {} }
   });
 
+  // Firebase/GA tag detection for both Android and iOS
+  const _firebaseTags = new Set(['FA', 'FA-SVC', 'FA:Application', 'FA:Service', 'FirebaseAnalytics', 'FIRAnalytics', 'firebase', 'google.analytics', 'AnalyticsService']);
+  const _firebaseTagRe = /^(FA|FA-SVC|FA:Application|FA:Service|FirebaseAnalytics|FIRAnalytics|firebase|google\.analytics|AnalyticsService)/i;
+
+  function _parseFirebaseEvent(message, tag) {
+    if (!message) return null;
+    // Android FA tag patterns:
+    // "Logging event (FE): session_start(_s), Bundle[{...}]"
+    // "Setting event parameter: engagement_time_msec = 1234"
+    // "Screen exposed: main_screen"
+    let m;
+    if ((m = message.match(/Logging event\s*\(?(\w+)?\)?\s*:\s*(\S+?)(?:\((\w+)\))?\s*,?\s*Bundle\[\{(.*)\}\]/i))) {
+      const params = {};
+      // Parse "key=value, key=value" from Bundle
+      if (m[4]) m[4].split(/,\s*/).forEach(p => { const [k, v] = p.split('='); if (k) params[k.trim()] = v ? v.trim() : ''; });
+      return { eventName: m[2] || m[3] || 'unknown', source: m[1] || 'native', params };
+    }
+    if ((m = message.match(/Logging event\s*\(?(\w+)?\)?\s*:\s*(\S+)/i))) {
+      return { eventName: m[2], source: m[1] || 'native', params: {} };
+    }
+    // iOS FIRAnalytics pattern: "Logging event: origin, name, params: { ... }"
+    if ((m = message.match(/Logging event:\s*(\w+),\s*(\w+),\s*params:\s*(\{.*\})/i))) {
+      let params = {};
+      try { params = JSON.parse(m[3]); } catch {}
+      return { eventName: m[2], source: m[1] || 'native', params };
+    }
+    return null;
+  }
+
   function _parseNativeLog(line, platform) {
     if (platform === 'android') {
       // Android logcat format: "06-05 10:30:45.123  1234  5678 E TAG: message"
       const m = line.match(/^\d{2}-\d{2}\s+(\d{2}:\d{2}:\d{2})\.\d+\s+\d+\s+\d+\s+([VDIWEF])\s+([^:]+):\s*(.*)/);
       if (m) {
         const levelMap = { V: 'verbose', D: 'debug', I: 'info', W: 'warn', E: 'error', F: 'fatal' };
-        return { ts: Date.now(), time: m[1], level: levelMap[m[2]] || 'info', tag: m[3].trim(), message: m[4], raw: line };
+        const tag = m[3].trim();
+        const parsed = { ts: Date.now(), time: m[1], level: levelMap[m[2]] || 'info', tag, message: m[4], raw: line };
+        // Detect Firebase/GA events
+        if (_firebaseTagRe.test(tag)) {
+          parsed.firebase = true;
+          const fe = _parseFirebaseEvent(m[4], tag);
+          if (fe) parsed.firebaseEvent = fe;
+        }
+        return parsed;
       }
       return { ts: Date.now(), level: 'info', message: line, raw: line };
     }
@@ -823,13 +864,25 @@ function setupIPC() {
       const m1 = line.match(/(\d{2}:\d{2}:\d{2})\.\d+[^\s]*\s+\S+\s+(\S+)\[\d+\].*?<(\w+)>:\s*(.*)/);
       if (m1) {
         const levelMap = { Notice: 'info', Info: 'info', Default: 'info', Debug: 'debug', Error: 'error', Fault: 'fatal' };
-        return { ts: Date.now(), time: m1[1], level: levelMap[m1[3]] || 'info', tag: m1[2], message: m1[4], raw: line };
+        const parsed = { ts: Date.now(), time: m1[1], level: levelMap[m1[3]] || 'info', tag: m1[2], message: m1[4], raw: line };
+        if (_firebaseTagRe.test(m1[2]) || /FIRAnalytics|GoogleAnalytics|firebase/i.test(m1[4])) {
+          parsed.firebase = true;
+          const fe = _parseFirebaseEvent(m1[4], m1[2]);
+          if (fe) parsed.firebaseEvent = fe;
+        }
+        return parsed;
       }
       // idevicesyslog format: "Jun  5 10:30:45 iPhone MyApp(libsystem)[123] <Error>: message"
       const m2 = line.match(/\w+\s+\d+\s+(\d{2}:\d{2}:\d{2})\s+\S+\s+(\S+?)[\[(].*?<(\w+)>:\s*(.*)/);
       if (m2) {
         const levelMap = { Notice: 'info', Info: 'info', Debug: 'debug', Warning: 'warn', Error: 'error', Critical: 'fatal' };
-        return { ts: Date.now(), time: m2[1], level: levelMap[m2[3]] || 'info', tag: m2[2], message: m2[4], raw: line };
+        const parsed = { ts: Date.now(), time: m2[1], level: levelMap[m2[3]] || 'info', tag: m2[2], message: m2[4], raw: line };
+        if (_firebaseTagRe.test(m2[2]) || /FIRAnalytics|GoogleAnalytics|firebase/i.test(m2[4])) {
+          parsed.firebase = true;
+          const fe = _parseFirebaseEvent(m2[4], m2[2]);
+          if (fe) parsed.firebaseEvent = fe;
+        }
+        return parsed;
       }
       // Fallback
       const timeMatch = line.match(/(\d{2}:\d{2}:\d{2})/);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.6.10",
+  "version": "1.6.12",
   "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/panels/console.js

@@ -359,7 +359,8 @@ function collectEntries(val) {
     if (!(k in result)) result[k] = val[k];
   }
 
-  return Object.entries(result);
+  // Sort keys alphabetically for consistent, readable display
+  return Object.entries(result).sort((a, b) => String(a[0]).localeCompare(String(b[0])));
 }
 
 function objPreview(val, maxLen) {
@@ -400,13 +401,23 @@ function primitivePreview(val) {
   if (typeof val === 'string') return val.length > 50 ? `"${val.slice(0,50)}..."` : `"${val}"`;
   if (typeof val === 'number' || typeof val === 'boolean') return String(val);
   if (Array.isArray(val)) return `Array(${val.length})`;
-  if (typeof val === 'object') return `{...}`;
-  return String(val);
+  if (typeof val === 'object') {
+    const keys = Object.keys(val);
+    if (keys.length === 0) return '{}';
+    if (keys.length <= 3) return `{${keys.join(', ')}}`;
+    return `{${keys.slice(0, 3).join(', ')}, +${keys.length - 3}}`;
+  }
+  if (typeof val === 'function') return `[Function: ${val.name || 'anonymous'}]`;
+  return safeStr(val);
 }
 
-function createTreeNode(key, val, startCollapsed) {
+function createTreeNode(key, val, startCollapsed, parentPath) {
   const isArray = Array.isArray(val);
   const isObj = val !== null && typeof val === 'object';
+  // Build full dot-notation path for "Copy path"
+  const fullPath = key !== null
+    ? (parentPath ? (typeof key === 'number' ? `${parentPath}[${key}]` : `${parentPath}.${key}`) : String(key))
+    : (parentPath || '');
 
   if (!isObj) {
     // Primitive leaf
@@ -419,6 +430,16 @@ function createTreeNode(key, val, startCollapsed) {
       row.appendChild(k);
     }
     row.appendChild(createPrimitiveSpan(val));
+    // Right-click to copy value
+    row.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const items = [];
+      if (key !== null) items.push({ label: `Copy value of "${key}"`, action: () => navigator.clipboard.writeText(safeStr(val)) });
+      items.push({ label: 'Copy as JSON', action: () => { try { navigator.clipboard.writeText(JSON.stringify(val)); } catch { navigator.clipboard.writeText(safeStr(val)); } } });
+      if (fullPath) items.push({ label: 'Copy path', action: () => navigator.clipboard.writeText(fullPath) });
+      showContextMenu(e, items);
+    });
     return row;
   }
 
@@ -459,7 +480,7 @@ function createTreeNode(key, val, startCollapsed) {
     populated = true;
     const entries = collectEntries(val);
     entries.forEach(([k, v]) => {
-      children.appendChild(createTreeNode(k, v, true));
+      children.appendChild(createTreeNode(k, v, true, fullPath));
     });
     // For arrays show length, for objects show prototype hint
     if (isArray) {
@@ -496,6 +517,26 @@ function createTreeNode(key, val, startCollapsed) {
     }
   });
 
+  // Right-click on any node to copy its subtree
+  header.addEventListener('contextmenu', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const items = [];
+    if (key !== null) {
+      items.push({ label: `Copy "${key}" value`, action: () => {
+        try { navigator.clipboard.writeText(JSON.stringify(val, null, 2)); } catch { navigator.clipboard.writeText(safeStr(val)); }
+      }});
+      items.push({ label: `Copy "${key}" key-value`, action: () => {
+        try { navigator.clipboard.writeText(JSON.stringify({ [key]: val }, null, 2)); } catch { navigator.clipboard.writeText(`${key}: ${safeStr(val)}`); }
+      }});
+    }
+    items.push({ label: 'Copy entire object', action: () => {
+      try { navigator.clipboard.writeText(JSON.stringify(val, null, 2)); } catch { navigator.clipboard.writeText(safeStr(val)); }
+    }});
+    if (fullPath) items.push({ label: 'Copy path', action: () => navigator.clipboard.writeText(fullPath) });
+    showContextMenu(e, items);
+  });
+
   container.appendChild(children);
   return container;
 }
@@ -505,7 +546,7 @@ function _safeStr(val) {
   if (val === undefined) return 'undefined';
   if (typeof val === 'string') return val;
   if (typeof val === 'number' || typeof val === 'boolean') return String(val);
-  try { return JSON.stringify(val, null, 2); } catch { return String(val); }
+  try { return JSON.stringify(val, null, 2); } catch { return '[Complex object]'; }
 }
 
 function createPrimitiveSpan(val) {
@@ -561,7 +602,7 @@ function buildLogBody(logEntry) {
     });
   } else if (logEntry.message != null) {
     // Legacy / flat message — try to parse JSON objects out of it
-    const msg = String(logEntry.message);
+    const msg = safeStr(logEntry.message);
     // Try parsing the whole message as JSON
     try {
       const parsed = JSON.parse(msg);
@@ -691,7 +732,7 @@ function buildLogRow(l) {
       items.push({ label: 'Copy as JSON', action: () => {
         const json = l.args.map(a => {
           if (a.t === 'object' || a.t === 'array') return JSON.stringify(a.v, null, 2);
-          return String(a.v);
+          return safeStr(a.v);
         }).join(' ');
         navigator.clipboard.writeText(json);
       }});

package/panels/native.js

@@ -36,6 +36,8 @@ function initNativeLogsPanel() {
               <div class="native-prereq-step">2. Enable <b>USB Debugging</b><br/><span style="color:var(--text-dim);font-size:9px">Settings → Developer Options → USB Debugging → ON</span></div>
               <div class="native-prereq-step">3. Connect device via USB and accept the prompt</div>
               <div class="native-prereq-step">4. Verify: run <code>adb devices</code> in terminal</div>
+              <div class="native-prereq-step" style="margin-top:6px"><b>Firebase events:</b></div>
+              <div class="native-prereq-step"><code>adb shell setprop debug.firebase.analytics.app &lt;pkg&gt;</code></div>
             </div>
             <div id="nativeAndroidStatus" class="native-detect-status"></div>
             <button class="native-connect-btn" id="nativeConnectAndroid">Connect Android</button>
@@ -51,6 +53,8 @@ function initNativeLogsPanel() {
               <div class="native-prereq-step">1. Install: <code>brew install libimobiledevice</code></div>
               <div class="native-prereq-step">2. Connect device, tap <b>Trust</b> on the prompt</div>
               <div class="native-prereq-step">3. Verify: <code>idevice_id -l</code> shows device UDID</div>
+              <div class="native-prereq-step" style="margin-top:6px"><b>Firebase events:</b></div>
+              <div class="native-prereq-step">Add <code>-FIRDebugEnabled</code> to Xcode scheme launch arguments</div>
             </div>
             <div id="nativeIOSStatus" class="native-detect-status"></div>
             <div style="display:flex;gap:6px;margin-top:8px">
@@ -66,6 +70,7 @@ function initNativeLogsPanel() {
         <input id="nativeSearch" class="net-search-input" placeholder="Filter logs..." />
         <div class="native-level-filters" id="nativeLevelFilters">
           <button class="net-status-btn active" data-level="all">All</button>
+          <button class="net-status-btn" data-level="firebase" style="color:var(--yellow)">🔥 Firebase</button>
           <button class="net-status-btn" data-level="fatal">Fatal</button>
           <button class="net-status-btn" data-level="error">Error</button>
           <button class="net-status-btn" data-level="warn">Warn</button>
@@ -197,51 +202,103 @@ function _appendNativeLog(log) {
   if (!list) return;
 
   // Check filters
-  if (_nativeState.levelFilter !== 'all' && log.level !== _nativeState.levelFilter) return;
+  if (_nativeState.levelFilter === 'firebase') {
+    if (!log.firebase) return; // Only show Firebase-tagged logs
+  } else if (_nativeState.levelFilter !== 'all' && log.level !== _nativeState.levelFilter) {
+    return;
+  }
   if (_nativeState.searchFilter && !log.message?.toLowerCase().includes(_nativeState.searchFilter) && !log.tag?.toLowerCase().includes(_nativeState.searchFilter)) return;
 
-  const isExpandable = log.level === 'error' || log.level === 'fatal' || (log.message || '').length > 200;
-  const row = document.createElement('div');
-  row.className = `native-log-row native-${log.level || 'info'}`;
-
   const time = log.time || new Date(log.ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
 
-  // Header line (always visible)
-  const header = document.createElement('div');
-  header.className = 'native-log-header';
-  header.innerHTML = `<span class="native-log-time">${esc(time)}</span>`
-    + `<span class="native-log-level">${esc((log.level || 'info').toUpperCase())}</span>`
-    + (log.tag ? `<span class="native-log-tag">${esc(log.tag)}</span>` : '')
-    + `<span class="native-log-preview">${esc((log.message || '').split('\\n')[0].slice(0, 200))}</span>`;
-  row.appendChild(header);
+  // Firebase events — render GA4-style cards
+  if (log.firebase && log.firebaseEvent && _nativeState.levelFilter === 'firebase') {
+    const fe = log.firebaseEvent;
+    const row = document.createElement('div');
+    row.className = 'native-firebase-card';
+
+    const paramKeys = Object.keys(fe.params || {});
+    const paramHtml = paramKeys.length > 0
+      ? `<div class="native-firebase-params">${paramKeys.map(k =>
+          `<div class="native-firebase-param"><span class="native-firebase-param-key">${esc(k)}</span><span class="native-firebase-param-val">${esc(safeStr(fe.params[k]))}</span></div>`
+        ).join('')}</div>`
+      : '';
+
+    row.innerHTML = `
+      <div class="native-firebase-header">
+        <span class="native-firebase-event">${esc(fe.eventName)}</span>
+        <span class="native-firebase-source">${esc(fe.source)}</span>
+        <span class="native-firebase-time">${esc(time)}</span>
+      </div>
+      ${paramHtml}`;
 
-  // Expandable full message (for errors and long messages)
-  if (isExpandable) {
-    const fullMsg = document.createElement('div');
-    fullMsg.className = 'native-log-full';
-    fullMsg.style.display = 'none';
-    fullMsg.textContent = log.message || '';
-    row.appendChild(fullMsg);
+    // Expand/collapse params
+    const header = row.querySelector('.native-firebase-header');
+    const params = row.querySelector('.native-firebase-params');
+    if (header && params) {
+      params.style.display = 'none';
+      header.style.cursor = 'pointer';
+      header.addEventListener('click', () => {
+        const open = params.style.display !== 'none';
+        params.style.display = open ? 'none' : 'block';
+        row.classList.toggle('expanded', !open);
+      });
+    }
 
-    header.style.cursor = 'pointer';
-    header.addEventListener('click', () => {
-      const open = fullMsg.style.display !== 'none';
-      fullMsg.style.display = open ? 'none' : 'block';
-      row.classList.toggle('expanded', !open);
+    // Right-click
+    row.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      showContextMenu(e, [
+        { label: `Copy Event: ${fe.eventName}`, action: () => navigator.clipboard.writeText(fe.eventName) },
+        { label: 'Copy Params (JSON)', action: () => navigator.clipboard.writeText(JSON.stringify(fe.params, null, 2)) },
+        { label: 'Copy Raw Log', action: () => navigator.clipboard.writeText(log.raw || log.message || '') },
+      ]);
     });
-  }
 
-  // Right-click to copy
-  row.addEventListener('contextmenu', (e) => {
-    e.preventDefault();
-    showContextMenu(e, [
-      { label: 'Copy Message', action: () => navigator.clipboard.writeText(log.message || '') },
-      { label: 'Copy Raw Line', action: () => navigator.clipboard.writeText(log.raw || log.message || '') },
-      ...(log.tag ? [{ label: `Copy Tag (${log.tag})`, action: () => navigator.clipboard.writeText(log.tag) }] : []),
-    ]);
-  });
+    list.appendChild(row);
+  } else {
+    // Standard log row — with Firebase badge if applicable
+    const isExpandable = log.level === 'error' || log.level === 'fatal' || (log.message || '').length > 200;
+    const row = document.createElement('div');
+    row.className = `native-log-row native-${log.level || 'info'}${log.firebase ? ' native-firebase' : ''}`;
 
-  list.appendChild(row);
+    const header = document.createElement('div');
+    header.className = 'native-log-header';
+    header.innerHTML = `<span class="native-log-time">${esc(time)}</span>`
+      + `<span class="native-log-level">${esc((log.level || 'info').toUpperCase())}</span>`
+      + (log.firebase ? '<span class="native-firebase-badge">Firebase</span>' : '')
+      + (log.tag ? `<span class="native-log-tag">${esc(log.tag)}</span>` : '')
+      + `<span class="native-log-preview">${esc((log.message || '').split('\\n')[0].slice(0, 200))}</span>`;
+    row.appendChild(header);
+
+    if (isExpandable) {
+      const fullMsg = document.createElement('div');
+      fullMsg.className = 'native-log-full';
+      fullMsg.style.display = 'none';
+      fullMsg.textContent = log.message || '';
+      row.appendChild(fullMsg);
+
+      header.style.cursor = 'pointer';
+      header.addEventListener('click', () => {
+        const open = fullMsg.style.display !== 'none';
+        fullMsg.style.display = open ? 'none' : 'block';
+        row.classList.toggle('expanded', !open);
+      });
+    }
+
+    row.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      const items = [
+        { label: 'Copy Message', action: () => navigator.clipboard.writeText(log.message || '') },
+        { label: 'Copy Raw Line', action: () => navigator.clipboard.writeText(log.raw || log.message || '') },
+      ];
+      if (log.tag) items.push({ label: `Copy Tag (${log.tag})`, action: () => navigator.clipboard.writeText(log.tag) });
+      if (log.firebaseEvent) items.push({ label: `Copy Event: ${log.firebaseEvent.eventName}`, action: () => navigator.clipboard.writeText(log.firebaseEvent.eventName) });
+      showContextMenu(e, items);
+    });
+
+    list.appendChild(row);
+  }
 
   // Cap DOM rows
   while (list.children.length > 1000) list.firstChild.remove();

package/panels/network.js

@@ -203,13 +203,13 @@ function initNetworkPanel() {
           method: r.method || 'GET',
           url: r.url || '',
           headers: Object.entries(r.requestHeaders || {}).map(([n, v]) => ({ name: n, value: v })),
-          postData: r.requestBody ? { mimeType: 'application/json', text: typeof r.requestBody === 'object' ? JSON.stringify(r.requestBody) : String(r.requestBody) } : undefined,
+          postData: r.requestBody ? { mimeType: 'application/json', text: typeof r.requestBody === 'object' ? JSON.stringify(r.requestBody) : safeStr(r.requestBody) } : undefined,
         },
         response: {
           status: r.status || 0,
           statusText: r.statusText || '',
           headers: Object.entries(r.responseHeaders || {}).map(([n, v]) => ({ name: n, value: v })),
-          content: { size: -1, mimeType: 'application/json', text: r.responseBody ? (typeof r.responseBody === 'object' ? JSON.stringify(r.responseBody) : String(r.responseBody)) : '' },
+          content: { size: -1, mimeType: 'application/json', text: r.responseBody ? (typeof r.responseBody === 'object' ? JSON.stringify(r.responseBody) : safeStr(r.responseBody)) : '' },
         },
         timings: { send: 0, wait: r.duration || 0, receive: 0 },
       };
@@ -835,7 +835,7 @@ function renderNetDetailContent(r) {
       if (!keys.length) return `<div class="section-label">${title}</div><span style="color:var(--text-dim)">none</span>`;
       return `<div class="section-label">${title}</div><div class="kv-grid">${keys.map(k => {
         let val = h[k];
-        if (val && typeof val === 'object') { try { val = JSON.stringify(val); } catch { val = String(val); } }
+        if (val && typeof val === 'object') { try { val = JSON.stringify(val); } catch { val = '[Complex object]'; } }
         return `<span class="kv-key">${esc(k)}</span><span class="kv-val">${esc(val)}</span>`;
       }).join('')}</div>`;
     };
@@ -870,6 +870,7 @@ function renderNetDetailContent(r) {
     const isErrStatus = _isHttpError(r);
     if (r.phase === 'error' && !r.responseBody) { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
     if (!r.responseBody && r.phase !== 'response') { body.innerHTML = '<span style="color:var(--text-dim)">Pending...</span>'; return; }
+    if (r.responseBody == null || r.responseBody === '') { body.innerHTML = '<span style="color:var(--text-dim)">Empty response body</span>'; return; }
     // Render as collapsible JSON tree with right-click copy
     const val = r.responseBody;
     let treeData = val;
@@ -896,13 +897,14 @@ function renderNetDetailContent(r) {
       });
     } else {
       body.innerHTML = isErrStatus
-        ? `<span style="color:var(--red)">${esc(String(r.responseBody))}</span>`
+        ? `<span style="color:var(--red)">${esc(safeStr(r.responseBody))}</span>`
         : '<span style="color:var(--text-dim)">No preview available</span>';
     }
   } else if (tab === 'response') {
     const isErrStatus = _isHttpError(r);
     if (r.phase === 'error' && !r.responseBody) { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
     if (!r.responseBody && r.phase !== 'response') { body.innerHTML = '<span style="color:var(--text-dim)">Pending...</span>'; return; }
+    if (r.responseBody == null || r.responseBody === '') { body.innerHTML = '<span style="color:var(--text-dim)">Empty response body</span>'; return; }
     if (isErrStatus) {
       const errBanner = document.createElement('div');
       errBanner.style.cssText = 'color:var(--red);font-weight:600;padding:4px 0 8px;font-size:11px;border-bottom:1px solid rgba(255,94,114,.15);margin-bottom:8px';
@@ -916,6 +918,28 @@ function renderNetDetailContent(r) {
     } else {
       body.innerHTML = renderJSON(r.responseBody);
     }
+    // Right-click to copy response object
+    body.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      const sel = window.getSelection();
+      const items = [];
+      if (sel && sel.toString().length > 0) {
+        items.push({ label: 'Copy Selection', action: () => navigator.clipboard.writeText(sel.toString()) });
+      }
+      items.push({ label: 'Copy Response Object', action: () => {
+        try {
+          const data = typeof r.responseBody === 'string' ? JSON.parse(r.responseBody) : r.responseBody;
+          navigator.clipboard.writeText(JSON.stringify(_sortKeys(data), null, 2));
+        } catch { navigator.clipboard.writeText(safeStr(r.responseBody)); }
+      }});
+      items.push({ label: 'Copy Response (minified)', action: () => {
+        try {
+          const data = typeof r.responseBody === 'string' ? JSON.parse(r.responseBody) : r.responseBody;
+          navigator.clipboard.writeText(JSON.stringify(_sortKeys(data)));
+        } catch { navigator.clipboard.writeText(safeStr(r.responseBody)); }
+      }});
+      showContextMenu(e, items);
+    });
   }
 }
 
@@ -942,7 +966,7 @@ function showNetContextMenu(e, r) {
 
 function showPreviewCopyMenu(e, fullData) {
   const items = [
-    { label: 'Copy Object', action: () => navigator.clipboard.writeText(JSON.stringify(fullData, null, 2)) },
+    { label: 'Copy Object', action: () => navigator.clipboard.writeText(JSON.stringify(_sortKeys(fullData), null, 2)) },
   ];
   const sel = window.getSelection();
   if (sel && sel.toString().length > 0) {

package/panels/redux.js

@@ -82,7 +82,7 @@ function _findLeafChanges(oldVal, newVal, basePath, maxDepth) {
       changes.push({ path, oldVal: a, newVal: b });
       return;
     }
-    const allKeys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    const allKeys = [...new Set([...Object.keys(a), ...Object.keys(b)])].sort();
     allKeys.forEach(k => {
       if (!_deepEqual(a[k], b[k])) {
         const childPath = path ? `${path}.${k}` : k;
@@ -169,7 +169,7 @@ function _createHighlightedTree(key, val, changedPaths, currentPath, isOld) {
   function populate() {
     if (populated) return;
     populated = true;
-    const entries = isArray ? val.map((v, i) => [i, v]) : Object.entries(val);
+    const entries = isArray ? val.map((v, i) => [i, v]) : Object.entries(val).sort((a, b) => String(a[0]).localeCompare(String(b[0])));
     entries.forEach(([k, v]) => {
       children.appendChild(_createHighlightedTree(k, v, changedPaths, myPath, isOld));
     });
@@ -197,7 +197,7 @@ function handleReduxEvent(event) {
   const prevState = state.redux.states.length > 0 ? state.redux.states[state.redux.states.length - 1] : null;
   const changedKeys = [];
   if (prevState && nextState && typeof prevState === 'object' && typeof nextState === 'object') {
-    const allKeys = new Set([...Object.keys(prevState), ...Object.keys(nextState)]);
+    const allKeys = [...new Set([...Object.keys(prevState), ...Object.keys(nextState)])].sort();
     allKeys.forEach(k => { if (!_deepEqual(prevState[k], nextState[k])) changedKeys.push(k); });
   }
 

package/styles.css

@@ -1799,6 +1799,78 @@ mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px
 .native-fatal { background: rgba(255,94,114,.08); }
 .native-fatal .native-log-msg { color: var(--red); font-weight: 700; }
 
+/* Firebase event cards (GA4-style in Native Logs) */
+.native-firebase-badge {
+  display: inline-block;
+  background: rgba(255,196,0,.15);
+  color: #ffa500;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+  text-transform: uppercase;
+}
+.native-firebase { border-left: 2px solid #ffa500; }
+.native-firebase-card {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  border-left: 3px solid #ffa500;
+  transition: background 0.12s;
+}
+.native-firebase-card:hover { background: var(--bg3); }
+.native-firebase-card.expanded { background: var(--bg3); }
+.native-firebase-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+}
+.native-firebase-event {
+  font-weight: 700;
+  color: var(--accent);
+  font-size: 12px;
+}
+.native-firebase-source {
+  font-size: 9px;
+  color: var(--text-dim);
+  background: var(--bg3);
+  padding: 1px 5px;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+.native-firebase-time {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--text-dim);
+  font-variant-numeric: tabular-nums;
+}
+.native-firebase-params {
+  margin-top: 6px;
+  padding: 6px 8px;
+  background: var(--bg2);
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+.native-firebase-param {
+  display: flex;
+  gap: 8px;
+  padding: 2px 0;
+  font-size: 10px;
+  border-bottom: 1px solid var(--border);
+}
+.native-firebase-param:last-child { border-bottom: none; }
+.native-firebase-param-key {
+  color: var(--accent);
+  font-weight: 600;
+  min-width: 120px;
+  flex-shrink: 0;
+}
+.native-firebase-param-val {
+  color: var(--text-mid);
+  word-break: break-all;
+}
+
 /* ── Detail Panel Search ───────────────────────────────────────────────────── */
 .detail-search-wrap { display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 0 6px; }
 .detail-search-input { width: 150px; font-size: 10px; padding: 3px 6px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); border-radius: 3px; outline: none; }