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

Question

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

我在 MacOS Sierra 上。

Answer 1

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

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

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

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

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

Answer 2

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