Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(dev-middleware): add enableNetworkInspector experiment #41787

Closed

Conversation

byCedric
Copy link
Contributor

@byCedric byCedric commented Dec 4, 2023

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

Test Plan:

TBD, will provide a repository using an Expo canary / RN 0.73.0-rc release.

By setting this inside the `experiments`, we can enable/disable network related CDP handlers within the proxy.
@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Dec 4, 2023
Copy link
Member

@huntie huntie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@facebook-github-bot
Copy link
Contributor

@huntie has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

Comment on lines 28 to 29
* Enables the new JS debugger network panel and network CDP events.
* When disabled, all CDP events and the network panel are disabled.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Which CDP events does this enable?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since its missing at the moment, none. But, on Expo's side we can use this to enable/disable two non-trivial CDP events:

Custom Expo(Network.receivedResponseBody)

This event offloads the responses to the inspector proxy when received by the app. When we need to respond to Network.getResponseBody, we need to be able to reply to it. That's not something we could implement on the native side, we can only send from the native side (not receive events).

Because of that, once a user opens the app, all network responses are logged to the CLI process. Meaning that there will be quite a build-up in memory over time, without any event being able to clear this.

Network.getResponseBody

This just pulls the data received earlier from the device, and sends it to the debugger.

byCedric and others added 2 commits December 7, 2023 14:02
Co-authored-by: Moti Zilberman <motiz88@gmail.com>
Co-authored-by: Alex Hunt <hello@alexhunt.io>
@facebook-github-bot
Copy link
Contributor

@huntie has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Dec 7, 2023
@facebook-github-bot
Copy link
Contributor

@huntie merged this pull request in 8ef807b.

huntie pushed a commit that referenced this pull request Dec 7, 2023
)

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
@byCedric byCedric deleted the @bycedric/dev-middleware/add-network branch December 8, 2023 11:46
Othinn pushed a commit to Othinn/react-native that referenced this pull request Jan 9, 2024
…ebook#41787)

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: facebook#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
@meftunca
Copy link

How can I activate this feature with version 73.3?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants