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 https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/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: https://github.com/facebook/react-native/pull/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

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,
   };
 }

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.
                 '',

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>;

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;
 }