React DevTools を使用してコンポーネントのレンダリングを検査する

React DevTools（英語のみ）は、VegaアプリでのReactコンポーネントのレンダリングをデバッグおよびプロファイリングするために役立ちます。以下の機能が用意されています。

• 階層、プロパティ、スタイルを調べるコンポーネントインスペクター。
• コンポーネントの再レンダリングとその原因を分析する組み込みプロファイラー。

このページでは、React DevToolsをインストールして構成し、Vegaアプリで使用する方法について説明します。

​

前提条件

1. Vega SDK環境スクリプトを読み込んだ3つのターミナルウィンドウ。
2. デバッグビルド用に構成されたVegaアプリプロジェクト。

セットアップ手順については、Vega SDKのインストールとVegaアプリのビルドを参照してください。

​

React DevToolsのセットアップ

1. React DevToolsをグローバルにインストールします。
   npm install -g react-devtools@6.0.1
   
2. 接続をアクティブ化するために必要なポートを転送します。 React DevToolsはポート8097経由で接続しますが、React Nativeパッケージャーはポート8081を使用します。
   vega device start-port-forwarding -p 8097 -f false -d <<デバイスのシリアル番号>>
   vega device start-port-forwarding -p 8081 -f false -d <<デバイスのシリアル番号>>
   
   Vega仮想デバイスのテストでは、<<デバイスのシリアル番号>>にVirtualDeviceを指定します。
3. React DevToolsを起動します。
   npx react-devtools
   
4. プロジェクトディレクトリでReact Nativeパッケージャーを起動します。
   npm start
   
5. アプリのデバッグバージョンを実行します。
   vega run-app <<デバッグVPKGのパス>> <<対話型コンポーネントのID>>
   
   アプリの読み込み時にReact DevToolsが接続されます。必要に応じて再読み込みするには、パッケージャーターミナルでrを押します。

​

アプリの検査とデバッグ

React DevToolsには、アプリの検査とデバッグに役立つ2つの主要なインターフェイスが用意されています。

​

コンポーネントの調査

コンポーネントの階層、プロパティ、スタイルを調査するには、[Components] ビューを使用します。

​

パフォーマンスのモニタリング

[Profiler] ビューには、レンダリング指標とコンポーネントのパフォーマンスが表示されます。 このグラフは、Reactのコミットサイクルを示しています。バーを選択すると、特定のサイクルでレンダリングされたコンポーネントを調べることができます。 [Flamegraph] ビューを使用すると、レンダリング時間と階層を調べることができます。 [Ranked] ビューを使用すると、コンポーネントをレンダリング時間順に表示できます。

​

関連トピック

• アプリのKPIを測定
• Charles Proxyによるネットワークトラフィックのモニタリング
• Flashlightによるアクティビティのモニタリング

---