Debugging React Nativeの6つのツール

キーテイクアウト

• デバッグはソフトウェア開発の重要な部分であり、生産にプッシュされる前に問題を特定して修正するのに役立ちます。 Reactネイティブの世界では、デバッグに利用できるいくつかのツールがあり、それぞれが異なる環境や問題に適しています。 最も一般的に使用されるツールには、開発者メニュー、イエローボックス、レッドボックス、ChromeのDevtools、React Developer Tools、React Native Debugger、React Native CLIが含まれます。各ツールは、エラーや警告の表示、ライブリロードの有効化、UI要素の検査など、独自の機能を提供します。
React Native Debuggerは、ReactネイティブアプリでReduxを使用している人にとって特に便利なツールです。これは、ReduxのDevToolsとReactの開発者ツールの両方を1か所に統合​​するスタンドアロンのデスクトップアプリであり、デバッグプロセスをより効率的にします。
• ReactネイティブCLIをデバッグに使用することもできます。アプリのログを表示し、アプリで使用しているライブラリと依存関係に関する関連情報を取得できます。これは、バージョンの不一致によって引き起こされるバグを修正するのに特に役立ちます。
• デバッグは、ソフトウェア開発の重要な部分です。デバッグを通して、何が間違っているのか、何が正しいのか、何が機能し、何が機能しないかを知っています。デバッグは、コードを評価し、生産にプッシュする前に問題を修正する機会を提供します。
• Reactネイティブの世界では、Reactネイティブは異なる環境（iOSとAndroid）で構成されているため、さまざまな方法で異なるツールでデバッグを行うことができます。つまり、デバッグに必要な問題やさまざまなツールがあります。 。

Reactネイティブエコシステムへの多数の貢献者のおかげで、多くのデバッグツールが利用可能です。この簡単なガイドでは、開発者メニューから始めて、それらの最も一般的に使用されていることを探ります。

デバッグは、そもそもコードを書くの2倍です。したがって、コードを可能な限り巧妙に記述する場合、定義上、デバッグするほど賢くありません。 - ブライアン・W・カルニガン

開発者メニュー

アプリ内開発者メニューは、Reactネイティブをデバッグするための最初のゲートです。さまざまなことを行うために使用できる多くのオプションがあります。各オプションを分解しましょう。

• リロード：アプリをリロードします
• jsをリモートでデバッグ：JavaScriptデバッガーにチャンネルを開きます
• ライブリロードを有効にする：[保存]をクリックすると、アプリを自動的にリロードします
• ホットリロードを有効にする：変更されたファイルに加えられた変更の時計
• 検査官のトグル：インスペクターインターフェイスを切り替えます。これにより、画面とそのプロパティ上のUI要素を検査できます。また、ネットワーキングなどの他のタブを備えたインターフェイス、HTTP呼び出し、パフォーマンスのタブを表示します。

イエローボックスとレッドボックス

レッドボックスはエラーを表示するために使用されます。アプリがエラーをスローするたびに、Redboxとエラーの説明が表示されます。 Console.Errorを書くことでいつでも表示できます。しかし、それは生産では機能しません。つまり、その環境でエラーが発生した場合、アプリはクラッシュして実行を停止します。

レッドボックスはあなたの友達です。それについて役立つことの1つは、エラーを表示し、それを修正する方法に関する提案を提供することです。たとえば、Reactネイティブではサポートされていないスタイルプロパティ、または特定の要素に使用されるプロパティを頻繁に書きます。 Redboxにはエラーが発生しますが、ビューに適用できるサポートされているスタイルプロパティのリストも表示されます。

イエローボックスは、警告を表示するために使用されます。アプリのルートディレクトリにindex.js内に示されているコードの行を追加することで、それらを無効にできます。しかし、イエローボックスは非常に便利であるため、それは推奨されません。彼らは、パフォーマンスの問題や非推奨コードなどについて警告します。 React-Nativeのイエローボックス要素を使用して、特定の警告を表示できます。

ほとんどのイエローボックス警告は、コードの悪い練習に関連しています。たとえば、コンポーネントがマウントされていないときに削除していないこと、またはこのような機能と依存関係を非推奨しているというイベントリストナーがあるという警告が得られる場合があります。

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

これらの問題を修正すると、多くのバグが防止され、コードの品質が向上します。

公式ドキュメントのネイティブのデバッグについてはいつでも学ぶことができます。

