[- Flutter 技能篇 -] debug 看程序启动

相信本身，你90%的错误均可以经过debug本身解决。若是不是，那就尽快让本身成为90%的错误均可以经过debug解决的人。

猿非圣贤，孰能无bug。出现了bug第一件事是干吗? Google，百度，stakeover?
也许你该瞄一下被你冷落的日志，而后思考一下，没法解决时。深吸一口气，去debug!

一个bug 即是一场凶案，有着它特定的案发现场，别人很难掌握事情的前因后果
debug即是你且只有你，与凶手之间灵魂的碰撞，智商的博弈
当你抽丝剥茧，探寻蛛丝马迹，层层深刻，最后手指前方，自信地说：“真想只有一个！”
凶手被抓，这时是何等快感，debug是你与程序的摩擦，是你与框架为数很少的交流与合做。
这时你不已再是一个API Caller,而是Program Coder，一位逻辑大侦探。
也许发现bug源头是个低级错误,你会拍着大腿，大骂本身4843，而后仰天长笑。
也许看似没有什么用处，但整个流程下来你完成了一次发现问题，解决问题的思惟探索过程，
你作了一件和伽利略，牛顿，爱因斯坦同样的事：经过思考和实践解决问题
咱们重要的是解决问题吗？更重要的是解决问题的过程和成长。

本文聚焦

void main() => runApp(Text("Debug")); 为何报错！！！
复制代码

这是笔者进入Flutter世界中的第一个疑问。Text也是Widget，为何直接会崩溃？
从这个问题出发，一块儿来场debug之旅吧。注意：本文不注重讲知识点，重在debug的操做。
debug的重要性我就不说了，程序员不会debug，就像厨师不会用菜刀。
debug不止是寻找错误的，更重要的是辅助逻辑的分析，在分析中你也能够学到不少知识。

---

1. debug基本操做

首先打断点，在左侧点击，会出现一个小红点，当debug模式运行时，程序会停在这里,
也就是凶案已经发生，你让整个世界暂停，以便你这个大侦探进行调查。

运行后会出现以下面板：你开始集结你的侦探团，面板的每一个功能都是你的小伙伴。
他们有各自的特定和能力，会助你一块儿寻找凶手。

---

1.1:三位侦查员小伙伴

分别介绍一下：下面是小折，小蓝和小红。

小折：不拘小节，统观全局，一行一行向下执行，碰见方法不会进入。口号：“大丈夫不拘小节”
小蓝：心思缜密，收放有度。若是其中有可执行单元 (非系统)，则进入。口号：“走，进去探险吧。”
小红：细如丝缕，贯穿全局，即便是系统的源码，也会进入一探究竟。口号：“只要功夫深铁杵磨成针。”

因此这三人有各自的特色，侦查粒度依次更精细，能够根据状况酌情使用:
提个问题：当前状态点三位侦查员分别什么状况？

小折：哥不拘小节，执行下一行 : 控制台直接报错
小蓝：侦探怎么能像小折这么随意，遇到可执行单元，固然要去侦查一下，因而到达Text构造
小红：姐很忙，在非系统方法调试时，我和小蓝是同样的。小蓝进不去的，再来找我。
复制代码

构造函数相关：

这里要调试，固然选小蓝，而后会发现进入了Text的构造方法，其中的变量区显示着当前类的数据成员

再点一下小蓝能够发现它跳到了assert断言中，如今知道构造函数执行时会先执行冒号以后的语句。
并且每一个字段以后都有提示信息，代表当前字段的值。

点小蓝，到达执行到super(key:key)，提问：“再点小蓝会到哪？”

因为Text继承自StatelessWidget，super方法调用父类。故进入：StatelessWidget构造

同理：StatelessWidget也先执行super(key:key)，镜头转到：Widget构造

接下来小蓝往哪走？要知道，一个类的初始化，首先要执行其父类的构造函数
这里Widget继承自DiagnosticableTree，必然会先执行DiagnosticableTree的构造方法

同理：DiagnosticableTree继承自Diagnosticable,要执行其父类的构造函数。这里进栈的顺序是：
runApp-->Text-->StatelessWidget-->Widget-->DiagnosticableTree-->Diagnosticable

因为mixin无构造函数，便到头了，因而方法入栈完毕，会依次弹栈：
Diagnosticable-->DiagnosticableTree-->Widget-->StatelessWidget-->Text-->runApp
当到Widget时,在其构造方法中对成员变量key进行复制，很显然因为咱们Text没有传Key,因此为null：

接着即是一路弹栈,回到runApp,此时已经完成了对Text()对象的初始化

