jhen0409 / jhen0409/react-native-debugger

Implement better `Network Inspect`

Aperta
#102 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
enhancement feature feature/network-inspect help wanted
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.