warning: ViewPagerAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. See https://github.com/react-native-community/react-native-viewpager

chromeのdevtools

Chromeは、Reactネイティブをデバッグするために最初に考えるツールです。 ChromeのDevToolsを使用してWebアプリをデバッグすることは一般的ですが、JavaScriptを搭載しているため、Reactネイティブをデバッグするためにそれらを使用することもできます。

chromeのdevtoolsをネイティブで使用するには、まず同じwi-fiに接続されていることを確認してから、コマンドrを使用している場合、またはm。開発者メニューが表示されたら、JSをリモートでデバッグを選択します。これにより、デフォルトのJSデバッガーが開きます

次に、このアドレスをチェックしてくださいhttp：// localhost：8081/debugger-ui/in chrome。このページを表示する必要があります：

Androidでトラブルシューティングを行う必要がある場合があります

この問題を解決するには、マシンとデバイスが同じWi-Fiで接続されていることを確認し、Android：useScleArtextTraffic = "true"にAndroid/app/src/main/androidmanifest.xmlに追加します。これがうまくいかない場合は、他のソリューションのためにこれらのリンクをチェックしてください：

スタックオーバーフロー

github

Chromeに正常に接続した後、Chrome Inspectorを切り替えることができます。

次に、React Nativeアプリのログをご覧ください。また、ChromeのDevToolsが提供する他の機能をご覧ください。また、Webアプリと同じようにReactネイティブで使用してください。

ChromeのDevToolsを使用してReactネイティブを使用することの制限の1つは、Webアプリをデバッグするときにスタイルをデバッグしたり、通常と同じようにスタイルのプロパティを編集できないことです。また、Reactのコンポーネント階層を検査する際のReactの開発者と比較して制限されています。

React Developer Tools

React Nativeの開発者ツールを使用してReact Nativeをデバッグするには、デスクトップアプリを使用する必要があります。この次のコマンドを実行するだけで、プロジェクトにグローバルまたはローカルにインストールできます。

またはnpm：

その後、アプリを起動するYarn React-Devtoolsを実行してアプリを起動します。

Reactの開発者ツールは、これらの2つの理由でReactネイティブをデバッグするための最良のツールかもしれません：

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

Reactコンポーネントをデバッグすることができます。

warning: ViewPagerAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. See https://github.com/react-native-community/react-native-viewpager

Reactネイティブでスタイルをデバッグすることができます（これらの開発者ツールの私のお気に入りの機能！）。新しいバージョンには、開発者メニューの検査官とも連絡するこの機能が付属しています。以前は、スタイルを書くことが問題であり、アプリがリロードして変更を確認するのを待たなければなりませんでした。これで、スタイルのプロパティをデバッグおよび実装し、アプリをリロードせずに変更の効果を即座に確認できます。

Reactの開発者ツールアプリの使用について詳しくは、こちらをご覧ください。

ネイティブデバッガー

を反応させます

ReactネイティブアプリでReduxを使用している場合、Reactネイティブデバッガーはおそらくあなたにとって適切なデバッガーです。これは、MacOS、Windows、Linuxで動作するスタンドアロンデスクトップアプリです。 ReduxのDevToolsとReactの開発者ツールの両方を1つのアプリに統合するため、デバッグのために2つの別々のアプリを使用する必要はありません。

React Native Devuggerは私のお気に入りのデバッガーであり、React Nativeとの仕事で通常使用するデバッガーです。 ReduxのDevToolsのインターフェイスがあり、Reduxログとアクションを確認できるインターフェイスと、React React要素を検査およびデバッグできるReactの開発者ツールのインターフェイスがあります。ここでインストール手順を見つけることができます。 Chromeの検査官を開くのと同じように、このデバッガーに接続できます。 ChromeのDevtoolsにReactネイティブデバッガーを使用することには、いくつかの利点があります。たとえば、DEVメニューからインスペクターを切り替えて、Reactネイティブ要素を検査し、ChromeのDevToolsでは利用できないスタイルを編集できます。

ネイティブCli

を反応します

ReactネイティブCLIを使用して、デバッグも行うことができます。アプリのログを表示するために使用できます。 React-Nativeログアンドロイドを攻撃すると、AndroidでのDBログキャットのログが表示され、iOSでログを表示するには、React-Native Log-Iosを実行できます。 >

次に、端末にログが表示されます。

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

