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

Question

如何使用VSCode中引入的并且已启用的Flutter Widget Inspector ？从IDE或终端调试应用程序时，单击iOS模拟器中的任何小部件都不会发生任何反应。我从Google找不到有关VSCode的任何信息。

我在MacOS Sierra上。

Answer 1

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

在调试会话处于活动状态的情况下，打开命令面板并找到DevTools命令。

首次运行此程序时，系统可能会提示您激活或升级。

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

DevTools文档中提供了有关Dart DevTools功能的更多信息。

Answer 2

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