Vega Studioを使用したウェブアプリのデバッグ

Vega Studioは、Vegaアプリ向けの統合開発環境（IDE）です。Chrome DevTools（CDT）と統合され、WebViewアプリをアタッチしてデバッグできます。CDTを使用することで、通常のウェブアプリと同様に、レンダリングされたHTMLコンテンツを検査したり、JavaScriptにブレークポイントを設定してデバッグしたりできます。

Vega Studioを使用してCDTデバッグセッションをセットアップするには、以下のガイドを参考にしてください。

前提条件

1. Visual Studio Code（英語のみ）をインストールします。
2. Vega Studio拡張機能（0.21以降）をインストールします。

Vegaウェブアプリをデバッグする手順

1. Vega Studioでアプリを開きます。
2. デバッグバリアントをビルドして起動します。
3. 次の2つの方法のいずれかでアプリを起動します。
   1. コマンドラインから起動します。

   2. Vega Studioサイドバーの [Play] ボタンをクリックします。

      注： Chrome DevToolsでデバッグするには、ターゲットアプリをデバッグ構成でビルドしてください。
4. Vega StudioからChrome DevToolsを起動します。

5. Vega Studioのサイドバーを開き、[Chrome DevTools] をクリックします。

6. ターゲットランタイムを選択するコンボボックスが表示されます。WebViewで実行されているHTML + JavaScriptコンテンツをデバッグするには、[WebView] を選択します。

7. Chrome DevToolsがエディターに表示され、WebViewランタイムにアタッチされます。HTMLとJavaScriptのソースコードを検査したり、JavaScriptコードにブレークポイントを設定したりできます。

関連トピック

• Chrome DevToolsの詳細については、Chrome DevToolsを使用したアプリのプロファイリングを参照してください。
• Vegaウェブアプリの概要

---

Last updated: 2026年4月23日