feature(network): enable network inspector tab through unstable_enableNetworkPanel
#2
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
We can also clone the But, as soon as new Hermes CDP implementation is available, I'd guess we want to re-enable these disabled options. |
huntie
requested changes
Dec 4, 2023
There was a problem hiding this comment.
Conceptually these changes are great, and really appreciate digging into the Network panel to figure out which features we can (and should!) disable.
Can I ask that we split this PR in two?
- Re-enable the Network panel, in its entirety, via query string flag (ready to go ✅).
- Conditionally disable features in the Network panel.
- I think we want a different approach here if possible — either creating an
rn_networkentrypoint with forked functionality, or ideally disabling these features via targeted experiments (Root.Runtime.experimentsAPI). For the latter, either using ourREACT_NATIVE_SPECIFIC_UIexperiment, or per-feature flags — which will likely be very useful as we incrementally build out the CDP implementation of the Network panel.
- I think we want a different approach here if possible — either creating an
byCedric
force-pushed
the
feature/enable-network-inspector
branch
from
e3d6b25
to
3d5f69f
Compare
byCedric
force-pushed
the
feature/enable-network-inspector
branch
from
3d5f69f
to
6b80685
Compare
byCedric
changed the title
unstable_enableNetworkPanel
|
@huntie I just pulled out the commit that disables the network features that are unimplemented/non-functional. This PR only enables the network panel/tab through the query parameter. Unfortunately, I can't really stack PRs on a fork, so I'll hold off creating a new PR that disables non-functional features until this PR is merged. What about |
facebook-github-bot
pushed a commit
to facebook/react-native
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
huntie
pushed a commit
to facebook/react-native
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
huntie
added a commit
to huntie/react-native
that referenced
this pull request
Dec 7, 2023
Summary: Sync `react-native/debugger-frontend`. Includes: - facebookexperimental/rn-chrome-devtools-frontend#2 Changelog: [Internal] Differential Revision: D51946121
huntie
added a commit
to huntie/react-native
that referenced
this pull request
Dec 7, 2023
Summary: Sync `react-native/debugger-frontend`. Includes: - facebookexperimental/rn-chrome-devtools-frontend#2 Changelog: [Internal] Differential Revision: D51946121
facebook-github-bot
pushed a commit
to facebook/react-native
that referenced
this pull request
Dec 7, 2023
Summary: Pull Request resolved: #41840 Sync `react-native/debugger-frontend`. Includes: - facebookexperimental/rn-chrome-devtools-frontend#2 Changelog: [Internal] Differential Revision: D51946121 fbshipit-source-id: 8118cb5075aa86d95bbd8e1ba56a73360122aaab
huntie
added a commit
to facebook/react-native
that referenced
this pull request
Dec 8, 2023
Summary: Pull Request resolved: #41840 Sync `react-native/debugger-frontend`. Includes: - facebookexperimental/rn-chrome-devtools-frontend#2 Changelog: [Internal] Differential Revision: D51946121 fbshipit-source-id: 8118cb5075aa86d95bbd8e1ba56a73360122aaab # Conflicts: # packages/debugger-frontend/BUILD_INFO
|
How to enable it ? I upgraded to 0.73.1 but I cannot see network tab |
|
@ngxhuyhoang This feature is specific to Expo apps, and should come as part of a (near) future Expo SDK release. |
|
Hope release for react-native cli too |
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
Othinn
pushed a commit
to Othinn/react-native
that referenced
this pull request
Jan 9, 2024
Summary: Pull Request resolved: facebook#41840 Sync `react-native/debugger-frontend`. Includes: - facebookexperimental/rn-chrome-devtools-frontend#2 Changelog: [Internal] Differential Revision: D51946121 fbshipit-source-id: 8118cb5075aa86d95bbd8e1ba56a73360122aaab
|
@huntie are there any plans / timeline for this getting added to the react-native-cli as well? |
|
@Nikit-Singh We intend to, but we can't give a timeline. We are currently focused on building a rearchitected backend debugging stack, upon which features like Network debugging can be built. This is separate from (and aims to replace, for all React Native users) the current Expo-specific implementation. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This adds
a stripped-down version ofthe Network tab through&unstable_enableNetworkPanel=true.Network tab without disabled options
Disabled options highlighted
Test plan
@react-native/dev-middlewareto serve local hosted instance&unstable_enableNetworkPanel=truequery parameter to local hosted instance URLUpstreaming plan
devtools-frontendrepo. I've reviewed the contribution guide.