アプリがアプリシミュレーターで実行されているときに、React Nativeを使用してReactコードをデバッグするにはどうすればよいですか？

Cmd+Dシミュレーター内から。Chromeがポップアップし、そこからデベロッパーツールを使用できます。

編集：

これはヘルプドキュメントにリンクされています。

React Nativeアプリのデバッグ

反応アプリのJavaScriptコードをデバッグするには、次のようにします。

1. iOSシミュレーターでアプリケーションを実行します。
2. Press Command + DとWebページがhttp：// localhost：8081 / debugger-uiで開きます。（現時点ではChromeのみ）またはShake Gesture
3. より良いデバッグ体験のために、キャッチされた例外で一時停止を有効にします。
4. 押しCommand + Option + IてChromeデベロッパーツールを開くか、View-> Developer-> から開きDeveloper Toolsます。
5. これで、通常どおりにデバッグできるようになります。

オプション

Google Chrome用のReact Developer Tools拡張機能をインストールします。これによりReact、開発者ツールが開いているときにタブを選択すると、ビュー階層をナビゲートできます。

ライブリロード

Live Reloadをアクティブにするには、次のようにします。

1. iOSシミュレーターでアプリケーションを実行します。
2. を押しControl + Command + Zます。
3. これで表示されますEnable/Disable Live Reload、ReloadそしてEnable/Disable Debuggingオプションを。

Androidアプリの場合、Genymotionを使用している場合はを押してメニューを切り替えることができますが、CMD + mこれを行うにはメニューで有効にする必要がある場合があります。

• ウィジェットのチェックを外す
• クロムのデバッグをCMD + mクリックして有効にします

他の回答に加えて。デバッガステートメントを使用して、反応ネイティブをデバッグできます

例：

debugger; //breaks execution

これが機能するには、Chrome開発ツールが開いている必要があります

WindowsでAndroidデバイスを使用してデバッグする場合は、コマンドプロンプトを開き、次のように入力します（adbが正しく機能していることを確認してください）

adb shell input keyevent 82

画像のような画面が表示されます

次に選択

debug JS Remotely

新しいウィンドウが自動的に開きます。次に、inspect要素を開くか、コンソールのF12キーを押します。

このプログラムを試してください：https : //github.com/jhen0409/react-native-debugger

動作：windows、osxおよびlinux。

それはサポートします：react nativeそしてredux

また、仮想コンポーネントツリーを検査して、アプリに反映されるスタイルを変更することもできます。

cmd ⌘+ D奇妙なことに、私にはうまくいきませんでした。iOSシミュレータでctrl+ cmd ⌘+ Zを押すと、デバッグブラウザウィンドウが開始されました。

これはポップアップする画面です：

詳細はこちら。

Debian 8（Jessie）のreact-native 0.40.0のデバッグは、アプリがAndroidシミュレーターで実行されているときに、ChromiumまたはFirebugでhttp：// localhost：8081 / debugger-uiに移動することで実行できます。アプリ内開発者メニューにアクセスするには、ここで指摘したように、別のターミナルウィンドウで次のコマンドを実行します。

adb shell input keyevent 82

私は以前の素晴らしい回答にコメントするのに十分な評判がありません。:)以下は、react-nativeアプリを開発するときにデバッグする方法の一部です。

1. ライブリロード

   react-nativeを使用すると、changes + Rキーを使用して変更を非常に簡単に確認できます。または、ライブリロードを有効にすれば、ウォッチマンはシミュレータを最新の変更で「更新」します。エラーが発生した場合は、その赤い画面の行番号から手掛かりを得ることができます。元に戻す操作をいくつか行うと、作業状態に戻り、最初からやり直します。

2. console.log('yeah, seriously.')

   私は、debuggerブレークポイントを追加するよりも、プログラムを実行していくつかの情報をログに記録することを好みます。（タフなデバッガーは、外部のパッケージ/ライブラリーを操作するときに便利で、オートコンプリートが付属しているので、他に利用できるメソッドがわかります。）

3. Enable Chrome Debuggingdebugger;プログラム内のブレークポイント。

まあそれはあなたが発生したエラーの種類とデバッグ方法のあなたの好みに依存します。ほとんどの場合undefined is not an object (evaluating 'something.something')、方法1と2で十分です。