这即是一个组件初始化的历程。接下来，小蓝会走到哪里呢？

---

1.2 runApp方法

因为runApp是可执行方法，小蓝会进入runApp方法，将刚才的Text对象做为入参:

接下来很显然小蓝要走入WidgetsBinding的ensureInitialized方法

若是这时候你以为这个方法不会有错，不想看了，毕竟是框架的初始化，不可能有错。你能够点四下小折，这样就该方法就会弹栈了。若是这个方法有100行呢，这是小折也感受很累人。该怎么办？介绍一个新伙伴：小过 -- 将当前方法直接弹栈

就说明WidgetsBinding#ensureInitialized已经ok了，继续执行。

---

用小蓝走几步，会到达attachRootWidget

也许你那七秒钟的鱼通常的记忆会忘记attachRootWidget中传的参数是什么。
能够经过变量面板或者后面的提示来获取线索。

这里经过RenderObjectToWidgetAdapter对象的attachToRenderTree方法为_renderViewElement进行赋值。这里小蓝下一步会走到哪?因为renderView是一个get方法，因此也是可执行单元，其中的三个入参的获取要早于RenderObjectToWidgetAdapter构造。 因此会先执行renderView方法。

这时若是你好奇RenderView是什么，而后点了进去：发现它是一个RenderObject

这时你想回到刚才程序运行的地方，可是七秒钟记忆的你忘记了怎么办？
放心，有一个小伙伴帮你看着呢，他就是小前----回到刚才程序运行处，因为他的看守，因此你能够肆无忌惮地乱跑，点击一下他，就能回到刚才程序运行的地方。

以后便会进入RenderObjectToWidgetAdapter的构造方法，入参是什么，还用我说么?

以后即是一批的父类构造进栈出栈，最后构造出RenderObjectToWidgetAdapter对象
挺无聊的，大丈夫不拘小节，小折来一下,该对象就构建完成了，

---

而后小蓝会该对象的走attachToRenderTree方法，等一下，这两个入参是什么？ 当你对入参有所疑惑，或想要查看当前表达式的的结果，那么另外一个小伙伴就会颇有用，她就是依依--计算表达式

在其中你能够输入表达式，下面会出现相应的结果

只要是能够运算的，都能在这里运算查看结果。发现renderViewElement是一个null

---

继续小蓝，renderViewElement和buildOwner都是一个get函数，因此都会进入。
若是一直小蓝，获取的个个细节都会被一点点走过，若是不想看这么多，小折或小过就好了
这时候会到达attachToRenderTree，这里提一下，下面的Frames里能够看到当前执行处所在的位置，让你不至于连在哪都不知道。

刚才已经看了，这个element为null，因此会走owner.lockState方法，注意这里的参数是一个函数。

再点击小蓝时，毫无疑问，走到lockState方法中,而入参即是上面那一坨。小折走几步发现到了callback();，以后小蓝会到哪？

你猜对了，是执行刚才的入参函数,（敲黑板）注意了，要考的

这里便进入了createElement方法，也就是元素的建立实机。

---

1.3 元素的建立

在RenderObjectToWidgetAdapter中经过RenderObjectToWidgetElement完成建立元素

这里入参widget是什么，很显然，什么传入的是this,代表是RenderObjectToWidgetAdapter对象。 RenderObjectToWidgetAdapter是什么，是包含着咱们的Text的一个Widget。

RenderObjectToWidgetAdapter继承树：
    RenderObjectToWidgetAdapter-->RenderObjectWidget-->Widget  
    
RenderObjectToWidgetElement元素继承树：
    RenderObjectToWidgetElement-->RootRenderObjectElement-->RenderObjectElement-->Element
复制代码

这里RenderObjectToWidgetElement将该Widget一路供奉给父类构造，并在Element中被笑纳。
能够看出在RenderObjectToWidgetElement元素中获取get widget是经过super拿来的Widget。

---

1.4 buildScope与元素装配

这样RenderObjectToWidgetAdapter(Widget)就被RenderObjectToWidgetElement(Element)纳为己有,元素也被成功建立，小蓝继续来到这里刚才建立元素的方法中。走几步便到达owner.buildScope方法，将刚才的元素传入，并在回调中执行元素的装载方法（mount）这是顶层元素的装配点，记住它被触发的时机，划重点，要考的。

这里提问：小蓝在此时会走到哪？我好像听到有人说是先执行第二个入参里的方法，由于它可执行。答案是进入buildScope，由于第二参只是一个函数类型的入参，并无被触发。因而到达了buildScope，这个Flutter框架核心环节之一：

一路小折，到达第二参的回调处：

再进行小蓝，便会执行元素装载的方法，这也是Flutter中很是重要的一环。

