Debug your app in Project IDX

Project IDX offers a few different ways to debug your app, directly from your workspace. Web and Flutter apps offer Lighthouse and Chrome DevTools in the Chrome web preview in your workspace. Flutter apps offer iOS, Android, and web previews to spot-check and test your app while you code. The built-in Debug Console supports automatic debugging for most common languages, and custom debugging you can define in a launch.json file in your workspace.

Preview your app

IDX includes in-workspace app previews for web apps (Chrome and mobile Safari) and Flutter apps (iOS, Android, Chrome). The Android and Chrome previews support hot reload and hot refresh, and offer full emulator capabilities. The Safari and iOS simulators offer visual and interactive previews on a variety of iOS devices and simulate the iOS experience for mobile and web apps.

To learn more about IDX previews, see Preview your app.

Use Chrome DevTools for web previews (experimental)

Chrome DevTools help you diagnose issues in your app directly from the web preview. You can access Chrome DevTools in the IDX web preview panel the same way you would open DevTools from your Chrome browser. Minimized DevTools panel in the IDX web preview

This feature is experimental as we work through creating an ideal user experience. Send us feedback to help us build it better.

  1. Add Chrome DevTools to your IDX workspace:

    1. Open the Settings window by clicking the gear icon or pressing Ctrl + , (on Windows/Linux/ChromeOS) or Cmd + , (on MacOS).
    2. Find the IDX: Web Dev Tools setting and select Enable Chrome DevTools for web preview (browser reload required). If you use a settings.json file, you can also set "IDX.webDevTools": true.
    3. Refresh your browser window and reload your IDX workspace.

  2. Open the web preview in Project IDX: Open the command palette (Cmd+Shift+P on Mac or Ctrl+Shift+P on ChromeOS, Windows, or Linux) and select Project IDX: Show Web Preview.

  3. The DevTools panel is minimized within the web preview panel. Click the DevTools bar to expand the panel and use DevTools inside the web preview panel.

Use the DevTools panel in the IDX web preview the same way you would to debug your app in the Chrome browser.

Run Lighthouse for web previews

Lighthouse audits your app based on the specific audit categories you select, and returns a report with findings and suggestions. You can run Lighthouse reports directly from the web preview in Project IDX.

  1. Open the web preview in Project IDX: Open the command palette (Cmd+Shift+P on Mac or Ctrl+Shift+P on ChromeOS, Windows, or Linux) and select Project IDX: Show Web Preview.

  2. Click the performance check icon from the web preview toolbar. image of a speed check icon

  3. image of the lighthouse panel in idx In the Lighthouse panel, select the audit categories you want. You can choose from reports auditing performance, accessibility, conformance with best practices, SEO, and Progressive Web App performance. Click Analyze page to generate the reports.

    The reports might take a few minutes to generate.

  4. Once the reports appear in the Lighthouse panel, you can review the findings for each audit category, or switch between audit categories by clicking the score and category name.

Use the Debug Console

Project IDX includes the built-in Debug Console from Code OSS. Use this console to debug your app with out-of-the-box debuggers for most common programming languages, or add a debugging extension from the VSCode Marketplace.

If you want to write custom debugging, add a launch.json file to your workspace.