DevTools是Dart和Flutter的一套性能和调试工具。Flutter DevTools和Dart DevTools指的是同一组工具。
在 VS Code 中打开 Flutter 的 DevTools 分析工具,可以通过以下几种方式操作:
前提条件
已经安装了 Flutter 和 Dart 扩展。可以在 VS Code 的扩展商店中搜索并安装这两个扩展。
已经创建了一个 Flutter 项目,并且项目能够正常运行。
1. 启动 Flutter 应用程序
首先,需要启动一个 Flutter 应用程序。可以通过以下两种常见方式启动:
- 使用命令面板:
- 打开 VS Code 的命令面板(快捷键:
Ctrl + Shift + P
或Cmd + Shift + P
)。 - 输入
Flutter: Run
并选择该命令。 - 选择要运行的设备(如模拟器、真机等),VS Code 会自动编译并运行 Flutter 应用。
- 打开 VS Code 的命令面板(快捷键:
- 使用运行按钮:
- 在 VS Code 的底部状态栏中,点击“运行”按钮(绿色三角形图标)。
- 选择要运行的设备,应用程序将开始运行。
2. 在 VS Code 中打开 Flutter 的分析工具 DevTools 可以按照以下步骤进行:
当 Flutter 应用程序成功运行后,可以通过以下几种方式打开 DevTools:
方式一:使用命令面板
- 打开 VS Code 的命令面板(
Ctrl + Shift + P
或Cmd + Shift + P
)。 - 输入
Flutter: Open DevTools
并选择该命令。VS Code 会自动在浏览器中打开 DevTools。
方式二:通过调试控制台
- 在 VS Code 的调试控制台中,会有一些与 Flutter 应用相关的输出信息。在输出信息中,会有一个 DevTools 的链接,类似于
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:51234/xxxxxx
。 - 点击这个链接,浏览器会自动打开 DevTools。
方式三:使用快捷菜单
- 在运行 Flutter 应用时,在 VS Code 的底部状态栏中,会出现一个 Flutter 相关的状态区域。
- 点击该区域中的“DevTools”图标,即可在浏览器中打开 DevTools。
方法四:通过侧边栏图标
- 确保已安装 Flutter 和 Dart 插件。
- 打开 VS Code,左侧边栏会显示 Flutter 图标(类似一只蓝色的飞蛾 🐛)。
- 点击该图标,下拉菜单中选择 Open DevTools。
常见问题
-
找不到侧边栏图标?
• 确保已安装 Flutter 和 Dart 插件,重启 VS Code。
• 可能被其他插件覆盖,尝试手动隐藏/显示侧边栏(View: Toggle Side Bar
)。 -
无法通过命令打开?
• 检查flutter doctor
是否提示环境配置错误。
• 确保项目路径没有空格或特殊字符。 -
需要性能分析?
• 在 DevTools 中点击 Performance 标签页即可进行 CPU/内存分析。
还可以从语言状态区域(状态栏中Dart旁边的{}图标)查看DevTools是否正在运行,并在浏览器中启动它。