如何在 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 检查器的屏幕截图
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 检查器的屏幕截图