web-dev-qa-db-ja.com

React Nativeでネットワークリクエストを表示するには（デバッグ用）？

デバッグに役立つReact Nativeでネットワークリクエストを表示したい-理想的にはChromeのdevtoolsの[ネットワーク]タブで。

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

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

javascriptgoogle-chrome-devtoolsreact-native
67
Mark Amery

これは、アプリのエントリポイントで使用しているものです

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

XMLHttpRequest = _XHR

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

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

説明：

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

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

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

82
tryangul

私は自分のアプリで次を使用します（メインの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;
  });
};

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

スクリーンショット：

enter image description here

[ネットワーク]タブで：

enter image description here

37
Sankalp Singha

Reactotron を使用して、ネットワーク要求を追跡します。

enter image description here

18
Aung Myat Hein

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

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

12
T Stone

なぜ誰もこのソリューションをこれまで指摘していないのか分かりません。 React Native Debuggerを使用- https://github.com/jhen0409/react-native-debugger ！私の意見ではReact Nativeに最適なデバッグツールであり、すぐにネットワーク検査を行うことができます。

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

右クリックして「ネットワーク検査を有効にする」を選択しますEnabling Network Inspect

右クリックして「ネットワーク検査を有効にする」を選択しますEnabling Network Inspect

デバッグしてください！Network Inspect in action

10
Kashish Grover

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

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

これは、同じOriginリクエストでも機能しました。 ChromeでCORSを無効にして、Cross Originで機能させる必要があるかどうかはわかりません。

6
lanan

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

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

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

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

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

通常の呼び出しではなく、multipart/form-data呼び出しに使用します

3
Dawid Dereszewski

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

http://charlesproxy.com

2
Ran Yefet