Network Inspect of Chrome Developer Tools

January 16, 2021 ยท View on GitHub

WARNING: You should read the limitations if you want to use this feature.

When you have Network Inspect enabled you can inspect network requests that use XMLHttpRequest or fetch on the Network tab of Chrome Developer Tools.

You can enable this feature by one of these ways:

  • context menu or Touch Bar (Network Inspect will be enabled while the RNDebugger is running, after closing it will reset to the default value);
  • by the defaultNetworkInspect option in the config file (Network Inspect will be enabled permanently).

How it works

See the comments of react-native/Libraries/Utilities/PolyfillFunctions#L15-L27. It uses XMLHttpRequest from WebWorker in Chrome, basically it can manually setup by:

global.XMLHttpRequest = global.originalXMLHttpRequest
  ? global.originalXMLHttpRequest
  : global.XMLHttpRequest;
global.FormData = global.originalFormData
  ? global.originalFormData
  : global.FormData;

fetch; // Ensure to get the lazy property

if (window.__FETCH_SUPPORT__) {
  // it's RNDebugger only to have
  window.__FETCH_SUPPORT__.blob = false;
} else {
  /*
   * Set __FETCH_SUPPORT__ to false is just work for `fetch`.
   * If you're using another way you can just use the native Blob and remove the `else` statement
   */
  global.Blob = global.originalBlob ? global.originalBlob : global.Blob;
  global.FileReader = global.originalFileReader
    ? global.originalFileReader
    : global.FileReader;
}

Note that replace global.Blob will cause issue like #56.

This allows you can open the Network tab in devtools to inspect requests of fetch and XMLHttpRequest.

You can also do this on the official remote debugger, but it has two differences:

  • RNDebugger is based on Electron so it doesn't have the CORS issue
  • We support setting Forbidden header names, so you can use headers like Origin and User-Agent.

Limitations

There are some limitations of debugging network requests using Network Inspect:

  • [iOS] Requests pass NSExceptionDomains checks. If you forget to set a domain name, the requests will break in production. You should be clear about the difference.
  • [Android] If your network request would have caused java.security.cert.CertPathValidatorException, the Network Inpsect will skip that because it uses Debugger's network client.
  • React Native FormData supports the uri property. You can use files from CameraRoll, but originalFormData isn't supported.
  • It can't inspect request like Images loaded from urls for src, so if your Image source has a set session, the session can't apply to fetch and XMLHttpRequest.

If you want to inspect deeper network requests (like requests made with Image), use tools like Charles or Flipper.

Other documentations