どのようにReact Nativeをデバッグしますか？

Question

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

Answer 1

Cmd+D シミュレータ内から。 Chromeがポップアップ表示され、そこから開発者ツールを使用できます。

編集する

これは help docs にリンクされています。

Answer 2

Reactネイティブアプリのデバッグ

あなたの反応アプリのJavaScriptコードをデバッグするために、以下をしてください：

1. IOSシミュレータでアプリケーションを実行してください。
2. Command + Dを押すと、Webページが http：// localhost：8081/debugger-ui に開きます。 （現時点ではChromeのみ）またはShake Gestureを使用してください
3. 有効にする - キャッチした例外で一時停止する より良いデバッグ環境のために。
4. Chromeデベロッパーツールを開くにはCommand + Option + Iを押すか、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オプションが表示されます。

Answer 3

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

• チェックを外すウィジェット
• CMD + mクロムでデバッグをクリックして有効にしてください。

Answer 4

他の答えに加えて。 debugger文を使用して、react-nativeをデバッグできます。

例：

debugger; //breaks execution

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

Answer 5

cmd ⌘ + D 奇妙なことに私のために働かなかった。押す ctrl + cmd ⌘ + Z iOSのシミュレータで私のためにデバッグブラウザウィンドウをキックオフしました。

これはポップアップ画面です。

詳細はこちら。

Answer 6

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

windows、osx、linuxに作用します。

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

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

Answer 7

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

adb Shell input keyevent 82

それは画像のような画面を促すでしょう

それから選択してください

debug JS Remotely

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

Answer 8

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

adb Shell input keyevent 82

Answer 9

私はこれまでの素晴らしい答えについてコメントするのに十分な評判を持っていません。 :)ここに私が反応ネイティブアプリを開発するときにデバッグしている方法のいくつかがあります。

1. ライブリロード

   react-nativeを使用すると、⌘+ Rキーまたは ライブリロードを有効にする を使用して変更を簡単に確認でき、watchmanはシミュレータを最新の変更で「更新」します。エラーが発生した場合は、その赤い画面の行番号から手がかりを得ることができます。 2、3回元に戻すと元の作業状態に戻ります。

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

   debuggerブレークポイントを追加するよりも、プログラムを実行させていくつかの情報をログに記録する方が望ましいと思います。 （タフなデバッガは、外部のパッケージやライブラリを扱うときに便利で、自動補完機能がついてくるので、他にどんな方法が利用できるか知っているでしょう。）

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

まあそれはあなたが遭遇したエラーの種類とデバッグの仕方のあなたの好み次第です。ほとんどのundefined is not an object (evaluating 'something.something')では、方法1と2は私には十分でしょう。

外部のライブラリや他の開発者によって書かれたパッケージを扱うことはデバッグするためにより多くの努力を必要としますが、Chrome Debuggingのような良いツールです。

時にはそれは反応ネイティブのプラットフォーム自体から来ているので、反応ネイティブの問題のためのグーグルは間違いなく助けになるでしょう。

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

Answer 10

adb logcat *:S ReactNative:V ReactNativeJS:V

androidログ用にターミナルでこれを実行します。

Answer 11

私には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')

Answer 12

1. シミュレータでアプリを実行する - react-native run-ios
2. Ctrl + Dを押してDebug JS Rem remoteをクリックします。

1. webページは http：// localhost：8081/debugger-ui で開く必要があります。そうでない場合はURLを入力してChromeでこのリンクにアクセスしてください。
2. ページを右クリックして[検査]をクリックすると、クロム用の開発者ツールが開きます。

3. トップメニューのソースに行き、右側のファイルエクスプローラであなたのjsクラスファイルを見つけてください。

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

Answer 13

Microsoft Visual Codeを使用している場合は、React Native Tools拡張をインストールしてください。それから、希望の行番号をクリックするだけでブレークポイントを追加できます。アプリを設定およびデバッグするには、次の手順を実行します。

あなたがそれを使用する場合はエミュレータでDebug JS Rem Remoteを有効にすることを忘れないでください。

Answer 14

の代わりに Cmd+MAndroidエミュレータプレス用 F10 Windowsでは。エミュレータは、すべての反応ネイティブデバッグオプションを表示し始めます。

Answer 15

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

Answer 16

ファイルパスにスペースを入れることを防ぐ Cmd+D 仕事から。私は自分のプロジェクトをスペースのない場所に移動し、ようやくChromeデバッガが動作するようになりました。 バグ のように思えます。

Answer 17

