リモートデバッガーに接続できません

React.JSを使用react-native run-androidしていますが、（デバイスを接続した状態で）使用すると、空白のページが表示されます。デバイスをシェイクDebug JS Remotelyしてオプションリストから選択すると、次の画面が表示されます。

ご参考までに：

OS: Ubuntu 16.04
Node version is: v4.6.2
java version "1.8.0_111"
react": "15.4.1
react-native": "0.38.0

私の場合、問題はエミュレータが次の要求を行っていることでした。

http://10.0.2.2:8081/debugger-ui

の代わりに：

http://localhost:8081/debugger-ui リクエストは失敗しました。

問題を解決するには：エミュレータでリモートデバッグを有効にする前に、Chromeで開きますhttp://localhost:8081/debugger-ui。次に、リモートデバッグを有効にして、コンソールのログが表示されるはずのChromeページに戻ります。

次の問題を解決しました：

• Cmd + Mエミュレータ画面で押す
• に行く Dev settings > Debug server host & port for device
• セットする localhost:8081
• Androidアプリを再実行します。 react-native run-android

デバッガが接続されました！

私はそれをやってadb reverse tcp:8081 tcp:8081、それからreload私の電話でそれを解決しました。

私の場合、[ JSをデバッグ]を選択するとリモートで Chromeが起動しましたが、Androidデバイスと接続しませんでした。通常、新しいChromeタブ/ウィンドウでは、アドレスバーにデバッグURLが事前に入力されていますが、この場合、アドレスバーは空白でした。タイムアウト期間後、「リモートデバッガーに接続できません」というエラーメッセージが表示されました。私は次の手順でこれを修正しました：

• 走る adb reverse tcp:8081 tcp:8081
• http://localhost:8081/debugger-uiChromeブラウザのアドレスフィールドに貼り付けます。通常のデバッグ画面が表示されますが、アプリはまだ接続されていません。

これで問題が解決します。そうでない場合は、次の追加手順を実行する必要があります。

• Androidデバイスからアプリを閉じてアンインストールします
• アプリを再インストール react-native run-android
• アプリでリモートデバッグを有効にします。
• これで、アプリがデバッガーに接続されます。

私はこの質問に私を導いた同様の問題がありました。私のブラウザーデバッガーでは、次のエラーメッセージが表示されました。

' http：// localhost：8081 / index.delta？platform = android＆dev = true＆minify = false 'からのフェッチへのアクセスは、オリジン ' http://127.0.0.1:8081 ' からCORSポリシーによってブロックされています：いいえ 'Access-Control -Allow-Origin 'ヘッダーがリクエストされたリソースに存在します。不透明な応答でニーズが満たされる場合は、リクエストのモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。

デバッガーの127.0.0.1:8081代わりにlocalhost:8081を使用していることに気づくのにしばらく時間がかかりました。

それを修正するには、Chromeを次のように変更するだけです。

http://127.0.0.1:8081/debugger-ui/

に

http://localhost:8081/debugger-ui/

バンドルを提供するノードサーバーがバックグラウンドで実行されていることを確認してください。サーバーを起動して起動するには、npm startまたはreact-native start開発中にタブを開いたままにします

私の場合、タップしてリモートJSデバッグを有効にすると、Chromeが起動しますが、接続できません。

私は走ろうとしました：

adb reverse tcp:8081 tcp:8081 

、動作しませんでした。

クロムを完全にアンインストールして、新しいクロムをインストールしました。そしてそれは機能します。

1. 1つのタブのreact-native start --reset-cacheと別のタブのreact-native run-android
2. adb reverse tcp：8081 tcp：8081（これをスクリプトに追加して、yarn run adb-reverseを実行するだけです）
3. Androidを使用している場合は、スマートフォンを振るのではなく、adbコマンドを実行してください。

だからあなたは走ることができます：

• adb shell input keyevent 82（メニューオプション）
• adb shell input keyevent 46 46（reload）

ここでの他の回答には、私にとって重要な1つのステップが欠けていました。AndroidManifest.xmlで、usesCleartextTrafficを追加する必要がありました。

    <application
      ...
      android:usesCleartextTraffic="true">

安全でないhttpリクエストをサポートしたい場合を除いて、アプリの本番リリースではこれを維持したくないでしょう。

これをAndroidManifest.xmlに追加した後、Tom Arandaの回答に従い、エミュレーターは最終的にデバッガーに接続できました。

私は@sajibの答えを出し、このスクリプトを使用してポートをリダイレクトしました：

#!/usr/bin/env bash

# packager
adb reverse tcp:8081 tcp:8081
adb -d reverse tcp:8081 tcp:8081
adb -e reverse tcp:8081 tcp:8081

echo "🚧 React Native Packager Redirected 🚧"

アプリケーションをアンインストールして、react-native run-androidを実行します。次に、Chromeでデバッグの終了をクリックしてhttp：// localhost：8081 / debugger-ui /を置き換え、react-native run-androidを終了します。それでも成功しない場合は、もう一度お試しください

エキスパート開発者が特別にRibamar Santos提供したすべての印象的な答えを取り入れて、機能しない場合は、よりトリッキーなことを確認する必要があります。

Airplane modeあなたの（エミュレートされた）電話のようなもの！または、ネットワークを表現しないように操作される可能性のあるnetwork status of Emulator（Data status and Voice status on Cellular tab of Emulator configuration）！いくつかのエミュレーションのニーズに！

このトリックでこの問題を克服しました！この穴を見つけるのは少し息をのむようなデバッグでした！

私の場合は、npmパッケージをインストールする必要もあります

そう

npm install react-native-debugger -g

これを追加してみてください

package.json

devDependencies: {
//...    
    "@react-native-community/cli-debugger-ui": "4.7.0"
}

すべてを終了します。

• npm install
• npx react-native start
• npx react-native run-android

リファレンス：https : //github.com/react-native-community/cli/issues/1081#issuecomment-614223917