キーテイクアウト

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

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

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

開発者メニュー

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

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

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

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

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

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

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

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

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

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

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èn)してから、コマンドrを使用している場合、またはm。開発者メニューが表示されたら、JSをリモートでデバッグを選択します。これにより、デフォルトのJSデバッガーが開きます

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

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

この問題を解決するには、マシンとデバイスが同じWi-Fiで接続されていることを確認(rèn)し、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をデバッグするには、デスクトップアプリを使用する必要があります。この次のコマンドを?qū)g行するだけで、プロジェクトにグローバルまたはローカルにインストールできます。

またはnpm：

その後、アプリを起動するYarn React-Devtoolsを?qū)g行してアプリを起動します。

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

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

ネイティブデバッガー

を反応させます

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

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

ネイティブCli

を反応します

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

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

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

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

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

要約

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

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

react native

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

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

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

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

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

以上がDebugging React Nativeの6つのツールの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。