前言

被石老板喷的有点久（Flutter系列水文📒一直没更新），这次接上一篇文章接着水一把…

很多从前端转Flutter的同学都会有个疑问：Flutter有没有类似Chrome Inspector的东西？？？

答案是：有！很相似但也不完全一样！

本期就给大家介绍笔者认为最好用的 —— DevTools

要原因如下 🚀 ：

• DevTools本身是Flutter官方推荐的一个调试工具。

• DevTools是用Flutter编写的，极具特色 🖼 。

• 非常全面的调试功能，可以满足大小、方面不同的优化需求 ⚙️。

DevTools

先来一段官网的介绍：

  DevTools is a suite of performance and debugging tools for Dart and Flutter. It’s currently in beta release but is under active development.

大白话：DevTools是Dart和Flutter的一套性能和调试工具。它目前处于测试版，但正在积极开发中。

安装

由于每位同学用的开发工具会有差别，本篇水文就前端主流之一VS Code进行介绍，使用其他编辑器的同学可以参考官网，用法其实差不多。

1. 首先确认你已经在开发工具内安装了Flutter, Dart插件（具体可参考上一篇入门）

   

   

2. 启动你本地的项目

3. 本文章以iPhone Simulator为例，先启动模拟器

   Open -a Simulator

   VSCode右下角选择对应的设备

   

   启动本地项目

   flutter run

4. 项目启动成功终端显示如下，在浏览器中打开红框中的地址就能看到对应的DevTools界面了

   

   

   

使用

简介： 这一部分的功能主要是面向各位的界面模块，里面首先会展示你整体的布局绘制树 ，点击树的每个节点都会在右侧显示更细节的布局信息 ，同时，在布局信息上你可以看到可视化的视图信息并进行一些简单的选择操作，这部分功能用官方的话说主要有两个目的：

1. 了解现有布局。

2. 诊断布局问题。

Select widget mode

这其实是一个选择视图，大家看到这个Tab下对应的其实就是你的整个绘制树 了，这样一颗树的结构复杂度一般都会和你的页面复杂度相关。如果是一个复杂的页面结构，这棵树也会非常庞大，看起来会很模糊，为了让我们可以更好的看到树里面的细节结构，我们就可以点击树上的某个节点，区查看树的某一部分的详细内容。

  如下，我选取了GridView里其中一个Container, 对应模拟器中的就被被高亮（看到这里是不是很熟悉？有点Chrome Inspector那味了没？）

Detail Tree

顾名思义，其实这里就是我们刚才所选择的节点的详细信息，其实现实的信息真的可以说非常走心 ❤️ 了。看图中，我选了一个Container节点 ，Container下的未赋值属性都给你提示出来了，如bg背景颜色等。如果你的页面内有颜色、色彩的叠加之类的，通过它可以看的很清晰 🔬 。

Layout Explorer

当前选中节点的布局浏览器。我选中的这个Container下面有包裹的详细结构都有显示出来，包括各个Wiget的边界，甚至给你显示了计算后的高度和宽度 （按照标准的分辨率尺寸）

  Layout Explorer不仅能让你查看整个布局界面，还可以让你做一些简单的动态操作，让你在不改动代码的前提下，明确你的布局问题，或者缺陷。

如下所示，可以显示当前Row的布局方式，大家可以观察以下几张图的变化。

Debug Paint

在渲染中添加视觉调试提示，以显示边框，填充，对齐和间隔。会在你的模拟器上显示整体的布局情况，这些情况包括你的整体渲染方向和基础组件类。

Paint Baselines

使每个RenderBox在其每个文本基线处绘制一条线。就是下图中的绿线

Highlight Repaints

打开这个功能，你的界面在重绘时，会在重绘的部分更改一个边界颜色 。比如，你有一个banner，间隔1s换一张图片，那么每一秒你的banner图周边的颜色就会变一个随机颜色。个人感觉其目的是让我们看到当前页面正在绘制或重绘的部分

结束语

有关Flutter中Inspector相关就介绍到这里了，希望这篇文章能给各位起到一定的帮助，后续会继续介绍DevTools的其他功能。