Debugging Web Apps with Vega Studio

Vega Studio is the integrated development environment (IDE) for Vega Apps. It integrates with Chrome DevTools (CDT) to attach and debug WebView apps. With CDT, you can inspect rendered HTML content and debug JavaScript by setting a break point, like an ordinary web app. Use the following guide to set up a CDT debugging session using Vega Studio.

Prerequisites

Install Visual Studio Code.
Install Vega Studio extension (0.21 or later)

Steps to debug your Vega Web App

Open your app with Vega Studio.
Build a debug variant and launch it.
Launch your app one of these two ways.
1. Launch from command line.
2. Tap the Play button on the Vega Studio side bar.
Launch Chrome DevTools from Vega Studio
1. Open the Vega Studio side bar and click “Chrome DevTools.”
2. Notice the combo box to select the target runtime. Select WebView to debug HTML + JavaScript content running on WebView.
3. Chrome DevTools appears in the editor and attaches to the WebView runtime. You can inspect HTML and JavaScript source code, as well as set breakpoints in the JavaScript code.

For more about Chrome DevTools, see Use Chrome DevTools for App Profiling
Overview of Vega Web Apps

​Prerequisites

​Steps to debug your Vega Web App

​Related topics

Prerequisites

Steps to debug your Vega Web App

Related topics