feature(network): enable network inspector tab through unstable_enableNetworkPanel

[byCedric]

Summary

This adds a stripped-down version of the Network tab through &unstable_enableNetworkPanel=true.

Edit: This now only enables the Network panel, without disabling any of the existing functionality.

Network tab without disabled options

Disabled options highlighted

Test plan

• Run devtools from source
• Force @react-native/dev-middleware to serve local hosted instance
• Force &unstable_enableNetworkPanel=true query parameter to local hosted instance URL
• Make a request & open Network tab

Upstreaming plan

• This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
• This commit is React Native-specific and cannot be upstreamed.

[byCedric]

We can also clone the network files to something like "react-native-network" or something similar to keep this split with the original network tab.

But, as soon as new Hermes CDP implementation is available, I'd guess we want to re-enable these disabled options.

[huntie]

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?

1. Re-enable the Network panel, in its entirety, via query string flag (ready to go ✅).
2. Conditionally disable features in the Network panel.
   • I think we want a different approach here if possible — either creating an rn_network entrypoint with forked functionality, or ideally disabling these features via targeted experiments (Root.Runtime.experiments API). For the latter, either using our REACT_NATIVE_SPECIFIC_UI experiment, or per-feature flags — which will likely be very useful as we incrementally build out the CDP implementation of the Network panel.

[byCedric]

@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 REACT_NATIVE_SUPPORTED_UI/REACT_NATIVE_UNSUPPORTED_UI? I think it's a bit more descriptive of why certain things are conditionally hidden.

[huntie]

Thanks!

[ghost]

How to enable it ? I upgraded to 0.73.1 but I cannot see network tab

[huntie]

@ngxhuyhoang This feature is specific to Expo apps, and should come as part of a (near) future Expo SDK release.

[ghost]

Hope release for react-native cli too

[Nikit-Singh]

@huntie are there any plans / timeline for this getting added to the react-native-cli as well?

[huntie]

@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.

react-native-community/discussions-and-proposals#733