318

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

4

48 に答える 48

178

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

編集：

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

于 2015-03-26T23:35:16.307 に答える
91

React Native アプリのデバッグ

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

  1. iOS シミュレーターでアプリケーションを実行します。
  2. を押すと、Web ページがhttp://localhost:8081/debugger-uiCommand + Dで開きます。(現時点では Chrome のみ) またはShake Gesture
  3. デバッグ エクスペリエンスを向上させるために、キャッチされた例外で一時停止を有効にします。
  4. を押しCommand + Option + Iて Chrome デベロッパー ツールを開くか、View-> Developer->で開きDeveloper Toolsます。
  5. これで、通常どおりにデバッグできるはずです。

オプション

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

ライブリロード

ライブ リロードを有効にするには、次の手順を実行します。

  1. iOS シミュレーターでアプリケーションを実行します。
  2. を押しControl + Command + Zます。
  3. Enable/Disable Live Reload、Reloadおよびオプションが表示されEnable/Disable Debuggingます。
于 2015-03-31T09:38:18.833 に答える
68

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

  • ウィジェットのチェックを外す
  • クロムでデバッグをCMD + mクリックして有効にします
于 2016-04-28T03:31:15.300 に答える
35

他の回答に加えて。debugger ステートメントを使用して、react-native をデバッグできます

例：

debugger; //breaks execution

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

于 2015-05-20T14:28:23.380 に答える
29

ここに画像の説明を入力

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

対象: windows、osxおよびlinux。

react native以下をサポートします。redux

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

于 2017-03-09T00:58:15.860 に答える
14

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

画像

于 2018-07-25T08:01:11.987 に答える
12 
adb logcat *:S ReactNative:V ReactNativeJS:V

Android ログのターミナルでこれを実行します。

于 2016-06-15T11:45:46.967 に答える
11

React Native 0.62 リリース -公式ソリューションは Flipper

Flipperは、React Native でデバッグ モードを使用しない Android および iOS モバイル デバッグ ツールです。

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

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

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

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

ここに画像の説明を入力

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

ここに画像の説明を入力

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

于 2020-04-21T07:08:22.367 に答える
5

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

于 2015-03-28T16:16:46.020 に答える
4

Redux を使用している場合は、React Native Debugger を強くお勧めします。Chrome devtools が含まれていますが、Redux devtools と React devtools も含まれています。

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

React Devtools : これにより、特定のコンポーネント、つまりすべての props とコンポーネントの状態を検査できます。ブール値であるコンポーネントの状態の一部がある場合は、それをクリックしてトグルし、変化したときにアプリがどのように反応するかを確認できます。優れた機能。

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

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

于 2017-12-14T00:49:54.043 に答える
4

2 つのコマンドだけの非常にシンプルな

For IOS $ react-native log-ios
For Android $ react-native log-android
于 2017-03-30T05:29:14.783 に答える
3

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

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

本当に役に立つものを見てください。;)

于 2017-09-29T14:06:36.877 に答える
1
  1. ターミナルで実行adb logcat *:S ReactNative:V ReactNativeJS:V
  2. Android Studioでプロジェクトを開き、開くlogcat（下部パネルのボタン）
  3. ターミナルで実行react-native run-android

ビルド後、Android Studio の詳細ログが表示されlogcatます。

于 2018-05-25T13:36:57.630 に答える
1

2分ごとに実際の電話を振ったくない場合は、そのためにカスタムライブラリを使用することもできます

開発モードのときに、シェイクの代わりに 3 本の指でタッチして開発メニューを開くことができるライブラリを作成しました。

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

アプリを次のようにラップするだけです。

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

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

実際のデバイスでデバッグする必要があり、同僚が隣に座っている場合に非常に便利です。

于 2019-01-21T11:14:03.780 に答える