如何在 Visual Studio Code 中使用 Flutter 的 Widget Inspector？

Posted 2023-02-23

【中文标题】如何在 Visual Studio Code 中使用 Flutter 的 Widget Inspector？

【英文标题】：How to use Flutter's Widget Inspector in Visual Studio Code?

【发布时间】：2019-04-22 05:17:21

【问题描述】：

你如何在 VSCode 和现在的 enabled 中使用 Flutter Widget Inspector introduced？当我从 IDE 或终端调试应用程序时，当我单击 ios 模拟器中的任何小部件时没有任何反应。我在Google 找不到任何关于 VSCode 的信息。

我在 MacOS Sierra 上。

【参考方案1】：

从 v2.24 开始，VS Code 的 Dart 扩展已与 Dart DevTools 集成。这比 stt106 提到的原始 Inspect Widget 命令具有更好的检查器功能。

激活调试会话后，打开命令面板并找到 DevTools 命令。

第一次运行时，系统可能会提示您激活或升级。

DevTools 随后将在您的浏览器中启动并连接到您的调试会话。

关于 Dart 的 DevTools in the DevTools docs 的功能的更多信息。

【参考方案2】：

调试时，运行命令Flutter: Inspect Widget，然后点击UI/Widget，它会自动引导你到生成widget的代码。它仅在调试模式下工作，并且在调试加载应用程序之前该命令不可用。

【讨论】：

谢谢 - 我的问题是从终端调试并认为 VSCode 可以自动附加，但似乎并非如此。它必须在 IDE 中进行调试。

是的，目前它似乎仅在您从 IDE 调试时才有效。也许这就是 Dart/Flutter 插件将来可以改进的地方。

不幸的是，这个命令只能在 VS Code 连接到调试器时运行。这意味着您要么需要从 VS Code 启动它，要么使用 Debug: Attach to Flutter Process 命令。一般来说，我建议总是从 VS Code 而不是终端进行调试，因为如果你不这样做，你会错过其他功能（比如 hot-reload-on-save）:-)