From 47fad1a24b28d6f2767b7415cca12fea4e96827a Mon Sep 17 00:00:00 2001 From: Cedric van Putten Date: Mon, 4 Dec 2023 17:18:14 +0100 Subject: [PATCH 1/3] feature(dev-middleware): add `enableNetworkInspector` experiment By setting this inside the `experiments`, we can enable/disable network related CDP handlers within the proxy. --- packages/dev-middleware/src/createDevMiddleware.js | 1 + .../src/middleware/openDebuggerMiddleware.js | 3 +++ packages/dev-middleware/src/types/Experiments.js | 6 ++++++ .../dev-middleware/src/utils/getDevToolsFrontendUrl.js | 9 ++++++++- 4 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js index 12892521e32c..e6c9dc1f7d93 100644 --- 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 index 0fbf49337083..c2aaded070ab 100644 --- 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 index 9f15d94c8ef3..cf21b463e353 100644 --- a/packages/dev-middleware/src/types/Experiments.js +++ b/packages/dev-middleware/src/types/Experiments.js @@ -23,6 +23,12 @@ export type Experiments = $ReadOnly<{ * interface. */ enableOpenDebuggerRedirect: boolean, + + /** + * Enables the new JS debugger network panel and network CDP events. + * When disabled, all CDP events and the network panel are disabled. + */ + enableNetworkInspector: Boolean, }>; export type ExperimentsConfig = Partial; diff --git a/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js b/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js index 0178c4db2d3f..76b497e04db8 100644 --- 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; } From 290179fab10f3297b5cfd62d2c6435a02945e218 Mon Sep 17 00:00:00 2001 From: Cedric van Putten Date: Thu, 7 Dec 2023 14:02:43 +0100 Subject: [PATCH 2/3] fix(dev-middleware): prefer `boolean` over `Boolean` Co-authored-by: Moti Zilberman --- packages/dev-middleware/src/types/Experiments.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev-middleware/src/types/Experiments.js b/packages/dev-middleware/src/types/Experiments.js index cf21b463e353..5c8ba072c03f 100644 --- a/packages/dev-middleware/src/types/Experiments.js +++ b/packages/dev-middleware/src/types/Experiments.js @@ -28,7 +28,7 @@ export type Experiments = $ReadOnly<{ * Enables the new JS debugger network panel and network CDP events. * When disabled, all CDP events and the network panel are disabled. */ - enableNetworkInspector: Boolean, + enableNetworkInspector: boolean, }>; export type ExperimentsConfig = Partial; From 6cc383a4c282b8a95a8c0793ff019036db4aa5f8 Mon Sep 17 00:00:00 2001 From: Cedric van Putten Date: Thu, 7 Dec 2023 14:03:18 +0100 Subject: [PATCH 3/3] docs(dev-middleware): make description more generic Co-authored-by: Alex Hunt --- packages/dev-middleware/src/types/Experiments.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/dev-middleware/src/types/Experiments.js b/packages/dev-middleware/src/types/Experiments.js index 5c8ba072c03f..c5c2c9af439b 100644 --- a/packages/dev-middleware/src/types/Experiments.js +++ b/packages/dev-middleware/src/types/Experiments.js @@ -25,8 +25,7 @@ export type Experiments = $ReadOnly<{ enableOpenDebuggerRedirect: boolean, /** - * Enables the new JS debugger network panel and network CDP events. - * When disabled, all CDP events and the network panel are disabled. + * Enables the Network panel when launching the custom debugger frontend. */ enableNetworkInspector: boolean, }>;