从 VS Code 安装并运行 DevTools

安装 VS Code 扩展

要从 VS Code 使用 DevTools,你需要 Dart 扩展。如果你正在调试 Flutter 应用程序,你应该还安装 Flutter 扩展

启动应用程序进行调试

通过在 VS Code 中打开项目的根文件夹(包含 pubspec.yaml 的文件夹)并单击运行 > 开始调试 (F5) 来为你的应用程序启动调试会话。

启动 DevTools

一旦调试会话处于活动状态且应用程序已启动,打开 DevTools 命令就会在 VS Code 命令面板 (F1) 中可用。

Screenshot showing Open DevTools commands

所选工具将在 VS Code 中嵌入式打开。

Screenshot showing DevTools embedded in VS Code

你可以选择使用 dart.embedDevTools 设置始终在浏览器中打开 DevTools,并使用 dart.devToolsLocation 设置控制它作为完整窗口打开还是在你当前编辑器旁边的新列中打开。

完整的 Dart/Flutter 设置列表 在此处 或在 VS Code 设置编辑器 中可用。可以在 此处 找到 VS Code 中 Dart/Flutter 的一些推荐设置。

你还可以查看 DevTools 是否正在运行,并从语言状态区域(状态栏中 Dart 旁边的 {} 图标)在浏览器中启动它。

Screenshot showing DevTools in the VS Code language status area