Project IDX 提供了几种直接从工作区调试应用的不同方法。Web 应用和 Flutter 应用在您的工作区的 Chrome 网页预览中提供 Lighthouse 和 Chrome 开发者工具。Flutter 应用提供 iOS、Android 和 Web 预览版,可让您在编写代码时抽查和测试您的应用。内置的调试控制台支持对大多数常用语言进行自动调试,还支持在工作区的 launch.json
文件中定义自定义调试。
预览应用
IDX 包含适用于 Web 应用(Chrome 和移动 Safari)和 Flutter 应用(iOS、Android、Chrome)的工作区内应用预览。Android 和 Chrome 预览版支持热重载和热刷新,并提供完整的模拟器功能。Safari 和 iOS 模拟器可在各种 iOS 设备上提供直观的互动式预览,并模拟移动应用和 Web 应用的 iOS 体验。
如需详细了解 IDX 预览,请参阅预览应用。
使用 Chrome 开发者工具进行网页预览(实验性)
Chrome 开发者工具可帮助您直接通过网页预览诊断应用中的问题。您可以像从 Chrome 浏览器打开开发者工具一样,在 IDX 网页预览面板中访问 Chrome DevTools。
此功能处于实验阶段,我们正在努力打造理想的用户体验。请向我们发送反馈,帮助我们改进服务。
将 Chrome 开发者工具添加到您的 IDX 工作区:
- 点击齿轮图标、Ctrl + ,(在 Windows/Linux/ChromeOS 上)或 Cmd + ,(在 MacOS 上),打开设置窗口。
- 找到 IDX:Web 开发者工具设置,然后选择为网页预览启用 Chrome 开发者工具(需要重新加载浏览器)。如果您使用
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 会根据您选择的特定审核类别审核您的应用,并返回包含发现结果和建议的报告。您可以直接通过 Project IDX 中的网页预览来运行 Lighthouse 报告。
在 Project IDX 中打开网页预览:打开命令面板(在 Mac 上按 Cmd+Shift+P,或在 ChromeOS、Windows 或 Linux 上按 Ctrl+Shift+P),然后选择 Project IDX: Show Web Preview。
点击网页预览工具栏中的效果检查图标。
在“Lighthouse”面板中,选择所需的审核类别。您可以从评估性能、无障碍功能、是否符合最佳做法、搜索引擎优化 (SEO) 和渐进式 Web 应用性能的报告中进行选择。点击分析页面以生成报告。
报告可能需要几分钟时间才能生成。
报告显示在 Lighthouse 面板中后,您可以查看每个审核类别的发现结果,也可以通过点击得分和类别名称在审核类别之间切换。
使用调试控制台
Project IDX 包含 Code OSS 的内置调试控制台。使用此控制台使用开箱即用的调试程序调试您的应用(适用于大多数常用编程语言),或者添加来自 VSCode Marketplace 的调试扩展程序。
如果要编写自定义调试代码,请将 launch.json
文件添加到工作区。