デフォルトでは、私のiosシミュレータはキーストロークを拾っていなかったので、cmd-Dは機能しませんでした。私はシミュレータのメニューを使ってキーボードの設定をオンにしなければなりませんでした：

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

Cmd-Dはクロムデバッグを開始します。

Answer 18

Androidの場合：Ctrl + M（エミュレータ）または（デバイス内）電話機を振るとメニューが表示されます。

IOSの場合：Cmd + Dまたは電話を振るとメニューが表示されます

あなたはクロムを持っていることを確認してください。

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

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

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

Answer 19

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

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

Answer 20

このメニューをAndroid emulatorに表示したいとします。 

• それから、⌘+mを試して、Macの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を再試行してください。

• これが役に立つことを願っています、それは私のために働いた。

Answer 21

もしあなたがReduxを使っているなら、React Native Debuggerを強くお勧めします。 Chromeのdevtoolsだけでなく、ReduxのdevtoolsとReactのdevtoolsもあります。

Redux Devtools ：これにより、あなたは自分の行動を見ることができ、それらを通して前後に進むことができます。それはまたあなたがあなたのreduxストアを見ることを可能にし、各アクションのために自動的に前の状態を更新された状態と比較する機能を持っているので、あなたがあなたが一連のアクションを行ったり来たりするときそれを見ることができます。

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

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

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

Answer 22

これは、反応ネイティブデバッガアプリケーションを使用するための代替方法です。

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

react-native-debugger

同様に今ではあなたはあなたを助けるために直接リンクの下に使用するかもしれません日々。

chrome-developer-tools

Answer 23

Safariを使用すると、「Debug JS Rem remote」を有効にしなくても、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

Answer 24

Reactotronという非常に良いdebugerという名前もあります。 https://github.com/infinitered/reactotron

データ値を確認するためにデバッグモードに入る必要はなく、多くの選択肢があります。

見てみると本当に便利です。 ;）

Answer 25

ステップ1： スクリプトを停止したい場所にdebuggerを配置します。

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

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

ステップ2： Cmd+D on ios emulator およびCmd+M on Androidシミュレータ を押します。本物のデバイスを持っている場合は、デバイスをシェイクしたくない場合はdevメニューを開くためにデバイスをシェイクしてください このブログ

ステップ3： Enable Remote JS Debuggingを選択するとChromeが開きます

ステップ4： Developer Tools.を選択

ステップ5： あなたのコード内のSourcesを書いたところはどこでもdebuggerタブであなたのデバッガは一時停止されます。コンソールに行き、デバッグしたい（コードブロック内にある）パラメータを次のように入力します。 次のデバッガポイントに再び移動するには、ソースに移動します - > [スクリプト実行の再開]ボタン（右隅の青いボタン）をクリックします

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

デバッグを楽しんでください。

Answer 26

React-Nativeでは、デバッグはずっと簡単です。

• IOSでデバッグするには

cmd + d

ctrl + cmd + z （シミュレータ用）

• Androidでデバッグする

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

Answer 27

反応するネイティブアプリをデバッグするには、次のアドレスにアクセスしてください。

localhost：8081/debugger-ui あなたのデフォルトブラウザ（chrome）で反応しているネイティブアプリをデバッグするための開発者ツールを開く

Answer 28

実はとても簡単です。 （Macの場合）cmd Dを押すだけで、シミュレータはポップアップメニューを作成します。そこから「Debug JS Rem remote」またはそれに沿った何かをクリックするだけです。特定のパッケージに関連するコードを実行しながらデバッガを実行すると、人に問題が生じることがわかっています。 react-native-mapsとデバッガに問題がありました。しかし、それは修正されました。ほとんどの場合、あなたはうまくいくはずです。

Answer 29

Visual Code Studioを使用して、React Native AndroidおよびiOSアプリをデバッグする最適な方法

ステップ1。

インストールReact Native-フルパック拡張機能

ステップ2。

USBデバッグモードを使用してモバイルデバイスを接続するか、Androidスタジオからエミュレーターを開きます。

ステップ3。

Visual Code Studioの左側のメニューからデバッグオプションをクリックしますAdd configurationをクリックし、React Nativeその後作成launch.json

ステップ4。

長押しで電話機のdevオプションを開くか、電話機を振って有効にしますjsをリモートでデバッグします

ステップ5。

最後のステップで再生ボタンをクリックして、Debug AndroidまたはDebug iosを選択します

詳細については、このリンクを参照してください

https://medium.com/@tunvirrahmantusher/Android-debug-with-vscode-for-react-native-96f54d73462a

