VSCode如何使用Dart DevTools在VSCode中调出Flutter的性能分析工具栏

首先需要明确一个关键概念：DevTools 并不能在 VSCode 窗口内直接显示为“工具栏”。

它本质上是一个独立的浏览器页面。我们通常所说的“调出”，其实是触发 VSCode 启动 DevTools 服务，并自动在浏览器中打开对应的分析页面。

为什么点不了“Open DevTools”命令？

遇到“Open DevTools”命令不可用，十有八九是 Flutter SDK 的路径没有被 VSCode 正确识别。

即便你在终端里运行 flutter doctor 一切正常，VSCode 内部可能依然在报“command not found”的错误。

问题通常出在以下几个环节：

• 路径配置必须绝对且明确：检查 VSCode 设置中的 dart.flutterSdkPath 项，必须将其配置为 Flutter SDK 的绝对路径（例如 /Users/yourname/development/flutter）。

  注意，路径结尾不要添加 /bin。

• 重启是关键步骤：安装完 Dart 和 Flutter 插件后，务必完全关闭并重新启动 VSCode。

  仅仅重载当前窗口是远远不够的。

• 先有项目，后有分析：DevTools 命令需要依附于一个正在运行的 Flutter 项目。

  正确的顺序是，先通过 Flutter: Run 命令或按 F5 键启动你的应用，然后再尝试调用 DevTools。

  否则，相关命令会处于灰色不可用状态，或者生成的链接为空。

• 命令消失的排查：如果在命令面板里根本搜不到 Flutter: Open DevTools，那基本可以断定 Flutter 插件没有加载成功。

  这时，运行一下 Flutter: Run Flutter Doctor 命令，查看其输出日志，往往能找到线索。

DevTools 打开后性能分析标签页在哪？

当你成功在浏览器中打开 DevTools 页面后，默认看到的通常是 Inspector，而不是性能分析界面。

Inspector 主要用于查看 Widget 树。要切换到性能分析界面，其实很简单：

• 找到页面顶部的导航栏，点击 Performance 标签页。注意别错点成 Debugger 或 Network。
• 首次进入时，页面可能会提示“Start profiling”，点击它即可开始采集 CPU 使用率、帧率（FPS）以及内存数据。
• 这里有个细节需要注意：Performance 面板的图表是实时的，但前提是你的应用正在运行并且有交互活动。
• 如果看到“Waiting for frames”的提示，别慌，这通常意味着当前没有渲染任务，或者 DevTools 与应用之间的连接暂时中断了。
• 如果想对一段特定操作进行深入分析，可以点击右上角的 Record 按钮（那个圆形图标）。
• 操作完成后再次点击停止，就能获得一段可供回放分析的性能录像。

快捷方式失效时，怎么手动访问 DevTools？

当命令面板失灵，或者状态栏上没有出现 DevTools 的小图标时，我们还可以从调试控制台里“挖”出访问地址。

方法如下：

• 确保你的应用是以调试模式启动的。也就是通过 VSCode 按 F5 启动，而不是单纯在终端里运行 flutter run。
• 打开 VSCode 底部的 Debug Console 面板。注意，不是 Terminal 终端。
• 在输出的日志中，仔细查找这样格式的一行信息：The Flutter DevTools debugger and profiler on Chrome is a vailable at: http://127.0.0.1:9100uri=http://127.0.0.1:51234/xxxxxx
• 复制这整段 URL，然后粘贴到 Chrome 或 Edge 浏览器的地址栏中打开。
• 需要提醒的是，Safari 浏览器可能不支持 DevTools 的部分功能。
• 这个链接包含了临时的身份验证令牌，一旦你关闭了当前的调试会话，它就会失效。
• 每次重新按 F5 启动应用，都会生成一个全新的地址。

最后一个容易忽略的关键点

DevTools 的 Performance 面板高度依赖应用处于活跃的渲染状态。

如果你打开后只看到一片空白的图表，或者“no frames recorded”的提示，先别急着怀疑自己的配置出了问题。

不妨回到模拟器或真机上，滑动几下列表，多点几个按钮，让 Flutter 引擎真正地“动”起来。

一旦数据流开始传输，分析面板上的图表自然就会活跃起来。

《夸克》非常好用的免费AI浏览器

下载APP查看