feat: network inspector - add launch configuration for new inspector (#1798)

### Description

This PR introduces additional Launch Configuration option `Use Native
Network Inspector Implementation`, which controls whether the new
network inspector is enabled.

The option can be explicitly set to `Yes` or `No` with caveat, that for
react native version < 0.83.0 the inspector will not showcase any
massages, which is provided in the description of option.

When set to `Detect Automatically` the extension will detect whether
current version is >= 0.83.0 and set the flag accordingly.

<img width="583" height="682" alt="Screenshot 2025-12-08 at 15 08 20"
src="https://github.com/user-attachments/assets/8504d899-e95b-4872-98c5-7dd65cd062a0"
/>

### How Has This Been Tested: 

Changed configuration and used debugger to determine which inspector
instance is initialised in `network-plugin.ts` in the constructor,
changed the `package.json` of react native module in `node_modules` to
`0.83.0` to check whether automatic detection works correctly, verified
that changing the option properly edits `launch.json`

### How Has This Change Been Documented:

Will have to be done asap, wip for now.

Author: pFornagiel

packages/vscode-extension/package.json

@@ -884,6 +884,10 @@
               "disableNativeBuildStaleChecks": {
                 "type": "boolean",
                 "description": "When set to true, Radon will not run fingerprint checks on reloads and after file changes that would detect whether the native code needs to be rebuilt."
+              },
+              "useNativeNetworkInspector": {
+                "type": "boolean",
+                "description": "When set to true, Radon will use the Native (\"Fusebox\") Network Inspector implementation introduced in 0.83.0. Note that this is only supported on React Native 0.83.0 and newer, and might not intercept network messages on earlier versions."
               }
             }
           }

packages/vscode-extension/src/common/LaunchConfig.ts

