跳到主内容

从 VS Code 运行 DevTools

了解如何从 VS Code 启动和使用 DevTools。

添加 VS Code 扩展

#

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

启动要调试的应用程序

#

在 VS Code 中打开项目的根文件夹(包含 pubspec.yaml 的文件夹),然后点击 运行 > 启动调试 (F5),即可启动应用程序的调试会话。

启动 DevTools

#

一旦调试会话处于活动状态且应用程序已启动,打开 DevTools (Open 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 设置的完整列表可在 dartcode.orgVS Code 设置编辑器中查看。关于 VS Code 中 Dart/Flutter 的一些推荐设置,也可以在 dartcode.org 上找到。

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

Screenshot showing DevTools in the VS Code language status area