React Native Appsをデバッグするためのベストツールとプラクティス！

公開: 2022-03-30

デバッグは、ソフトウェア開発中の重要なアクティビティの1つです。これは、パフォーマンスの問題を引き起こすソフトウェアアプリケーションのエラーを特定し、問題を分析して、最終的に解決するプロセスを指します。デバッグを使用すると、ソフトウェアアプリケーションを運用段階にプッシュする前に、コードを検証して問題を修正できます。ただし、デバッグの問題は、開発、テスト、さらには本番/展開後など、さまざまな段階で発生する可能性があります。また、適切なデバッグツールと方法論を実装することで、開発がスピードアップし、最終製品の効率が向上します。

ReactNativeデバッグに来る; フレームワークはさまざまな環境で構成されており、最も有名なのはAndroidとiOSです。その結果、複数のプラットフォームが関係しているため、アプリのデバッグが困難になります。さらに、React Nativeはデバッグ用の多種多様なツールを提供しており、多くの人、特に初心者にとっては混乱を招くようです。この投稿では、問題を特定して専門家のように修正するのに役立つ、いくつかの効果的なプラクティスと便利なReactNativeおよびReactデバッガーツールについて説明します。

ReactNativeのデバッグ方法とベストプラクティス

コンソールのエラー、警告、およびログの特定と対処

コンソールのエラーと警告は、赤または黄色のバッジが付いた画面上の通知の形式で表示されます。

エラー

エラーは、コマンドconsole.error（）を使用してRedBox内に表示されます。このRedBoxには、エラーの説明と、エラーの解決方法に関する提案が含まれています。この例を見てください。 React Nativeフレームワークがサポートしていないスタイルプロパティを作成する場合、または特定の要素に使用することを目的としたプロパティを作成する場合（たとえば、要素ViewにbackroundImageを設定する必要がある場合）、RedBoxはエラーを表示します。ビューに適用できるサポートされているスタイルプロパティのリストとともに。

警告

警告は、コマンドconsole.warn（）を使用してYellowBox内に表示されます。このような警告には、パフォーマンス関連の問題や非推奨のコードに関する情報が含まれます。これらの警告のほとんどは、コード内のいくつかの悪い習慣を示しています。警告の例には、削除されていないeventListenerの存在、非推奨の機能と依存関係の存在などに関する通知が含まれます。

ログ

ログを発行するには、コマンドreact-native log-androidを使用するか、コマンドconsole.log（string str）とともにChromeコンソールを使用します。

React Native開発者は、製品のデモ中など、必要なときにいつでもコマンドLogBox.ignoreAllLogs（）を使用してエラーと警告に関する通知を非表示にできます。コマンドLogBox.ignoreLogs（）を使用して、ログごとに通知を非表示にすることもできます。この方法は、サードパーティの依存関係の場合のように、ノイズの多い警告を解決できないシナリオで機能します。ただし、ログを無視する場合は常に、無視されたログを後で修正するためのタスクを作成してください。

ReactNativeの組み込みデバッグモードを使用したデバッグ

SafariやChromeなどのブラウザーを使用するReactNativeエコシステムが提供する組み込みのデバッグモードを利用する方法を確認してください。

Chromeでのデバッグ

React Nativeをサポートするためにこれらのreact-devtoolsをインストールします：YarnとNPM。次に、開発モードを使用してアプリ内開発者メニューを開きます。ここでは、デバッグオプションをアクティブにしてデバッグプロセスを開始します。

[開発者]メニューから、[JSをリモートでデバッグする]オプションを選択します。このアクションにより、JSデバッガーへのチャネルが開かれます。新しいタブが開きます。ここで、Chromeメニューから[ツール]-[開発者ツール]を選択します。 devtoolsを開くため。

アプリ内開発者メニューでアプリをデバッグするために利用するその他の最も顕著なオプションは次のとおりです。

ライブリロードを有効にする：アプリを自動的にリロードするため、ホットリロードを有効にする：ファイルが変更される結果となる変更を識別するため、およびStartSystraceはAndroidマーカーベースのプロファイリングツールを起動します。オプションのToggleInspectorは、インスペクターインターフェイスの切り替えに役立ちます。このようにして、開発者は画面に存在するUI要素を検査し、それらのプロパティを調べることができます。次に、インターフェイスが表示されます。このインターフェイスには、HTTP呼び出しを表示するためのネットワーキングや、パフォーマンス関連のタブなどの他のタブが含まれています。 [パフォーマンスモニターの表示]オプションは、アプリのパフォーマンスを追跡します。

Safariを使用したデバッグ

