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

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

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

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

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

前提条件

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

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

React DevToolsのセットアップ

React DevToolsをグローバルにインストールします。
クリップボードにコピーしました。
```
 npm install -g react-devtools@6.0.1
```
接続をアクティブ化するために必要なポートを転送します。

React DevToolsはポート8097経由で接続しますが、React Nativeパッケージャーはポート8081を使用します。

クリップボードにコピーしました。
```
kepler device start-port-forwarding -p 8097 -f false -d <<デバイスのシリアル番号>>
kepler device start-port-forwarding -p 8081 -f false -d <<デバイスのシリアル番号>>
```
Vega仮想デバイスのテストでは、<<デバイスのシリアル番号>>にVirtualDeviceを指定します。
React DevToolsを起動します。
クリップボードにコピーしました。
```
 npx react-devtools
```
プロジェクトディレクトリでReact Nativeパッケージャーを起動します。
クリップボードにコピーしました。
```
 npm start
```
アプリのデバッグバージョンを実行します。

クリップボードにコピーしました。
```
 kepler run-kepler <<デバッグVPKGのパス>> <<対話型コンポーネントのID>>
```
アプリの読み込み時にReact DevToolsが接続されます。必要に応じて再読み込みするには、パッケージャーターミナルでrを押します。