一方、他の開発者によって作成された外部ライブラリまたはパッケージを処理するには、デバッグに多くの労力が必要になるため、次のような優れたツールです Chrome Debugging

時々それは反応ネイティブのプラットフォーム自体から来ているので、反応ネイティブの問題をグーグルすることは間違いなく助けになります。

これが誰かの役に立つことを願っています。

の代わりにCmd+M、F10WindowsのAndroid Emulator Pressの場合。エミュレータは、すべての反応ネイティブデバッグオプションの表示を開始します。

adb logcat *:S ReactNative:V ReactNativeJS:V

android logのターミナルでこれを実行します。

Microsoft Visual Codeを使用している場合は、React Native Tools拡張機能をインストールします。次に、目的の行番号をクリックするだけで、ブレークポイントを追加できます。次の手順に従って、アプリをセットアップしてデバッグします。

エミュレータでJSをリモートで有効にすることを忘れないでください。

Androidの場合：Ctrl + M（エミュレーター）またはシェイクして（デバイス内）、メニューを表示します。

iOSの場合：Cmd + Dまたはシェイクザフォンでメニューを表示

クロムがあることを確認してください。

表示されたメニューで、[Debug JS Remotely Option]を選択します。

Chromeはlocalhost：8081 / debugger-uiで自動的に開きます。このリンクを使用して、デバッガーに手動で移動することもできます。

コンソールが表示され、ログが記録されていることがわかります。

私にとって、React-Nativeでデバッグする最良の方法は、「Reactotron」を使用することです。

Reactotronをインストールして、package.jsonにこれらを追加します。

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

今、それはあなたのコードにログインすることの問題です。例えば：console.tron.log('debug')

1. シミュレーターでアプリを実行する-反応ネイティブのrun-ios
2. Ctrl + Dキーを押して、[JSをリモートでデバッグ]をクリックします。

1. Webページはhttp：// localhost：8081 / debugger-uiで開く必要があります。URLを入力しないと、Chromeでこのリンクに移動します
2. ページを右クリックして[検査]をクリックすると、Chromeの開発者ツールが開きます

3. トップメニューのソースに移動し、右側のファイルエクスプローラーでjsクラスファイルを見つけます。

4. 画像に表示されているように、ビューにブレークポイントを設定して、コードをデバッグできます。

デフォルトでは、iOSシミュレーターがキーストロークを取得していなかったため、cmd-Dが機能しませんでした。シミュレーターのメニューを使用して、キーボードの設定をオンにする必要がありました。

ハードウェア>キーボード>キーボードの接続

cmd-DはChromeデバッグを起動します。

Androidアプリの場合、Ctrl + Mを押してリモートでデバッグjsを選択すると、URLがhttp：// localhost：8081 / debugger-uiの Chromeで新しいウィンドウが開きます。これで、Chromeブラウザでアプリをデバッグできます

ファイルパスにスペースがあると、+ が機能しなくなります。プロジェクトをスペースのない場所に移動し、ついにChromeデバッガーを動作させました。バグのようです。CmdD

デフォルトでデバッグを有効にする場合：

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

Androidでこれを機能させるには：

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

参照：「Debug JS Remotely」がデフォルトで有効になっているReact Nativeアプリを起動します

非常に単純な2つのコマンド

For IOS $ react-native log-ios
For Android $ react-native log-android

このメニューをAndroidエミュレーターに表示したい場合

• 次に、⌘+mMacのAndroidエミュレーターでこの開発設定ダイアログをポップアップ表示してみます。

• 表示されない場合は、に進みAVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input boxます。

• そして、再試行してください⌘+m。

• それでも表示されない場合は、実行中のエミュレータ設定に移動し、Send keyboard shortcuts toコンボボックス/ドロップダウンでEmulator controls (default)オプションを選択します。

• そして、再試行してください⌘+m。

• これがお役に立てば幸いです。

Reduxを使用している場合は、React Native Debuggerを強くお勧めします。これにはChrome開発ツールが含まれていますが、Redux開発ツールとReact開発ツールも含まれています。

Redux Devtools：これにより、アクションを表示したり、前後に移動したりできます。また、あなたのreduxストアを表示することができ、各アクションの更新された状態と以前の状態を自動的に比較する機能があるため、一連のアクションを前後に進むときにそれを確認できます。

