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

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之后可以调用它的多层编译器对类型推断进行优化。如果不进行优化,使用类型推断工具进行调试会变得异常缓慢。具体的优化过程细节可以参考官方说明

时间: 2024-08-30 06:30:27

WebKit Web Inspector增加覆盖率分析和类型推断功能的相关文章

JDK将新增局部变量类型推断功能

OpenJDK 提出一个新的计划, 准备为 Java 增加局部变量类型推断功能(local-variable type inference capability), 这让代码编写更简单, 同时也保证原有的静态类型安全特性. 该计划于3月8号提出,文档地址为: JEP-286(JDK Enhancement Proposal,JDK增强方案). 目前没有指定具体在哪个JDK版本中实现. 提案中说: "We seek to improve the developer experience by re

scala学习手记17 - 容器和类型推断

关于scala的类型推断前面已经提到过多次.再来看一下下面这个例子: import java.util._ var list1: List[Int] = new ArrayList[Int] var list2 = new ArrayList[Int] list2 add 1 list2 add 2 var total = 0 for (index <- 0 until list2.size()) { total += list2.get(index) } println("Total i

Hybrid APP基础篇(二)-&gt;Native、Hybrid、React Native、Web App方案的分析比较

说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid App React Native App 分析 各大开发模式直观对比 如何选择开发模式 另类的app方案 微网页 微信小程序 其它 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app.web app与native app工具的初步比较与分析 H5.React Nati

nginx web日志介绍和分析

nginx web日志介绍和分析 Nginx访问日志打印的格式可以自定义,例如Nginx日志打印格式配置如下,Log_format 用来设置日志格式,Name(模块名) Type(日志类型),可以配置多个日志模块,分别供不同的虚拟主机日志记录所调用: log_format log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '                   '$status $body_b

一个Web页面的问题分析

一个Web页面的问题分析 几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能.在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的,更规范的,更可维护的代码,就是这篇文章要阐述的内容. 首先我查看了该Web页面的HTML代码,发现了一些典型的问题: HTML页面中包含了很多Javascript和CSS代码 HTML页面中引用了大量的外部Javascript文件和CSS文件 接下来就这些问题,我们逐个讨论一下: HTML页面中包含了很多Jav

腾讯大牛亲授 Web 前后端漏洞分析与防御技巧

第1章 课程介绍介绍安全问题在web开发中的重要性,并对课程整体进行介绍1-1 Web安全课程介绍1-2 项目总览 第2章 环境搭建本章节我们会搭建项目所需要的环境2-1 环境搭建上2-2 环境搭建下 第3章 前端XSS系统介绍XSS攻击的原理.危害,以真实案例讲解XSS带来过的损失,最后以实战代码讲解如何防御XSS攻击3-1 XSS介绍3-2 XSS攻击类型3-3 HTML内容和属性转义3-4 JS转义3-5 富文本 上3-6 富文本 下3-7 CSP3-8 PHP-XSS 第4章 前端CSR

WEB网页输入框的默认键盘类型控制

参考资料 http://www.w3school.com.cn/html5/att_input_type.asp : 语法 <input type="value"> 属性值 值 描述 button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本) checkbox 定义复选框. color 定义拾色器. date 定义日期字段(带有 calendar 控件) datetime 定义日期字段(带有 calendar 和 time 控件) datetime-lo

SharePoint 2013中的默认爬网文件扩展名和分析文件类型

摘要:了解默认情况下 SharePoint 2013 爬网的文件扩展名及其解析的文件类型,可以借此了解搜索可以爬的文件和支持的功能. 如果“管理文件类型”页上的列表包含文件扩展名,爬网组件将仅爬网文件.内容处理组件只能解析爬网文件的内容: 当它具有可解析文件格式的格式处理程序. 当使用格式处理程序解析具有文件格式和文件扩展名的文件时. 默认情况下,SharePoint 2013 满足很多文件类型的这些要求. 默认爬网文件扩展名和解析文件格式 下表显示 SharePoint 2013 具有内置格式

Gson源码分析(贰) 类型获取和代码规范

我们使用Gson的时候基本是需要先定义一个数据模型,然后通过一个String流转化为我们OO的对象.那么对于一个框架来说,如何去获得用户想要的数据类型呢?并且我们又要如何通过这种既定的类型来构造出我们需要的对象?或许你的第一反应就是传递一个Clazz进去,然后通过反射的方法来获得我们的实际对象.跟着这个想法我们来实验一下: public <T>T createObject(Class<T> clazz) { try { return (T)clazz.newInstance();