feature(dev-middleware): add enableNetworkInspector experiment (#41787

) Summary: This enables the network panel/inspector by passing the `unstable_enableNetworkPanel=true` to the React Native JS Inspector. (See facebookexperimental/rn-chrome-devtools-frontend#2) By setting this inside the `experiments`, we can enable/disable network related CDP handlers within the proxy. ## Changelog: [GENERAL] [ADDED] - Add `enableNetworkInspector` experiment to enable Network panel and CDP handlers in inspector proxy Pull Request resolved: #41787 Test Plan: TBD, will provide a repository using an Expo canary / RN 0.73.0-rc release. Reviewed By: NickGerleman Differential Revision: D51811892 Pulled By: huntie fbshipit-source-id: 541d96b6f0735104a4050a24a152e1158871ed1d
facebook · Dec 7, 2023 · 8ef807b · 8ef807b
1 parent a8ca9b0
commit 8ef807b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js
@@ -126,5 +126,6 @@ function getExperiments(config: ExperimentsConfig): Experiments {
   return {
     enableNewDebugger: config.enableNewDebugger ?? false,
     enableOpenDebuggerRedirect: config.enableOpenDebuggerRedirect ?? false,
+    enableNetworkInspector: config.enableNetworkInspector ?? false,
   };
 }
diff --git a/packages/dev-middleware/src/middleware/openDebuggerMiddleware.js b/packages/dev-middleware/src/middleware/openDebuggerMiddleware.js
@@ -64,6 +64,7 @@ export default function openDebuggerMiddleware({
         app =>
           app.title === 'React Native Experimental (Improved Chrome Reloads)',
       );
+
       let target;
 
       const launchType: 'launch' | 'redirect' =
@@ -117,6 +118,7 @@ export default function openDebuggerMiddleware({
               frontendInstanceId,
               await browserLauncher.launchDebuggerAppWindow(
                 getDevToolsFrontendUrl(
+                  experiments,
                   target.webSocketDebuggerUrl,
                   serverBaseUrl,
                 ),
@@ -127,6 +129,7 @@ export default function openDebuggerMiddleware({
           case 'redirect':
             res.writeHead(302, {
               Location: getDevToolsFrontendUrl(
+                experiments,
                 target.webSocketDebuggerUrl,
                 // Use a relative URL.
                 '',

diff --git a/packages/dev-middleware/src/types/Experiments.js b/packages/dev-middleware/src/types/Experiments.js
@@ -23,6 +23,11 @@ export type Experiments = $ReadOnly<{
    * interface.
    */
   enableOpenDebuggerRedirect: boolean,
+
+  /**
+   * Enables the Network panel when launching the custom debugger frontend.
+   */
+  enableNetworkInspector: boolean,
 }>;
 
 export type ExperimentsConfig = Partial<Experiments>;
diff --git a/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js b/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js
@@ -9,10 +9,13 @@
  * @oncall react_native
  */
 
+import type {Experiments} from '../types/Experiments';
+
 /**
  * Get the DevTools frontend URL to debug a given React Native CDP target.
  */
 export default function getDevToolsFrontendUrl(
+  experiments: Experiments,
   webSocketDebuggerUrl: string,
   devServerUrl: string,
 ): string {
@@ -22,5 +25,9 @@ export default function getDevToolsFrontendUrl(
     webSocketDebuggerUrl.replace(/^wss?:\/\//, ''),
   );
 
-  return `${appUrl}?${scheme}=${webSocketUrlWithoutProtocol}&sources.hide_add_folder=true`;
+  const devToolsUrl = `${appUrl}?${scheme}=${webSocketUrlWithoutProtocol}&sources.hide_add_folder=true`;
+
+  return experiments.enableNetworkInspector
+    ? `${devToolsUrl}&unstable_enableNetworkPanel=true`
+    : devToolsUrl;
 }