Skip to content

Commit

Permalink
feature(dev-middleware): add enableNetworkInspector experiment (#41787
Browse files Browse the repository at this point in the history
)

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
  • Loading branch information
byCedric authored and huntie committed Dec 7, 2023
1 parent 92254f9 commit 33a6fb8
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 1 deletion.
1 change: 1 addition & 0 deletions packages/dev-middleware/src/createDevMiddleware.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,5 +127,6 @@ function getExperiments(config: ExperimentsConfig): Experiments {
return {
enableNewDebugger: config.enableNewDebugger ?? false,
enableOpenDebuggerRedirect: config.enableOpenDebuggerRedirect ?? false,
enableNetworkInspector: config.enableNetworkInspector ?? false,
};
}
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export default function openDebuggerMiddleware({
app =>
app.title === 'React Native Experimental (Improved Chrome Reloads)',
);

let target;

const launchType: 'launch' | 'redirect' =
Expand Down Expand Up @@ -106,6 +107,7 @@ export default function openDebuggerMiddleware({
appId,
await browserLauncher.launchDebuggerAppWindow(
getDevToolsFrontendUrl(
experiments,
target.webSocketDebuggerUrl,
serverBaseUrl,
),
Expand All @@ -116,6 +118,7 @@ export default function openDebuggerMiddleware({
case 'redirect':
res.writeHead(302, {
Location: getDevToolsFrontendUrl(
experiments,
target.webSocketDebuggerUrl,
// Use a relative URL.
'',
Expand Down
5 changes: 5 additions & 0 deletions packages/dev-middleware/src/types/Experiments.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
9 changes: 8 additions & 1 deletion packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}

0 comments on commit 33a6fb8

Please sign in to comment.