Flutter Inspector如何打开

Flutter Inspector在哪里打开啊？我在Android Studio里没找到这个选项，具体要怎么操作才能启用它？需要安装什么插件吗？

2 回复

在Android Studio中，点击右上角的“Flutter Inspector”按钮即可打开。或在菜单栏选择View > Tool Windows > Flutter Inspector。

更多关于Flutter Inspector如何打开的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，Flutter Inspector 是调试和检查 UI 布局的强大工具，可通过以下方式打开：

1. 在 Android Studio / IntelliJ IDEA 中打开

  • 确保已安装 Flutter 和 Dart 插件。
  • 运行应用至模拟器或真机（调试模式）。
  • 点击顶部菜单栏：View > Tool Windows > Flutter Inspector。
  • 或点击右侧边栏的 Flutter Inspector 图标（类似望远镜的按钮）。

2. 在 VS Code 中打开

  • 安装 Flutter 扩展。
  • 启动调试会话（按 F5 或运行 flutter run）。
  • 通过命令面板：
    • 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）。
    • 输入 “Flutter: Open DevTools” 并选择。
  • 浏览器中将打开 Dart DevTools，点击 “Flutter Inspector” 标签页即可。

3. 通过命令行单独启动

  • 运行应用后，终端会显示提示：
    The Flutter DevTools debugger and profiler is available at: http://127.0.0.1:9100?uri=...
  • 复制此 URL 到浏览器中打开，选择 “Flutter Inspector”。

主要功能

  • 检查 widget 树：查看层级结构和属性。
  • 高亮布局边界：辅助调试渲染问题。
  • 修改属性并实时预览（需热重载支持）。

确保 Flutter 环境配置正确，即可高效使用 Inspector 优化 UI！

回到顶部