Vega Studio, an innovative extension for Visual Studio Code (VS Code), revolutionizes app debugging by providing unparalleled management of device files, crash reports, and logs. By streamlining these essential tools into a centralized location, Vega Studio empowers developers to monitor app behavior, investigate crashes, and analyze system logs with ease.

Prerequisites

Before you begin your swift app development journey with Vega Studio, complete the following steps:

  • Open your app project in VS Code.
  • Connect your device through USB or network. For instructions on setting up a Vega Virtual Device or Fire TV Stick, refer to our comprehensive guide.
  • Your device will appear in Vega Studio's device list.

Manage Crash Reports

To manage crash reports with Vega Studio, navigate to the Device Files view in the Explorer sidebar. This intuitive interface automatically detects and displays crash reports from your connected devices. By opening and symbolizing these reports, you can gain valuable insights into app behavior and identify potential issues early on.

Filter Crash Reports

To refine your crash report analysis, use the filter icon next to Crash Reports to access the Filter Crash Reports user interface. This feature allows you to filter by name or using regular expressions, streamlining your debugging process.

Configure Automatic Crash Detection

Vega Studio's automatic crash detection feature keeps you informed of new crash reports and provides notifications. To customize this behavior, navigate to Vega Studio extension settings (Vega > Features > Acr Notifications) and adjust the settings to suit your needs.

View Live Logs

For real-time debugging during active development, use live log streaming with Vega Studio. Simply click the Show Logs button in the VS Code status bar, select your device, and choose the target project when prompted. Logs will stream to the App Logs channel while your app runs, allowing you to monitor performance in real-time.

Configure Log Streaming Settings

To customize log streaming behavior, adjust settings in Vega Studio extension settings, including log facilities, format, and level. Note that changes will only take effect after stopping and restarting log streaming.

Copy Device Logs

To analyze historical data, share logs with team members, or investigate issues, use one of the following options:

  • Option 1: Device Files view (Recommended) - Right-click your device in the Device Files view and select Copy logs.
  • Option 2: Command palette - Click the Vega extension icon in the VS Code activity bar, navigate to the Devices section, and choose your device. Then, enter Vega Device Management: copy logs from device in the command palette.

View Console Logs

For React Native debugging, use console logs to view real-time output of your console.log() statements in the Output window under the React Native channel. To access this feature, open the Command Palette by pressing Shift + Cmd + P (Mac) or Shift + Ctrl + P (Linux), then enter Output: Show Output Channels….

Related Topics

  • Use Loggingctl to Manage System Logs
  • Debug App Crash Using Vega Studio
  • Measure App KPIs
  • Identify UI Rendering Issues
  • Detect Overdraw
  • Investigate Component Re-rendering Issues