Skip to content

Commit 8ef807b

Browse files
byCedricfacebook-github-bot
authored andcommitted
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 facebook/react-native-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
1 parent a8ca9b0 commit 8ef807b

File tree

4 files changed

+17
-1
lines changed

4 files changed

+17
-1
lines changed

packages/dev-middleware/src/createDevMiddleware.js

+1
Original file line numberDiff line numberDiff line change
@@ -126,5 +126,6 @@ function getExperiments(config: ExperimentsConfig): Experiments {
126126
return {
127127
enableNewDebugger: config.enableNewDebugger ?? false,
128128
enableOpenDebuggerRedirect: config.enableOpenDebuggerRedirect ?? false,
129+
enableNetworkInspector: config.enableNetworkInspector ?? false,
129130
};
130131
}

packages/dev-middleware/src/middleware/openDebuggerMiddleware.js

+3
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export default function openDebuggerMiddleware({
6464
app =>
6565
app.title === 'React Native Experimental (Improved Chrome Reloads)',
6666
);
67+
6768
let target;
6869

6970
const launchType: 'launch' | 'redirect' =
@@ -117,6 +118,7 @@ export default function openDebuggerMiddleware({
117118
frontendInstanceId,
118119
await browserLauncher.launchDebuggerAppWindow(
119120
getDevToolsFrontendUrl(
121+
experiments,
120122
target.webSocketDebuggerUrl,
121123
serverBaseUrl,
122124
),
@@ -127,6 +129,7 @@ export default function openDebuggerMiddleware({
127129
case 'redirect':
128130
res.writeHead(302, {
129131
Location: getDevToolsFrontendUrl(
132+
experiments,
130133
target.webSocketDebuggerUrl,
131134
// Use a relative URL.
132135
'',

packages/dev-middleware/src/types/Experiments.js

+5
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ export type Experiments = $ReadOnly<{
2323
* interface.
2424
*/
2525
enableOpenDebuggerRedirect: boolean,
26+
27+
/**
28+
* Enables the Network panel when launching the custom debugger frontend.
29+
*/
30+
enableNetworkInspector: boolean,
2631
}>;
2732

2833
export type ExperimentsConfig = Partial<Experiments>;

packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,13 @@
99
* @oncall react_native
1010
*/
1111

12+
import type {Experiments} from '../types/Experiments';
13+
1214
/**
1315
* Get the DevTools frontend URL to debug a given React Native CDP target.
1416
*/
1517
export default function getDevToolsFrontendUrl(
18+
experiments: Experiments,
1619
webSocketDebuggerUrl: string,
1720
devServerUrl: string,
1821
): string {
@@ -22,5 +25,9 @@ export default function getDevToolsFrontendUrl(
2225
webSocketDebuggerUrl.replace(/^wss?:\/\//, ''),
2326
);
2427

25-
return `${appUrl}?${scheme}=${webSocketUrlWithoutProtocol}&sources.hide_add_folder=true`;
28+
const devToolsUrl = `${appUrl}?${scheme}=${webSocketUrlWithoutProtocol}&sources.hide_add_folder=true`;
29+
30+
return experiments.enableNetworkInspector
31+
? `${devToolsUrl}&unstable_enableNetworkPanel=true`
32+
: devToolsUrl;
2633
}

0 commit comments

Comments
 (0)