ReactネイティブCLIを使用して、ターミナルでReact-Native情報を実行することにより、アプリで使用しているライブラリと依存関係に関する関連情報を取得できます。使用しているツールに関する有用な情報を示しています。たとえば、React-Native情報を実行したときの出力の例を次に示します。

この情報を使用して、プロジェクトで使用しているツールのバージョンの不一致によって引き起こされるいくつかのバグを修正できます。そのため、このコマンドを使用して環境情報を確認することは常に良いことです。

要約

ここで見たものに加えて、Reactネイティブをデバッグするためのツールがたくさんあります。それは本当にあなたのプロジェクトの特定のニーズに依存します。 Reduxを使用することが多いため、Reactネイティブデバッガーデスクトップを使用しています。これは、1つのアプリに1つのツールを組み合わせて組み合わせています。

ネイティブをデバッグするツールと一般的なネイティブについて詳しく説明したい場合は、Twitterで私を叩いてください。あなたから聞いてみたいです！

react native

でのデバッグに関するよくある質問（FAQ）

Reactネイティブでデバッグするための最良のツールは何ですか？

Reactネイティブでデバッグできるツールがいくつかあります。最も人気のあるものには、React Native Debugger、Reactotron、Flipperが含まれます。 React Native Debuggerは、React DevtoolsとRedux Devtoolsを組み合わせたスタンドアロンアプリです。これにより、Reactコンポーネントの階層、Reduxストア、および派遣アクションを検査できます。一方、Reactotronは、ReduxまたはMobx-State-Treeアプリケーションの状態を検査できるデスクトップアプリケーションです。 Flipperは、モバイルアプリをデバッグするためのプラットフォームです。拡張可能で、アプリのさまざまな部分のデバッグに役立つプラグインをインストールするマーケットプレイスがあります。 FlipperやReactotronなどのツールを使用します。これらのツールを使用すると、アプリが作成したすべてのネットワークリクエストを表示し、詳細を検査し、応答を変更することもできます。 React Native Debuggerの組み込みネットワークインスペクターを使用することもできます。ネイティブデバッガーを反応します。このツールを使用すると、画面上のコンポーネントを選択して、レイアウト、スタイル、プロップを検査できます。同様の機能を提供するフリッパーのレイアウトインスペクターを使用することもできます。反応ネイティブに組み込まれています。このツールは、FPS（1秒あたりのフレーム）、RAM使用、CPU使用など、アプリのパフォーマンスに関するリアルタイムの統計を提供します。 React Devtoolsのプロファイラーを使用して、Reactコンポーネントがレンダリングする頻度とそれが何をレンダリングするかを測定することもできます。 Redux Devtoolsを使用して、反応ネイティブをデバッグできます。このツールを使用すると、すべての州とアクションペイロードを検査することができ、アクションを「キャンセル」することで時間をさかのぼることができます。 Redux Devtoolsをスタンドアロンアプリとして使用するか、React Native DebuggerまたはReactotronに統合できます。プラットフォーム固有のツールを使用してデバッグされます。 Androidの場合、Android Studioの組み込みデバッガーを使用できます。 iOSの場合、Xcodeの組み込みデバッガーを使用できます。これらのツールを使用すると、ブレークポイントを設定し、コードをステップスルーし、変数を検査できます。フリッパーまたは反応ネイティブデバッガー。これらのツールは、アプリのメモリ使用に関する情報を提供し、適切にクリーンアップされていないコンポーネントを特定するのに役立ちます。

反応ネイティブで非同期コードをデバッグするにはどうすればよいですか？

反応ネイティブの非同期コードは、非同期ストレージを使用してデバッグできます。これにより、アプリの一連のアクションと状態の変更を確認できます。これにより、物事がどこに向かっているのかを特定するのに役立ちます。 Asyncストレージを追跡するための機能を提供するReactoTronなどのツールを使用することもできます。ネイティブデバッガー。このツールを使用すると、アニメーションプロパティが時間とともに変化する際の値を確認できます。パフォーマンスモニターを使用してアニメーションのFPSを確認することもできます。 Crashlytics。これらのツールは、ユーザーからのクラッシュレポートをリアルタイムで収集するため、クラッシュに至るまで何が起こったのかを正確に確認できます。詳細なスタックトレース、デバイス情報、およびユーザーアクションを提供します。

以上がDebugging React Nativeの6つのツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。