@@ -33,6 +33,7 @@ export interface LaunchOptions {
   useCustomJSDebugger?: boolean;
   metroPort?: number;
   disableNativeBuildStaleChecks?: boolean;
+  useNativeNetworkInspector?: boolean;
 }
 
 export const LAUNCH_OPTIONS_KEYS = [
@@ -50,6 +51,7 @@ export const LAUNCH_OPTIONS_KEYS = [
   "preview",
   "usePrebuild",
   "useOldDevtools",
+  "useNativeNetworkInspector",
   "useCustomJSDebugger",
   "metroPort",
   "disableNativeBuildStaleChecks",

packages/vscode-extension/src/plugins/network/network-plugin.ts

@@ -1,23 +1,16 @@
 import { commands, Disposable, window } from "vscode";
-import { SemVer } from "semver";
 import { RadonInspectorBridge } from "../../project/inspectorBridge";
 import { NetworkBridge } from "../../project/networkBridge";
 import { ToolKey, ToolPlugin } from "../../project/tools";
 import { extensionContext } from "../../utilities/extensionContext";
 import { Logger } from "../../Logger";
 import { NetworkDevtoolsWebviewProvider } from "./NetworkDevtoolsWebviewProvider";
 import { WebviewMessage } from "../../network/types/panelMessageProtocol";
-
 import InspectorBridgeNetworkInspector from "./strategies/InspectorBridgeNetworkInspector";
 import DebuggerNetworkInspector from "./strategies/DebuggerNetworkInspector";
 
 export const NETWORK_PLUGIN_ID = "network";
 
-/**
- * Minimum React Native minor version that includes debugger network inspector support
- */
-const MINIMUM_RN_DEBUGGER_INSPECTOR_VERSION = 83;
-
 export type BroadcastListener = (message: WebviewMessage) => void;
 
 export interface NetworkInspector {
@@ -61,9 +54,9 @@ export class NetworkPlugin implements ToolPlugin {
     inspectorBridge: RadonInspectorBridge,
     networkBridge: NetworkBridge,
     metroPort: number,
-    reactNativeVersion: SemVer | null
+    useNativeNetworkInspectorFlag: boolean
   ) {
-    this.networkInspector = this.checkDebuggerNetworkInspectorSupport(reactNativeVersion)
+    this.networkInspector = useNativeNetworkInspectorFlag
       ? new DebuggerNetworkInspector(inspectorBridge, networkBridge, metroPort)
       : new InspectorBridgeNetworkInspector(inspectorBridge, metroPort);
     initialize();
@@ -73,14 +66,6 @@ export class NetworkPlugin implements ToolPlugin {
     return this.networkInspector.pluginAvailable;
   }
 
-  private checkDebuggerNetworkInspectorSupport(reactNativeVersion: SemVer | null): boolean {
-    // using SemVer.compare does not work because it evaluates 0 to false in its implementation
-    if (!reactNativeVersion || reactNativeVersion.minor < MINIMUM_RN_DEBUGGER_INSPECTOR_VERSION) {
-      return false;
-    }
-    return true;
-  }
-
   public enable(): void {
     this.networkInspector.enable();
   }

packages/vscode-extension/src/project/ApplicationContext.ts

@@ -61,6 +61,15 @@ function checkFuseboxSupport(appRoot: string): boolean {
   return supportsFusebox;
 }
 
+function checkNativeNetworkInspectorSupport(appRoot: string): boolean {
+  const reactNativeVersion = getReactNativeVersion(appRoot);
+  if (reactNativeVersion === null) {
+    return false;
+  }
+  const supportsNativeNetworkInspector = reactNativeVersion.compare("0.83.0") >= 0;
+  return supportsNativeNetworkInspector;
+}
+
 function resolveLaunchConfig(configuration: LaunchConfiguration): ResolvedLaunchConfig {
   const appRoot = configuration.appRoot;
   const absoluteAppRoot = path.resolve(workspace.workspaceFolders![0].uri.fsPath, appRoot);
@@ -106,6 +115,9 @@ function resolveLaunchConfig(configuration: LaunchConfiguration): ResolvedLaunch
     },
     usePrebuild: configuration.usePrebuild,
     useOldDevtools: configuration.useOldDevtools ?? !checkFuseboxSupport(absoluteAppRoot),
+    useNativeNetworkInspector:
+      configuration.useNativeNetworkInspector ??
+      checkNativeNetworkInspectorSupport(absoluteAppRoot),
   };
 }
 

packages/vscode-extension/src/project/tools.ts

@@ -1,6 +1,5 @@
 import { Disposable } from "vscode";
 import _ from "lodash";
-import { SemVer } from "semver";
 import { RadonInspectorBridge } from "./inspectorBridge";
 import { NetworkBridge } from "./networkBridge";
 import { extensionContext } from "../utilities/extensionContext";
@@ -28,7 +27,7 @@ import {
   APOLLO_PLUGIN_ID,
   ApolloClientDevtoolsPlugin,
 } from "../plugins/apollo-client-devtools-plugin/apollo-client-devtools-plugin";
-import { ApplicationContext } from "./ApplicationContext";
+import { ApplicationContext, ResolvedLaunchConfig } from "./ApplicationContext";
 
 const TOOLS_SETTINGS_KEY = "tools_settings";
 
@@ -69,7 +68,8 @@ export class ToolsManager implements Disposable {
   private activePlugins: Set<ToolPlugin> = new Set();
   private disposables: Disposable[] = [];
   private readonly workspaceConfigState: StateManager<WorkspaceConfiguration>;
-  private readonly reactNativeVersion: SemVer | null;
+  private readonly launchConfig: ResolvedLaunchConfig;
+  private readonly useNativeNetworkInspectorFlag: boolean;
 
   public constructor(
     private readonly stateManager: StateManager<ToolsState>,
@@ -79,7 +79,8 @@ export class ToolsManager implements Disposable {
     public readonly metroPort: number
   ) {
     this.workspaceConfigState = this.applicationContext.workspaceConfigState;
-    this.reactNativeVersion = this.applicationContext.reactNativeVersion;
+    this.launchConfig = this.applicationContext.launchConfig;
+    this.useNativeNetworkInspectorFlag = this.launchConfig.useNativeNetworkInspector ?? false;
 
     this.toolsSettings = Object.assign({}, extensionContext.workspaceState.get(TOOLS_SETTINGS_KEY));
     for (const plugin of createExpoDevPluginTools()) {
@@ -105,7 +106,12 @@ export class ToolsManager implements Disposable {
     this.plugins.set(APOLLO_PLUGIN_ID, new ApolloClientDevtoolsPlugin(inspectorBridge));
     this.plugins.set(
       NETWORK_PLUGIN_ID,
-      new NetworkPlugin(inspectorBridge, networkBridge, metroPort, this.reactNativeVersion)
+      new NetworkPlugin(
+        inspectorBridge,
+        networkBridge,
+        metroPort,
+        this.useNativeNetworkInspectorFlag
+      )
     );
     this.plugins.set(
       RENDER_OUTLINES_PLUGIN_ID,

packages/vscode-extension/src/webview/views/LaunchConfigurationView.tsx

@@ -89,6 +89,7 @@ function serializeLaunchConfig(formData: FormData, defaultAppRoot: string) {
     isExpo: valueAsBoolean(data.isExpo),
     env: data.env ? JSON.parse(data.env) : {},
     usePrebuild: valueAsBoolean(data.usePrebuild),
+    useNativeNetworkInspector: valueAsBoolean(data.useNativeNetworkInspector),
   };
 
   for (const platform of ["ios", "android"] as const) {
@@ -300,6 +301,39 @@ function LaunchConfigurationView({
           </SingleSelect>
         </FormGroup>
 
+        <FormGroup variant="settings-group">
+          <Label>Use Native Network Inspector Implementation</Label>
+          <FormHelper>
+            {launchConfigAttrs?.properties?.useNativeNetworkInspector?.description}
+          </FormHelper>
+          <SingleSelect
+            data-testid="launch-configuration-use-native-network-inspector-select"
+            name="useNativeNetworkInspector"
+            initialValue={
+              launchConfig?.useNativeNetworkInspector === undefined
+                ? ""
+                : launchConfig.useNativeNetworkInspector
+                  ? "true"
+                  : "false"
+            }>
+            <Option
+              value=""
+              data-testid="launch-configuration-use-native-network-inspector-select-detect-automatically">
+              Detect automatically
+            </Option>
+            <Option
+              value="true"
+              data-testid="launch-configuration-use-native-network-inspector-select-yes">
+              Yes
+            </Option>
+            <Option
+              value="false"
+              data-testid="launch-configuration-use-native-network-inspector-select-no">
+              No
+            </Option>
+          </SingleSelect>
+        </FormGroup>
+
         <FormGroup variant="settings-group">
           <Label>Environment Variables</Label>
           <FormHelper>{launchConfigAttrs?.properties?.env?.description}</FormHelper>