首先装载会先调用父类的装载方法，最终追溯到Element# mount

RenderObjectToWidgetElement# mount
    RootRenderObjectElement# mount
        RenderObjectElement# mount
                    Element# mount
复制代码

Element# mount作的最重要的一件事就是将_parent和_slot经过入参进行初始化

---->[Element# mount]---
void mount(Element parent, dynamic newSlot) {
  //略...
  _parent = parent;
  _slot = newSlot;
  //略...
}
复制代码

而后一路弹栈：RenderObjectElement# mount中经过widget来建立RenderObject

而这个Widget何许人也，刚才Element笑纳的那个根Widget，即RenderObjectToWidgetAdapter
this是什么：RenderObjectElement,这也就是最顶层RenderObject被建立的时机。(画重点)

abstract class RenderObjectElement extends Element {.
  RenderObjectElement(RenderObjectWidget widget) : super(widget);

  @override
  RenderObjectWidget get widget => super.widget;
复制代码

以后将元素关联到渲染对象上，并将本身标脏。更多的细节这里再也不追，我有专文讲解
在父类的mount方法执行完后，会执行_rebuild方法。注意这时parent为null。

小蓝继续：你会走到updateChild，也就是将新旧孩子进行更新，敲黑板，划重点

RenderObjectToWidgetElement#mount
    RenderObjectToWidgetElement#_rebuild
        RenderObjectToWidgetElement#updateChild
复制代码

此时原来的孩子为null,新的孩子是咱们传入的Text,接下来将何去何从？
发现没有符合if条件的，便传入的Text做为第一入参执行到最后inflateWidget

在inflateWidget中能够发现一个惊天秘密，也就是Widget触发createElement的时机

而这里的newWidget是Text,那如今有一个值得深思的问题：Text的createElement是如何实现的。
因为Text是一个StatelessWidget，因此必然是走StatelessWidget的createElement，返回一个StatelessElement对象，并将该Widget笑纳。

abstract class StatelessWidget extends Widget {
  @override
  StatelessElement createElement() => StatelessElement(this);
复制代码

而后便会指向该元素的mount方法，该元素是谁？StatelessElement
因为StatelessElement未复写mount方法，会直接走父类：ComponentElement#mount

ComponentElement#mount
    ComponentElement#_firstBuild
        ComponentElement#rebuild
            ComponentElement#performRebuild
复制代码

在performRebuild中你会发现build的调用时机。

问题来了，Text做为一个StatelessWidget它build的里到底作了什么？ 答案是使用RichText进行内部组件的构造。你会发现，原来Text也并不想一想象中的那么简单

在方法出栈是对build局部变量进行赋值，能够看出是一个RichText。

接下来又是一此updateChild，只不过主角不一样了。

这里的主角是RichText

Element#inflateWidget
    RichText#createElement
        MultiChildRenderObjectElement#createElement
复制代码

而后又会执行MultiChildRenderObjectElement的mount方法进行装载

MultiChildRenderObjectElement#mount
    RenderObjectElement#mount
        Element#mount
复制代码

你会发现有执行到了RenderObjectElement#mount
只是这时的parent是咱们传入的Text,由于这时时对Text的自件RichText进行装载

也许你并不知道RichText是经过RenderParagraph进行建立RenderObject的 而这一开始的错误即是来源于这个断言

这样就也找到了异常所在。

这里为了带你们多了解一些知识，因此跳的比较细，其实不少地方能够用小折直接过
不太小蓝能够帮助你分析程序的运行逻辑，对你把控整个框架有很大的帮助。若是是学习能够用小蓝，更加细致。

---

2. 多断点的使用及其余

好比在inflateWidget这里再打个断点，运行时，首先会停留在第一个断点mian那里
可是之间的逻辑已经不须要再看了，使用不想一点点调试，那多断点就能够帮助你。

点击这个，当前断点就会被放行，程序继续运行，当运行到下一个断点时就会停下，也就是inflateWidget处，这样就能够避免调试中间的流程。当你在调试时，能够先选一些肯出错的地方，打上断点，而后再去调试。这样能更迅速的定位到bug所在。

也许你会怕断点太多怎么办？这里能够对断点进行查看和修改。

---

Run to Cursor可让程序运行到指定光标处，注意它碰到其余断点会先停留在断点处

---

最后说一下变量观察和循环调试：

若是变量过多，能够经过Watcher进行单独观察,点加号，输入变量名便可

若是有一千万次循环，一步一步还不得地老天荒，这时候循环调试能够帮到你
你能够指定一个条件，那么下次循环就会变成此条件。

好了就说这么多。