jhen0409 / jhen0409/react-native-debugger
Implement better `Network Inspect`
- Lingua principale
- JavaScript
- Stelle
- 10.4k
- Fork
- 815
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia da docs/debugger-integration.md, app/worker/devMenu.js e XHRInterceptor.js di React Native per comprendere l’attuale approccio di sostituzione e i suoi limiti documentati. Traccia il modo in cui RNDebuggerWorker potrebbe inviare i dati di rete al contesto superiore, incluso il sanitizer proposto, e analizza dist/devtools-helper e il requisito di remotedev-app v0.11. Il lavoro è completo quando un piano di implementazione definito copre l’ispezione di rete personalizzata mantenendo la funzionalità originale per le capacità di Chrome DevTools non supportate.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react-native
- Ambito
- devtools, networking
- Tipo di issue
- Funzionalità
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 25/100