アプリのiOSバージョンはSafariを使用してデバッグできます。ここでは、「JSをリモートでデバッグ」を有効にする必要はありません。 [設定]を開き、次のオプションを選択するだけです。

環境設定
高度
メニューバーに[開発]メニューを表示する

次に、アプリケーションのJSContextを選択します。

開発–シミュレータ– JSContext

これで、SafariのWebインスペクターが開き、デバッガーとコンソールを表示できるようになります。また、手動で、または高速更新（ライブリロード）を使用してアプリをリロードするたびに、新しいJSContextが作成されます。 [JSContextのWebインスペクターを自動的に表示する]オプションを選択することを忘れないでください。それ以外の場合は、最新のJSContextが手動で選択されます。

著名なReact/Reactネイティブデバッガーツール

DevToolsに反応する

この一連のReactツールは、Reactのコンポーネント階層をデバッグするために使用され、フロントエンド操作に適しています。このツールセットを使用すると、コンポーネントツリーの奥深くにあるものを表示できます。コンポーネントのオプション状態を選択し、現在の小道具を編集します。

React Developer Toolsは、FirefoxおよびChromeブラウザの拡張機能です。ただし、React Nativeに組み込まれているアプリをデバッグするには、自律バージョンのReact DevToolsを使用し、ターミナルでこのコマンド（npm install –g react-devtools）を実行する必要があります。次に、コマンドreact-devtoolsを実行してアプリを起動します。アプリのUI要素を調べるには、アプリ内開発者メニューから[インスペクターを表示]オプションを選択します。

Reduxを使用する場合は、コンポーネントの状態を完全に理解するために、ReactDevToolsをReduxDevツールと一緒に使用する必要があります。このためには、Redux DevToolsを個別にインストールする必要があります。ここでは、ツールReactNativeDebuggerも非常に便利です。

React NativeDebugger

React Nativeデバッガーは、React Nativeアプリの開発中にReduxを使用すると、非常に有益です。これは、Linux、Windows、およびmacOSで機能するスタンドアロンツールです。このツールは、非同期ストレージコンテンツのログ記録または削除、パフォーマンスの問題の検出と診断、およびネットワーク要求の調査に使用されます。

最良の部分は、ReactDevToolsとReduxDevToolsを単一のアプリ内に統合することです。したがって、ReactおよびRedux環境のアプリをデバッグするために2つの別々のアプリケーションを使用する必要はありません。このツールは、React要素を調べてデバッグしたり、Reduxログと関連アクションを表示したりできるインターフェイスを提供します。

React Nativeデバッガーは、ReactNative要素の検査にトグルインスペクターを採用する点でChromeDevToolsよりも優れています。さらに、React Nativeデバッガーは、スタイルを編集するための機能を提供します。この機能はChromeDevToolsにはありません。

フリッパー

Flipperは、JavaScriptアプリ、デバイス、JSログのデバッグに使用されるクロスプラットフォームツールです。デバイスを管理するためのシミュレーターを起動し、複数のデバイスに同時に接続して複数のプラットフォーム間でアプリをデバッグできます。また、ウォッチポイントとブレークポイントを含むシングルステップのデバッグプロセスが含まれます。

Flipperはその場でコンポーネントを編集し、それらの編集をアプリケーション内にリアルタイムで反映し、アプリのレイアウトインスペクターと統合します。統合された起動管理の機能により、開発者は構成を定義し、それらを単体テストに使用できます。複数の場所で構成を複製する必要はありません。さらに、プラグインベースのアーキテクチャと無数の便利な機能が付属しています。今後数年間でより多くの機能が期待されています。

Flipperを使用すると、シンプルなデスクトップインターフェイスを使用してアプリを表示、検査、および制御できます。 Flipperはそのまま使用することも、プラグインAPIを使用して拡張することもできます。

このブログをチェックして、React Nativeアプリをデバッグするための他の重要なツールに関する詳細情報を入手してください！

結論

前述のツールと方法論により、プロのように、アプリをより効率的かつ完璧にデバッグできます。これらのツールとベストプラクティスは、開発をスピードアップし、開発者の生産性を高め、最終製品のパフォーマンスを向上させるために驚異的に機能します。

React Nativeアプリの機能を理解し、問題を一度に特定し、バグを即座に修正する熟練したアプリ開発者とチームを組みたいですか？もしそうなら、著名なアウトソーシングソフトウェア開発会社であるBiz4Solutionsは試してみる価値があります！私たちは、有能なReact Native開発サービスの提供を専門としており、アプリの構想から展開後のメンテナンスまで、製品のライフサイクル全体を処理します。

その他のコアテクノロジーの詳細については、以下のリンクを参照してください。

Swiftアプリの開発
.Netアプリ開発
Javaアプリ開発