BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

WebKit Web Inspector增加覆盖率分析和类型推断功能

| 作者 张天雷 关注 4 他的粉丝 发布于 2015年9月8日. 估计阅读时间: 6 分钟 | ArchSummit北京2018 共同探讨机器学习、信息安全、微服务治理的关键点

WebKit中的Web Inspector(Web检查器)主要用于查看页面源代码、实时DOM层次结构、脚本调试、数据收集等,日前增加了两个十分有用的新功能:覆盖率分析和类型推断。覆盖率分析工具能够可视化地精确显示JavaScript程序执行的部分。类型推断工具则可以直观地给重要变量加上类型信息的注释。这两项功能使得在Web Inspector中理解和调试JavaScript程序变得更加简便,编程体验得到了极大的提升。

覆盖率分析功能
理解程序如何工作是一件复杂而繁琐的过程,需要知道在特定的输入情况下程序执行了哪些部分。在网页应用中,通常需要关心用户与网页交互时程序执行的部分。Web Inspector现在就可以准确地显示程序正在运行的部分以及没有运行的部分。

同样地,在理解程序的控制流程时,必须知道哪些函数正在执行,甚至需要深入到函数内部的if-then条件分支中。查找bug时一般会监测某段程序有没有执行,这也是协调整个程序工程各个功能模块的必由之路。覆盖率分析工具可以帮助编程者找出程序中的细节问题。

类型推断功能
JavaScript类型推断是Web Inspector中另一个振奋人心的新功能。JavaScript中的所有变量都有类型,但是在阅读JavaScript代码或函数时,很难一下子知道某个变量属于什么类型。现在,类型推动工具就可以解决浏览JavaScript程序时,难以确定重要变量类型的问题。

JavaScript属于动态类型语言,相比于静态类型语言(比如SwiftHaskell等)而言,编写JavaScript程序时并不需要进行类型声明。因此,JavaScript程序中的任意一个变量或表达式都可以是任意一种类型,函数也可以返回任意类型的值。静态类型语言能够避免混淆不匹配的类型,当类型检查器发现类型匹配错误时,编译器不会通过编译。而JavaScript就没有这样的限制,只要JavaScript程序没有语法错误,就可以通过编译。再比方说,在静态类型语言中,不能把一个数赋值给一个数组变量,但是在JavaScript中就可以。像这样类型错配的小例子看起来好像很容易避免,然而当JavaScript程序变得庞大复杂、拥有越来越多的类时,就很难记录所有可能的类型,也不可避免地会出现错配的情况。虽然JavaScript不是静态类型语言,但它的变量通常只会有一种特定的类型(单态性极大地促进了JIT编译器成功优化JavaScript程序),JavaScript程序经常因为难以预料的类型泄漏而产生错误。有很多例子可以说明这种缺少强制类型保护的弊端,在这里就不一一列举了。

Web Inspector的类型推断功能使得查找和解决这类问题更加快捷方便。类型相关的错误有时很容易定位,类型不匹配时会报出运行类型错误。但在大多数情况下,类型不匹配问题并不会报错,而且会很难定位,甚至难以复现。类型推断工具这时就可以辅助有效地查找这类微小的错误。在Web Inspector中开启类型推断功能后,JavaScript程序会在重要的变量和函数旁显示类型提示。编程者可以直接浏览JavaScript程序,不需要加载console.log文件或在调试时分步暂停。类型推断工具十分适合反向查找类型相关的错误。正如类型推断功能自身的名称所说的那样,它仅仅是依据程序中曾经出现过的数据类型进行推断。它既不能有百分之百的把握显示变量正确的类型,也不能基于已有的信息进行类型预测。另外,类型推断工具会实时进行更新。当新的信息加入程序时,它就会更新注释。使用类型推断工具可以帮助编程者更好地把握程序脉络,也有助于更好地熟悉新代码。

关于编译的补充说明
类型推断功能与JavaScriptCore's JIT编译架构高度集成在一起,下图显示了JSC编译器的工作流程图。

JSC首先将JavaScript代码解析为抽象语法树(AST,Abstract Syntax Tree),而后生成字节码。接下来JSC会翻译字节码,并在LLInt(Low Level Interpreter)中收集分析信息。如果一个函数已经执行了足够的时间,JSC会在Baseline中直接将这部分字节码编译为机器码;如果这个函数继续执行多次,JSC会用DFG和FTL JIT进行优化。由于类型推断信息被编译进了JSC的字节码,JSC之后可以调用它的多层编译器对类型推断进行优化。如果不进行优化,使用类型推断工具进行调试会变得异常缓慢。具体的优化过程细节可以参考官方说明


感谢徐川对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入InfoQ读者交流群InfoQ好读者)。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT