ファイル、クラッシュレポート、ログの管理

Visual Studio Code（VS Code）の拡張機能であるVega Studioは、デバイスファイル、クラッシュレポート、ログの包括的な管理を提供することにより、アプリのデバッグ機能を強化します。Vega Studioを使用すると、アプリの動作の監視、クラッシュの調査、システムログの分析を一元的に行うことができます。これらのデバッグ機能は、問題を特定し、開発中のアプリの動作を確認するのに役立ちます。

前提条件

開始する前に、次の手順を実行してください。

VS Codeでアプリプロジェクトを開きます。
USBまたはネットワーク経由でデバイスを接続します。
- 手順については、Vega仮想デバイスまたはFire TV Stickでのアプリの実行を参照してください。
デバイスがVega Studioのデバイスリストに表示されます。
- 基本機能と詳細設定オプションについては、Vega Studioのセットアップと使用方法を参照してください。

クラッシュレポートの管理

クラッシュレポートを管理するには、[エクスプローラー] サイドバーの [Device Files] ビューを使用します。このビューは、接続されたデバイスからのクラッシュレポートを自動的に検出して表示します。

接続されたデバイスとクラッシュレポートがツリー構造で一覧表示された [Device Files] ビューを示すVS Codeの [Explorer] サイドバーのスクリーンショット — [Device Files] ビュー

クラッシュレポートを開いてシンボリケート

一覧から該当する項目をクリックして、クラッシュレポートを開きます。
右クリックして [Symbolicate ACR] を選択すると、クラッシュレポートが読みやすい形式に変換されます。
- 詳細については、Vega Studioを使用してアプリのクラッシュをデバッグする方法を参照してください。

[Symbolicate ACR] オプションが強調表示された [Device Files] ビューの右クリックコンテキストメニューのスクリーンショット — ACR コンテキストメニューのシンボリケート

クラッシュレポートのフィルタリング

[Crash Reports] の横にあるファネルアイコンをクリックすると、[Filter Crash Reports] ユーザーインターフェイスが表示されます。

クラッシュレポートの見出しの横にファネルフィルターアイコンが強調表示されているクラッシュレポートリストのスクリーンショット — クラッシュレポートフィルターアイコン

名前または正規表現を使用してフィルタリングできます。

名前、日付範囲、正規表現のフィルタリングオプションのフィールドがある [Filter Crash Reports] ダイアログボックスのスクリーンショット — クラッシュレポートのフィルタリング

自動クラッシュ検出の構成

Vega Studioは新しいクラッシュレポートを自動的に検出し、通知を表示します。この動作はカスタマイズできます。

クラッシュレポートを表示または終了するオプションを含む自動クラッシュ検出通知ポップアップのスクリーンショット — 自動クラッシュ検出の通知

通知を無効にしたり、フィルターを設定したりするには、Vega Studioの拡張機能設定（[Kepler] > [Features] > [Acr Notifications]）に移動します。

Kepler拡張ACR通知設定オプションを示すVS Code設定ページのスクリーンショット — ACR通知の設定

ライブログの表示

アクティブな開発中のリアルタイムデバッグには、ライブログストリーミングを使用してください。VS Codeステータスバーの [Show Logs] ボタンを使用することをお勧めします。

VS Codeでアプリを実行します。
ステータスバーの [Show Logs] をクリックします。
ステータスバーの [Show Logs] ボタン
使用するデバイス Vega仮想デバイスまたはFire TV Stickから選択します。 Fire TV Stickを使用する場合は、USB経由で接続します。複数のプロジェクトがある場合、プロンプトが表示された時に対象のプロジェクトを選択します。アプリの実行中、ログは [App Logs] チャネルにストリーミングされます。アイドル状態のアプリの場合は、[出力] チャネルを確認してください。
[App Logs] 出力チャネル
ステータスバーの [Stop Logs] をクリックしてストリーミングを終了します。
[Stop Logs] ボタン

ログストリーミング設定の構成

ログのファシリティ、形式、レベルなどのログストリーミングの動作は、Vega Studio拡張機能の設定で調整できます。変更を有効にするには、ログストリーミングを停止して再起動する必要があります。詳細な設定については、システムログの管理を参照してください。

ファシリティ、フォーマット、レベルのオプションを含むKepler拡張デバイスログ構成を示すVS Code設定のスクリーンショット — デバイスログの設定

デバイスログのコピー

ログをコピーして履歴データを分析したり、チームメンバーとログを共有したり、問題を調査したりできます。次のいずれかのオプションを使用してください。 オプション1：[Device Files] ビュー（推奨） [Device Files] ビューでデバイスを右クリックし、[Copy logs] を選択します。システムはログを<プロジェクトディレクトリ>/logs/<デバイス名>/<ログの種類>/var_log/に保存します。

[Copy logs] オプションが強調表示された、[Device Files] ビューで右クリックしたときのコンテキストメニューのスクリーンショット — [Copy logs] コンテキストメニュー

オプション2：コマンドパレット

VS Codeのアクティビティバーで、Vega拡張機能のアイコンをクリックします。
[Devices] セクションに移動してデバイスを選択するか、コマンドパレットに「Vega Device Management: copy logs from device」と入力します。
コピーするログをリストから選択します。
ログの収集
[出力] チャネルで完了ステータスとファイルパスを確認します。
ログコピー完了ステータス

コンソールログの表示

React Nativeのデバッグにコンソールログを使用すると、console.log()のステートメントをリアルタイムで表示できます。これらのログは、VS Codeの [出力] ウィンドウの [React Native] チャネルに表示されます。

Shift + Cmd + P（Mac）またはShift + Ctrl + P（Linux）を押して、コマンドパレットを開きます。
「Output: Show Output Channels…」と入力します。
[React Native] を選択すると、アプリのコンソールログが表示されます。

アプリを実行すると、console.logのすべてのステートメントがこのチャネルにリアルタイムで表示されます。

Vegaアプリの開発

ファイル、クラッシュレポート、ログの管理

前提条件