jhen0409 / jhen0409/react-native-debugger
Implement better `Network Inspect`
- Dominant language
- JavaScript
- Stars
- 10.4k
- Forks
- 815
- PR merge metrics
- No merged PRs in 30d
Description
Currently we have [the feature](https://github.com/jhen0409/react-native-debugger/blob/master/docs/debugger-integration.md#developer-menu-integration) just use `originalXMLHttpRequest` to replace XHR (see the [code](https://github.com/jhen0409/react-native-debugger/blob/master/app/worker/devMenu.js#L5)), then we can inspect the requests in `Network` tab of devtools. It's very useful to me, but it has some limitations that cause others to be confused. (See [documentation](https://github.com/jhen0409/react-native-debugger/blob/master/docs/debugger-integration.md#how-network-inspect-works))
Would be better if we just implement our Network Inspect:
* Use [XHRInterceptor of React Native](https://github.com/facebook/react-native/blob/master/Libraries/Network/XHRInterceptor.js) or implement the similar thing, and send network data from `RNDebuggerWorker` to `top` context
- Need an option like `sanitizer` for avoid some fields send like large data
* ~~Maybe implement UI in [`devtools-helper`](https://github.com/jhen0409/react-native-debugger/tree/master/dist/devtools-helper) as dev panel of devtools (Call it `RN Network`?), we can polling data by `chrome.devtools.inspectedWindow.eval`, or send data from `top` context to background script~~
* We may need to upgrade remotedev-app to v0.11 (current beta) first because it have custom tabs UI
But we can't implement some Network tab of Chrome DevTools features like `Offline` and `Throttling`, so if this got implemented, I'll keep the original feature, may just remove the context menu item and Touch Bar button.
Contributor guide
Assessment
This issue has not been assessed yet.