猿非圣贤,孰能无 bug。出现了 bug 第一件事是干嘛? Google,百度,Stack Overflow?
也许你该瞄一下被你冷落的日志,然后思考一下,无法解决时。深吸一口气,去 debug!
一个 bug 便是一场凶案,有着它特定的案发现场,别人很难掌握事情的来龙去脉 debug 便是你且只有你,与凶手之间灵魂的碰撞,智商的博弈。当你抽丝剥茧,探寻蛛丝马迹,层层深入,最后手指前方,自信地说: "真相只有一个!" 凶手被抓,这时是何等***。
debug 是你与程序的摩擦,是你与框架为数不多的交流与合作。这时你不已再是一个 API Caller,而是 Program Coder,一位逻辑大侦探。也许发现 bug 源头是个低级错误,你会拍着大腿,大骂自己 4843,然后仰天长笑。也许看似没有什么用处,但整个流程下来你完成了一次发现问题,解决问题的思维探索过程,你做了一件和伽利略、牛顿、爱因斯坦一样的事: 通过思考和实践解决问题。我们重要的是解决问题吗? 更重要的是解决问题的过程和成长。
本文聚焦
void main() => runApp(Text("Debug")); 为什么报错!!!
这是笔者进入 Flutter 世界中的第一个疑问。Text 也是 Widget,为什么直接会崩溃? 从这个问题出发,一起来场 debug 之旅吧。(注意: 本文不注重讲知识点,重在 debug 的操作)debug 的重要性我就不说了,程序员不会 debug,就像厨师不会用菜刀。debug 不止是寻找错误的,更重要的是辅助逻辑的分析,在分析中你也可以学到很多知识。
** debug 基本操作**
首先打断点,在左侧点击,会出现一个小红点,当 debug 模式运行时,程序会停在这里,也就是凶案已经发生,你让整个世界暂停,以便你这个大侦探进行调查。
三位侦查员小伙伴
分别介绍一下: 下面是小折,小蓝和小红。-
小折: 不拘小节,统观全局,一行一行向下执行,遇见方法不会进入。
口号: "大丈夫不拘小节"
-
小蓝: 心思缜密,收放有度。如果其中有可执行单元 (非系统),则进入。
口号: "走,进去探险吧"
-
小红: 细如丝缕,贯穿全局,即使是系统的源码,也会进入一探究竟。
口号: "只要功夫深铁杵磨成针"
所以这三人有各自的特点,侦查粒度依次更精细,可以根据情况酌情使用。提个问题: 当前状态点三位侦查员分别什么情况?
小折:哥不拘小节,执行下一行 : 控制台直接报错
构造函数相关
这里要调试,当然选小蓝,然后会发现进入了 Text 的构造方法,其中的变量区显示着当前类的数据成员。点小蓝,到达执行到 super(key:key),提问: "再点小蓝会到哪?"
同理: 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方法
由于 runApp 是可执行方法,小蓝会进入 runApp 方法,将刚才的 Text 对象作为入参:接下来很显然小蓝要走入 WidgetsBinding 的 ensureInitialized 方法
这时如果你好奇 RenderView 是什么,然后点了进去: 发现它是一个 RenderObject
之后便会进入 RenderObjectToWidgetAdapter 的构造方法,入参是什么,还用我说么?
之后便是一批的父类构造进栈出栈,最后构造出 RenderObjectToWidgetAdapter 对象。挺无聊的,大丈夫不拘小节,小折来一下,该对象就构建完成了。
只要是可以运算的,都能在这里运算查看结果。发现 renderViewElement 是一个 null
继续小蓝,renderViewElement 和 buildOwner 都是一个 get 函数,所以都会进入。如果一直小蓝,获取的个个细节都会被一点点走过,如果不想看这么多,小折或小过就行了。这时候会到达 attachToRenderTree,这里提一下,下面的 Frames 里可以看到当前执行处所在的位置,让你不至于连在哪都不知道。
刚才已经看了,这个 element 为 null,所以会走 owner.lockState 方法,注意这里的参数是一个函数。
再点击小蓝时,毫无疑问,走到 lockState 方法中,而入参便是上面那一坨。小折走几步发现到了 callback();,之后小蓝会到哪?
这里便进入了createElement方法,也就是元素的创建实机。
元素的创建
在 RenderObjectToWidgetAdapter 中通过 RenderObjectToWidgetElement 完成创建元素。这里入参 widget 是什么,很显然,什么传入的是 this,表明是 RenderObjectToWidgetAdapter 对象。RenderObjectToWidgetAdapter 是什么,是包含着我们的 Text 的一个 Widget。
RenderObjectToWidgetAdapter继承树:
这里 RenderObjectToWidgetElement 将该 Widget 一路供奉给父类构造,并在 Element 中被笑纳。可以看出在 RenderObjectToWidgetElement 元素中获取 get widget 是通过 super 拿来的 Widget。buildScope 与元素装配
这样 RenderObjectToWidgetAdapter(Widget) 就被 RenderObjectToWidgetElement(Element) 纳为己有,元素也被成功创建,小蓝继续来到这里刚才创建元素的方法中。走几步便到达 owner.buildScope 方法,将刚才的元素传入,并在回调中执行元素的装载方法 (mount) 这是顶层元素的装配点,记住它被触发的时机,划重点,要考的。
这里提问: 小蓝在此时会走到哪? 我好像听到有人说是先执行第二个入参里的方法,因为它可执行。答案是进入 buildScope,因为第二参只是一个函数类型的入参,并没有被触发。于是到达了 buildScope,这个Flutter框架核心环节之一:
RenderObjectToWidgetElement# mount
Element# mount 做的最重要的一件事就是将 _parent 和 _slot 通过入参进行初始化。
---->[Element# mount]---
然后一路弹栈: RenderObjectElement# mount 中通过 widget 来创建 RenderObject。 而这个 Widget 何许人也,刚才 Element 笑纳的那个根 Widget,即 RenderObjectToWidgetAdapterthis 是什么: RenderObjectElement,这也就是最顶层 RenderObject 被创建的时机。(画重点)
abstract class RenderObjectElement extends Element {.
小蓝继续: 你会走到 updateChild,也就是将新旧孩子进行更新,敲黑板,划重点。
RenderObjectToWidgetElement#mount
在 inflateWidget 中可以发现一个惊天秘密,也就是 Widget 触发 createElement 的时机。
而这里的 newWidget 是 Text,那现在有一个值得深思的问题: Text 的 createElement 是如何实现的? 由于 Text 是一个 StatelessWidget,所以必然是走 StatelessWidget 的 createElement,返回一个 StatelessElement 对象,并将该 Widget 笑纳。
abstract class StatelessWidget extends Widget {
然后便会指向该元素的 mount 方法,该元素是谁? StatelessElement由于 StatelessElement 未复写 mount 方***直接走父类: ComponentElement#mount。 ComponentElement#mount
在 performRebuild 中你会发现 build 的调用时机。
问题来了,Text 作为一个 StatelessWidget 它 build 的里到底做了什么?
答案是使用 RichText 进行内部组件的构造。你会发现,原来 Text 也并不想想象中的那么简单。
Element#inflateWidget
然后又会执行 MultiChildRenderObjectElement 的 mount 方法进行装载。 MultiChildRenderObjectElement#mount
你会发现有执行到了 RenderObjectElement#mount,只是这时的 parent 是我们传入的 Text,因为这时对 Text 的自件 RichText 进行了装载。 也许你并不知道 RichText 是通过 RenderParagraph 进行创建 RenderObject 的,而这一开始的错误便是来源于这个断言。
这样就也找到了异常所在。
这里为了带大家多了解一些知识,所以跳的比较细,其实很多地方可以用小折直接过。不过小蓝可以帮助你分析程序的运行逻辑,对你把控整个框架有很大的帮助。如果是学习可以用小蓝,更加细致。
多断点的使用及其他
比如在 inflateWidget 这里再打个断点,运行时,首先会停留在第一个断点 mian 那里。但是之间的逻辑已经不需要再看了,使用不想一点点调试,那多断点就可以帮助你。好了就说这么多。
推荐👇:
如果你想一起进阶,不妨添加一下交流群1012951431
面试题资料或者相关学习资料都在群文件中 进群即可下载!