使用Flutter inspector

注意: inspector 可以在 Flutter mobile 和 web 程序中工作.

它是什么?

Flutter小部件检查器是可视化和探索Flutter小部件树的强大工具。Flutter 框架使用组件作为 核心构建模块 ,从控件 (例如text, buttons, 和 toggles), 到布局 (如居中, padding, rows, 和 columns). inspector帮助你可视化并且浏览Flutter 组件树, 有如下作用:

• 理解现有布局
• 诊断布局问题

 

开始

调试布局问题, 以 debug 模式 运行app并且通过点击DevTools 工具栏上的Flutter inspector打开inspector .

 注意: 你可以直接在 Android Studio/IntelliJ,中使用 Flutter inspector, 但在浏览器中访问界面更宽敞. 还要注意，检查器的UI在这些环境之间略有不同。此页描述检查器DevTools版本的UI。

 

可视化调试布局问题

以下是检查器工具栏中可用功能的指南。当空间有限时，会只显示一个图标。

 

选择组件模式

 

打开该按钮，可以选择一个组件，并进行 inspect.更多信息，查看 Inspecting a widget.

 

刷新组件树

 

重新加载组件信息.

 

性能面板

 

切换切换GPU和CPU线程的性能图显示. 更多关于这些图表的信息，查看 The performance overlay in Flutter performance profiling.

 

iOS 

 

切换Android和ios渲染和手势行为.

 

Debug Paint 

 

为borders, padding, alignment, and spacers.添加可视化提示

绘制 Baselines 

 

使每个RenderBox在其每个文本基线上绘制一行。

 

减慢 Animations 

 

减慢动画，以便于可视化调试

 

Repaint Rainbow 

 

重新绘制时显示转换颜色.

 

Debug Mode Banner 

 

切换右上角debug标记的显示

 

Inspecting 一个组件

你可以浏览组件树，查看附近的组件和他们的值。

要在组件树中定位各个UI元素, 点击toolbar 中的Select Widget Mode 按钮 . 这切换到组件选择模式. 点击app上任何的仍和组件; 会滚动到组件树中该元素对应的该节点.

当调试 layout 问题, 主要看 size 和 constraints .约束沿着树向下流动，而大小则向上流动。

Flutter Layout Explorer

 注意：此功能仅在alpha版本的 DevTools written in Flutter 中可用.

Flutter Layout Explorer 帮助你更好的理解 Flutter 布局.目前， Layout Explorer 只支持探测 flex 布局, 将来可能会扩展其他类型的布局.

使用 Layout Explorer

在Flutter Inspector中, 选择一个flex 组件 (例如, Row, Column, Flex, 等.) 或者 flex 组件的直接子元素. 如果你在使用 Flutter 1.12.16 及以后版本, 你会看到有一个 “Layout Explorer” tab . 选择该tab,会展示 Layout Explorer 功能.

 

Layout Explorer 可视化了 Flex 组件和他们的子元素布局方式. explorer 标识了主轴和纵轴, 还有对齐方式 (如 start, end, spaceBetween, 等.). 他显示了flex 和布局容器的细节.

此外，资源管理器还显示布局约束冲突和呈现溢出错误。违反的布局约束被染成红色，溢出错误以标准的“黄带”模式显示，正如您在运行的设备上看到的那样. 这些可视化的目的是提高对溢出错误发生的原因以及如何修复它们的理解。

 

(图片太大，超出限制，自己复制地址到浏览器看)

https://flutter.dev/assets/tools/devtools/layout_explorer_errors_and_device-3d9dca72160d0b110d30a3229b391a5448c690fb1616abdb9bb0c0a442ecc2e4.gif

在layout exporler 上点击组件会映射到设备 inspector. 这需要打开“Select Widget Mode” . 点击下面按钮

 

对于某些特性（如flex factor和alignment），可以通过explorer中的下拉列表修改该值。 您将看到新值不仅反映在Layout explorer 中，还反映在运行Flutter应用程序的设备上。 explorer 动画属性修改以及表现很清晰. 这些修改不会更改源代码，并在热重新加载时还原。

交互属性

Layout Explorer 支持修改 mainAxisAlignment, crossAxisAlignment, 和FlexParentData.flex. 将来, 我们可能会支持其他属性如 mainAxisSize, textDirection, 和 FlexParentData.fit.

mainAxisAlignment

(图片太大，超出限制，自己复制地址到浏览器看)

https://flutter.dev/assets/tools/devtools/layout_explorer_main_axis_alignment-f7a5366e773f3754bfcd44b7928f766e0657b8862e40579b8930d6a869fb634f.gif

 

支持值:

• MainAxisAlignment.start
• MainAxisAlignment.end
• MainAxisAlignment.center
• MainAxisAlignment.spaceBetween
• MainAxisAlignment.spaceAround
• MainAxisAlignment.spaceEvenly

crossAxisAlignment

 

(图片太大，超出限制，自己复制地址到浏览器看)

https://flutter.dev/assets/tools/devtools/layout_explorer_cross_axis_alignment-5353ac29ab6334eb369ff45fd9bb947c91193ec5db783646e77dd13991c99541.gif

支持值:

• CrossAxisAlignment.start
• CrossAxisAlignment.center
• CrossAxisAlignment.end
• CrossAxisAlignment.stretch

FlexParentData.flex

(图片太大，超出限制，自己复制地址到浏览器看)

https://flutter.dev/assets/tools/devtools/layout_explorer_flex-47d63723387e6cd33b37de6626339e9d3f2de7820d92144b4a5eba2cea08b335.gif

 

Layout Explorer 支持 7 flex 选项 (null, 0, 1, 2, 3, 4, 5), flex小部件子部件的flex因子可以是任何整数

跟踪小部件

Flutter inspector的部分功能是用来检测程序代码的，如果没有它，widget树中的节点树会更深，,而且更难理解运行时组件层次结构如何与应用程序的UI对应的。

从IDE启动应用程序时，默认情况下会执行源检测。对于命令行启动，您需要选择使用源指令插入。为此，请使用--track-widget-creation 标志运行应用程序：

 

flutter run --track-widget-creation

如果在没有标记的情况下启动，您仍然可以使用检查器，你会看到一条使用source instrumentation flag的提示信息.

以下是启用和不启用跟踪小部件创建时小部件树的外观示例。

 

启用Track widget creation (推荐):

 

不启用Track widget creation (不推荐):