Answer 30

React Native App DevelopmentのAtomエディターでNuclideを使用する場合は、開発段階でアプリがデバイス上で実行されているときに小道具や状態の値の変化を観察するのに役立つ「Element Inspector」も使用できます。もっと知りたい - https://nuclide.io/docs/platforms/react-native/#element-inspectorここに画像の説明を入力してください

Answer 31

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

2. - デバッグjsをリモートでクリックして下さい

3. Google Chromeはコンソールに行きます

Answer 32

あなたはbrewからReact Native Debuggerをインストールすることができます。クロムのデバッガよりも使いやすいです。

Answer 33

デフォルトでデバッグを有効にしたい場合

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 Rem remote"を有効にしてReact Nativeアプリを起動します

Answer 34

私はこのライブラリを反応ネイティブプロジェクトのデバッグに使用します。

https://github.com/jhen0409/react-native-debugger 含まれています

1. React-devtools-coreからのReact Inspectorを含みます。
2. Redux DevToolsを含み、redux-devtools-extensionで同じAPIを作成しました。

またはあなたが使用することができます

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

Answer 35

WindowsでAndroidエミュレータを使用すると、次の手順を実行できます。

1. エミュレータが起動してその上のアプリが起動したら、 Menu ボタンを押して、 "Debug JS Rem remote"または "Debug in Chrome"を選択します（エミュレータの使用方法によって異なります）。参考として次の画像を見ることができます： ステップ画像付きエミュレータ
2. 新しいChromeタブが表示されます。開発者ツールを表示してデバッグ手順の追跡を開始するには、Ctrl +⇧Jを押す必要があります。 この画像を参考にしてください

さらに、デバッグプロセスをよりわかりやすくするためにconsole.log()機能を使用する必要があります。

Answer 36

あなたが2分毎にあなたの本当の電話を振るしたくないならば、あなたはそれのためにカスタムlibも使うことができます

開発モードのときにdevメニューを開くために振る代わりに3本の指で触れるを使えるようにするlibを作成しました。

https://github.com/pie6k/react-native-dev-menu-on-touch

あなたはあなたのアプリを中にラップするだけでよい：

devMenuOnTouchを「react-native-dev-menu-on-touch」からインポートします。 //または： 'react-native-dev-menu-on-touch'から{DevMenuOnTouch}をインポート

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

実際のデバイス上でデバッグしなければならず、同僚があなたの隣に座っているとき、それは本当に役に立ちます。

Answer 37

ラップトップに接続されている実際のデバイスでアプリを実行する場合は、react-native log-iosまたはreact-native log-Androidを使用して端末経由でデバッグできます（シミュレータでも機能します）。

Answer 38

新しいバージョンのreact-nativeでは、react-native log-Androidまたはreact-native log-Androidを使用してアプリケーションのログを開発モードで確認できます。

Answer 39

1. 端末adb logcat *:S ReactNative:V ReactNativeJS:Vで実行
2. android Studioでプロジェクトを開き、logcatを開きます（下部パネルのボタン）。
3. 端末react-native run-Androidで実行

構築後、Android Studioのlogcatに詳細ログが表示されます。

Answer 40

あなたはデバッグのためにエキスポを使うことができます： https://expo.io/ /

Expoを使うと、Web開発者はiOSとAndroidの両方で機能する真のネイティブアプリケーションを、JavaScriptで1回作成するだけで作成できます。オープンソースで、無料で、React Nativeを使っています。

これは素晴らしいツールであり、React Europe confでこのワークショップを見ることができます。

https://www.youtube.com/watch?v=HygXkQDMSGU&t=6675s

Answer 41

それは本当に私がやっていることによります。私がUIを変更したり、UIをデバッグしたりしているのであれば、通常はライブおよびホットリロードを有効にして変更を加えてから、即座にフィードバックを得ます。それがもっと技術的なものであるならば、私はアプリの状態を見るためにJSデバッグをオンにします。しかし、リロードは素早いのでネイティブでは反応が早いため、状態が乱雑すぎる場合はコンソールログを使用します。

Answer 42

私が使用するテクニックは、Androidのデバッグ戦略と非常によく似ており、私のすべての.jsファイルにTAGというグローバル変数を含めることです。

const TAG = 'APP_NAME+SCREEN_NAME';

それから必要なところで、私はします：console.log(TAG + 'ACTION');

このようにして、アクションを追跡し、ログステートメントがどこから来たのかを確認することができます。

Answer 43

ネイティブデバッガそれは私の問題の90％を解決するのに役立ちます