React Nativeで（デバッグ用の）ネットワーク要求を表示するにはどうすればよいですか？

デバッグを支援するためにReact Nativeでネットワークリクエストを表示したい-理想的には、Chromeの開発ツールの[ネットワーク]タブで。

GitHub（https://github.com/facebook/react-native/issues/4122およびhttps://github.com/facebook/react-native/issues/934）には、これに関するいくつかのクローズされた問題がありますが、私はしませんそれらを完全に理解する。React Nativeのポリフィルの一部を元に戻し、追加のデバッグフラグを使用してコマンドを実行し、Chromeのセキュリティ設定を変更する必要があるようです。そして、どうやらこれを行うことにはセキュリティ上の問題があり、ひどい考えになるかもしれませんが、スレッドに関与している人は誰も、それらが何であるかを明確に述べていません。

誰かが、React Nativeで[ネットワーク]タブを機能させるためのステップバイステップのガイドと、それに伴うセキュリティ問題の説明を提供できますか？

これは私のアプリのエントリポイントで使用してきたものです

const _XHR = GLOBAL.originalXMLHttpRequest ?  
    GLOBAL.originalXMLHttpRequest :           
    GLOBAL.XMLHttpRequest                     

XMLHttpRequest = _XHR

編集：以下のより簡潔な構文にリンクされているフレビブ。ありがとうフレビブ！

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

説明：

GLOBAL.originalXMLHttpRequestXHRのChrome Dev Toolsコピーを指します。エスケープハッチとしてRNから提供されます。Shvetusyaのソリューションは、開発ツールが開いている場合にのみ機能しXMLHttpRequestます。

編集：デバッガーモードでは、クロスオリジンリクエストを許可する必要があります。クロムを使用すると、この便利なプラグインを使用できます。

編集：私をこのソリューションに導いたRN githubの問題について読んでください

なぜ今まで誰もこの解決策を指摘しなかったのかわかりません。React Native Debuggerを使用する-https ://github.com/jhen0409/react-native-debugger！私の意見では、これはReact Nativeに最適なデバッグツールであり、ネットワーク検査をすぐに使用できます。

これらのスクリーンショットを見てください。

右クリックして[ネットワーク検査を有効にする]を選択します

右クリックして[ネットワーク検査を有効にする]を選択します

デバッグしてください！

私は次のアプリを使用しています（これをメインのapp.jsエントリポイントファイルに追加します）。

// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
    GLOBAL.originalXMLHttpRequest :
    GLOBAL.XMLHttpRequest;

  // fetch logger
global._fetch = fetch;
global.fetch = function (uri, options, ...args) {
  return global._fetch(uri, options, ...args).then((response) => {
    console.log('Fetch', { request: { uri, options, ...args }, response });
    return response;
  });
};

最良のことは、コンソールにもフェッチログが表示され、適切にフォーマットされていることです。

スクリーンショット：

ネットワークタブ：

私はネットワークリクエストの追跡にReactotronを使用しています。

これは古い質問であることはわかっていますが、CORSを無効にしたり、React Nativeソースコードを変更したりする必要のない、今より安全な方法があります。（ネットワークプラグインを使用して）API呼び出しを追跡するだけでなく、追加の設定でReduxストアとSagasを追跡できるReactotronと呼ばれるサードパーティライブラリを使用できます。

https://github.com/infinitered/reactotron https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md

React Nativeをインポートした後、React Nativeが提供するポリフィルを削除することで、Chromeでリクエストをデバッグできました。

var React = require('react-native');
delete GLOBAL.XMLHttpRequest;

これは、同じオリジンリクエストに対して私にとってはうまくいきました。クロスオリジンで機能させるためにChromeでCORSを無効にする必要があるかどうかはわかりません。

以前は、GLOBAL.XMLHttpRequestハックを使用してAPIリクエストを追跡していましたが、非常に遅く、アセットリクエストに対して機能しない場合がありました。Postman’s proxy機能を使用して、電話から発信されるHTTP通信を検査することにしました。詳細については公式ドキュメントをご覧ください。ただし、基本的には3つの簡単な手順があります。

• Postmanでプロキシを設定する
• コンピュータのIPアドレスを確認してください（$ ifconfig）
• Wi-Fi設定でモバイルデバイスのHTTPプロキシを構成する

このコードには注意してください。

XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
   GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;

それは役立ち、それは素晴らしいですが、アップロードを破壊します。アップロードされたファイルが実際のファイルではなく[オブジェクトオブジェクト]を送信する理由を解明するために2日間費やしています。理由は上のコードです。

通常の呼び出しではなくマルチパート/フォームデータの呼び出しに使用します

Charlesを使用してネットワークリクエストを検査することをお勧めします。それは本当に良いですし、より多くの可視性を提供し、高度なことを行うことができます。

http://charlesproxy.com

アプリのリリースバージョンでネットワークリクエストをデバッグする場合は、ライブラリreact-native-network-loggerを使用できます。カスタムデバッグ画面からアプリ内のネットワークリクエストを監視および表示できます。

次に、これをビルドフラグまたはネットワークフラグの後ろに配置して、本番アプリでユーザーに対して無効にすることができます。

インストールしてyarn add react-native-network-logger、アプリのエントリポイントにこれを追加します。

import { startNetworkLogging } from 'react-native-network-logger';

startNetworkLogging();
AppRegistry.registerComponent('App', () => App);

そして、これはデバッグ画面で：

import NetworkLogger from 'react-native-network-logger';

const MyScreen = () => <NetworkLogger />;

免責事項：私はパッケージの作者です。

Androidフォンまたはエミュレータをお持ちの場合、

• npx react-native start

次にAndroid Studioを開きます。

androidAndroid Studioプロジェクトとしてプロジェクトのフォルダーを開きます。

Androidプロファイラーである青いアイコンをクリックします

Androidプロファイラの起動後、SESSIONSラベルの 近くの灰色のプラスアイコンを介してアプリを追加できます

これで、このツールを使用してネットワークを検査できます。ネットワークアクティビティを示す三角形が表示されます。

ネットワークトラフィックの検査について詳しくは、こちらをご覧ください。

リクエストまたは応答を確認できるjsにデバッガーを追加します。