Project IDX 提供數種直接從工作區對應用程式偵錯的方法。在工作區中，Web 和 Flutter 應用程式可透過 Chrome 網頁預覽功能提供 Lighthouse 和 Chrome 開發人員工具。Flutter 應用程式提供 iOS、Android 和網頁預覽功能，可在您編寫程式碼的同時，檢查及測試應用程式。內建的偵錯主控台支援大多數常見語言的自動偵錯功能，以及您可以在工作區的 launch.json 檔案中定義的自訂偵錯功能。
預覽應用程式
IDX 提供網頁應用程式 (Chrome 和行動版 Safari) 和 Flutter 應用程式 (iOS、Android、Chrome) 的工作區內應用程式預覽。Android 和 Chrome 預覽支援熱重新載入和熱重新整理，並提供完整的模擬器功能。Safari 和 iOS 模擬器可在各種 iOS 裝置上提供視覺化和互動式預覽，並模擬適用於行動和網頁應用程式的 iOS 體驗。
如要進一步瞭解 IDX 預覽功能，請參閱「預覽應用程式」一文。
使用 Chrome 開發人員工具進行網頁預覽 (實驗功能)
Chrome 開發人員工具可讓您直接透過網頁預覽診斷應用程式中的問題。您可以像在 Chrome 瀏覽器開啟開發人員工具一樣，在 IDX 網頁預覽面板中存取 Chrome 開發人員工具。
在我們努力打造理想使用者體驗的期間， 這項功能仍在實驗階段。歡迎提供意見，協助我們打造更完善的服務。
將 Chrome 開發人員工具新增至 IDX 工作區：
- 按一下齒輪圖示或按下 Ctrl + , (Windows/Linux/ChromeOS) 或 Cmd + , (MacOS)，開啟「Settings」(設定) 視窗。
- 找到「IDX: Web Dev Tools」設定，然後選取「Enable Chrome DevTools for web preview (需要瀏覽器重新載入)」。如果您使用
settings.json檔案，也可以設定"IDX.webDevTools": true。 - 重新整理瀏覽器視窗，然後重新載入 IDX 工作區。
在 Project IDX 中開啟網頁預覽：開啟指令區塊面板 (在 Mac 上為 Cmd+Shift+P 鍵；ChromeOS、Windows 或 Linux 使用者請按 Ctrl+Shift+P)，然後選取「Project IDX: Show Web Preview」。
「開發人員工具」面板會在網頁預覽面板中最小化。請按一下開發人員工具列展開面板，並在網頁預覽面板中使用開發人員工具。
在 IDX 網頁預覽中使用開發人員工具面板，方法與在 Chrome 瀏覽器中對應用程式進行偵錯的方式相同。
執行 Lighthouse 網頁預覽
Lighthouse 會根據您選取的特定稽核類別稽核應用程式，然後回傳含有發現項目和建議的報表。您可以直接在專案 IDX 中的網頁預覽執行 Lighthouse 報表。
在 Project IDX 中開啟網頁預覽：開啟指令區塊面板 (在 Mac 上為 Cmd+Shift+P 鍵；ChromeOS、Windows 或 Linux 使用者請按 Ctrl+Shift+P)，然後選取「Project IDX: Show Web Preview」。
按一下網頁預覽工具列中的成效檢查圖示。
在 Lighthouse 面板中，選取所需的稽核類別。包括稽核的效能、無障礙功能、遵循最佳做法、搜尋引擎最佳化和漸進式網頁應用程式效能的報表。按一下「Analyze page」(分析頁面) 即可產生報表。系統可能需要幾分鐘的時間產生報表。
報表顯示在 Lighthouse 面板中後，您可以查看每個稽核類別的發現項目，或點選分數和類別名稱切換稽核類別。
使用偵錯控制台
Project IDX 包含 Code OSS 內建的偵錯控制台。請使用這個主控台立即可用的偵錯工具 (適用於大多數常用的程式設計語言) 來對應用程式進行偵錯，或從 VSCode Marketplace 新增偵錯擴充功能。
如要編寫自訂偵錯，請將 launch.json 檔案新增至工作區。