diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js index 12892521e32c67..e6c9dc1f7d93e2 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 0fbf49337083dc..c2aaded070ab04 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 9f15d94c8ef3d7..c5c2c9af439b07 100644 --- 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; diff --git a/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js b/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js index 0178c4db2d3f73..76b497e04db814 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; }