React Devtools：これにより、特定のコンポーネント、つまりすべての小道具とコンポーネントの状態を検査できます。ブール値であるコンポーネントの状態の一部がある場合、それをクリックして切り替えることができ、変化したときのアプリの反応を確認できます。素晴らしい機能。

Chrome Devtoolsすべてのコンソール出力の表示、ブレークポイントの使用、デバッガーでの一時停止を可能にします。など標準のデバッグ機能。Redux Devtoolsでアクションがリストされている領域を右クリックして[Allow Network Inspect]を選択すると、Chrome DevtoolsのネットワークタブでAPI呼び出しを検査できます。

結論として、これらすべてを1か所にまとめることは素晴らしいことです。それらのいずれかが必要ない場合は、オン/オフを切り替えることができます。React Native Debuggerを入手して、人生を楽しんでください。

これは、reactネイティブデバッガーアプリケーションを使用する別の方法です。

以下のリンクを使用してアプリケーションをダウンロードできます。これは、ソースコードとともにreduxストアを管理するための非常に優れたアプリケーションです。

反応ネイティブデバッガ

同様に今、あなたはあなたを助けるために以下のリンクを直接使用することができます。

chrome-developer-tools

1. エミュレータを使用している場合はCtrl+ MとシミュレータCmd+D

2. をクリック-リモートでjsをデバッグ

3. Google Chromeはコンソールに移動します

Reactotronという非常に優れたデバッガ名もあります。 https://github.com/infinitered/reactotron

一部のデータ値を表示するためにデバッグモードである必要はなく、多くのオプションがあります。

本当に便利な一見をしてください。;）

React-Nativeではデバッグがはるかに簡単です。

• IOSでデバッグするには

cmd + d

ctrl + cmd + z （シミュレータの場合）

• Androidでデバッグするには

タッチでデバイスをシェイクします（開発者向けオプションが有効になっていることを確認してください）

ステップ1：次のdebuggerように、スクリプトを停止する 場所に配置します。

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

これにより、制御がこのコードブロックに到達すると、デバッガーが一時停止します。

ステップ2： 押しCmd+DのIOSエミュレータとCmd+MのAndroidのシミュレータ。実際のデバイスがある場合は、デバイスをシェイクして開発メニューを開きます。デバイスをシェイクしたくない場合は、このブログに従ってください

手順3：を 選択するとEnable Remote JS Debugging、Chromeが開きます

ステップ4： 選択Developer Tools.

ステップ5： デバッガーは、コード内でSources記述したタブに一時停止しますdebugger。コンソールに移動して、デバッグするパラメーター（コードブロックに存在する） を次のように入力します。次のデバッガーポイントに再び移動するには、[ソース]に移動し、[スクリプト実行の再開]ボタンをクリックします（右隅の青いボタン）。

スクリプトを一時停止する場所にデバッガーを配置します。

デバッグをお楽しみください!!

Safariを使用すると、「リモートでJSをデバッグ」を有効にすることなく、iOSバージョンのアプリをデバッグできます。次の手順に従ってください。

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger

まずiOSシミュレーターで、[command + D]キーを押すと、この画面が表示されます。

次に、[JSをリモートでデバッグ]ボタンをクリックします。

次のようなReact Native Debuggerページが表示される場合があります。

そして、あなたのインスペクター[f12]を開いて、コンソールタブに行ってデバッグしてください！:)

React Native 0.62がリリースされました- 公式ソリューションはFlipperです🚀

フリッパーは、反応ネイティブでデバッグモードを使用せずにAndroid＆iOSモバイルのデバッグツールです。

RN 0.62（このリンクを参照）以降、Flipperはデフォルトのプロジェクトで初期化されます。

Flipperにはデバッグ用のプラグインがいくつかあります。プラグインが含まれLayout、Network、Shared preferences

Flipperの最大の利点は多くのプラグインではありませんが、Android / iOSデバイスコンソールのデバッグも簡単に確認できます。

フリッパーは、クラッシュまたはネットワーク拒否についても警告します。

レイアウトプラグインには、アクセシビリティモードとターゲットモードが含まれています。

アプリケーションで生のネットワーク要求/応答を確認することもできます。