如何在 Visual Studio 代码中使用 Flutter 的 Widget Inspector?

How to use Flutter's Widget Inspector in Visual Studio Code?

Flutter Widget Inspector 的使用方法introduced in VSCode and now enabled? When I debug the app from the IDE or Terminal, nothing happens when I click on any widget in the iOS simulator. I could not find any info on VSCode from Google.

我使用的是 MacOS Sierra。

调试时,运行命令Flutter: Inspect Widget,然后点击UI/Widget,它会自动引导你到生成小部件。它只能在调试模式下工作,并且在应用程序以调试模式加载之前,该命令不可用。

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

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

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

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

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

更新方法:

从 Dart Code(VS 代码扩展)版本 2.24.0 开始,'Flutter: Inspect Widget' 命令已被 DevTools 取代。 (在撰写本文时,最新版本是 3.36.0。要从命令面板使用 >Flutter: Open DevTools 或 >Dart: Open DevTools 访问 Inspect Widget,需要几个步骤。

这里有一个更快的方法:

  Click the debug (bug) button from the side menu and Select Run and Debug or press f5

小部件检查器将自动打开。

模拟器使用 Flutter Widget 检查器的屏幕截图