jhen0409/react-native-debugger

Implement better `Network Inspect`

Open

#102 opened on Jul 5, 2017

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (10,097 stars) (850 forks)batch import
enhancementfeaturefeature/network-inspecthelp wanted

Description

Currently we have the feature just use originalXMLHttpRequest to replace XHR (see the code), 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)

Would be better if we just implement our Network Inspect:

  • Use XHRInterceptor of React Native 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 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

Tech stack
javascriptreactelectron
Domain
toolingmobile
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
3-5 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
JavaScriptReact NativeChrome DevTools
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
20
Research direction
Investigate the current implementation in app/worker/devMenu.js (see code at L5). Examine the XHRInterceptor module in React Native (Libraries/Network/XHRInterceptor.js) to understand the interception mechanism. Also check the remotedev app repository for custom tabs UI requirements. Determine if the 'sanitizer' option is needed and how to send data from RNDebuggerWorker to top context.