jhen0409 / jhen0409/react-native-debugger

Implement better `Network Inspect`

Open
#102 1 comment 0 reactions 0 assignees View on GitHub
enhancement feature feature/network-inspect help wanted
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.