你所不知道的Chrome调试技巧（上）

0、前注

英文原文

本文基于译文，在原有基础上进行增强，根据我个人了解，额外加了很多内容。

默认是基于chrome来进行调试的，如果是其他浏览器，不一定能支持（特别是IE）

1、显示堆栈调用

console.trace(flags)

个人感觉这个用的也比较少。

原因在于如果需要捕捉堆栈，一般是出错的时候，但出错的时候抛错会自动显示堆栈。

使用场景：

在你发现有一个函数fn1被执行，但不能确定是谁调用了fn1；

或者fn1你预期只执行了一次，但实际上却发现执行了多次；

那么可以使用这个来分析。

使用示例：

function fn1 () {
    console.trace('fn1')
}

function fn2 () {
    fn1()
}

function fn3 () {
    fn2()
}

function fn4 () {
    fn1()
}

fn3()
fn4()

输出：

// 注释说明：fn3执行时的调用栈
fn1 @ 新建文本文档 (4).html:13
fn2 @ 新建文本文档 (4).html:17
fn3 @ 新建文本文档 (4).html:21
(anonymous) @ 新建文本文档 (4).html:28


// 注释说明：fn4执行时的调用栈
fn1 @ 新建文本文档 (4).html:13
fn4 @ 新建文本文档 (4).html:25
(anonymous) @ 新建文本文档 (4).html:29

2、获取时间段

console.time(flags)

console.timeEnd(flags)

这2个是成对出现的，参数表示标识（因为可能同时出现多个）。

时间不一定完全相等于你预期的时间，例如：

console.time('1')
setTimeout(() => {
    console.timeEnd('1')
}, 1000)
// 1000.459228515625ms

以上就是还额外多出来了0.459ms，这个时间可以用来参考估计某些代码执行的时间。

但缺点是，这个console.timeEnd没有返回值，所以你不能用变量来存下来（所以自己new Date()来计算时间差吧）；

另外注意，不能连续两个参数一样的console.timeEnd()，第二个的输出时间会是0ms。

3、debugger

debugger 的效果是当浏览器执行到这一段语句的时候，自动被断点。

你可以在控制台输入以下测试代码：

console.log('before')
debugger
console.log('after')

新人最爱用alert()来显示内容，进行调试。

但毫无疑问，使用debugger比alert()更专业。

并且，可以通过命令来统一管理代码：

function debug (arg) {
    let allDebugger = false    // 为true时，会所有都被断点
    // 不能写成 true ? debugger : null
    if (arg || allDebugger)
        debugger
}

console.log('1')
debug(1)
console.log('2')
debug(0)
console.log('3')

当传参且为true的时候，会被debugger，否则不会debugger。

如果allDebugger为true，那么所有都会被断点。

当然，个人只建议在调试的时候这么写，调试完后还是应该删除，毕竟太丑。

4、把object或array输出为表格

console.table(args)

只对第一个参数生效（后面的无效）

先上代码：

let foo = {
    a: 1,
    b: 2,
    c: function () {
        console.log('c')
    }
}
let bar = [
    {
        a: 1, b: 2,
        c: function () {
            console.log('c')
        }
    },
    {
        a: 3, b: 4,
        c: function () {
            console.log('c')
        }
    },
    3
]
console.table(foo)
console.table(bar)

都是生成表格，但是对对象和数组的生成方式有所区别：

对象

对于对象，生成表格的时候，对象的key作为第一列，值作为第二列。

假如对象的某个属性的值是函数，那么：

• 第二列Value为空；
• 第三列length是参数的个数（fn.length的值）；
• 第四列name是函数名；
• 第五列arguments（因为只有调用时这个才有值，所以一般都是null）；
• 第六列caller（一般也为null）；
• 第七列prototype（显示不出来，也点不开）
  

不能显示的：

1. 单独对函数使用console.table()是没用的；
2. 对class类也无效（除非是类的实例）；
3. writable, enumerable, configurable这三个属性不影响显示；
4. 不能显示原型链上的内容，如代码：

function Test () {
    this.a = 1
}

Test.prototype.b = 2
console.table(new Test())

只能显示a的值，不能显示b的值。

数组

1. 数组的索引作为第一列（(index)）的值；
2. 数组元素如果是非对象，那么有一列为Value的值为该元素的值；
3. 数组元素如果是对象，那么对象的key为一列，value为该列；

5、响应式调试

玩移动端H5开发的，估计没人不知道这个吧？

按下F12（win版，mac的话自己打开开发者工具）。如下图：

然后在调试窗口的左上角点击【2】指向的地方，就会打开响应式调试模式。

然后会在浏览器显示区域的上方出现以下内容：

上图：

1. 点击【1】区域，可以适配不同的机型，不过比较遗憾的是没有比较新的机型，我目前版本的chrome最新的是iPhone6 plus；
2. 点击【2】区域，可以切换横屏竖屏；
3. 点击【3】区域，有显示手机外壳的，有拍照的，还有显示DPI的；

然后我们再看回第一个图

点击：

1. 点击区域【1】，然后可以鼠标移动到HTML元素上，再点击一下，可以自动选中那个HTML元素，适合分析DOM结构；
2. 点击区域【3】，在下拉弹窗的【Dock side】选项，可以切换调试窗所在位置，比如【靠左】【靠右】【靠下】【独立窗口】。双屏强烈推荐【独立窗口】；
3. 其他的略略略。

6、显示你最近5次点击的DOM

在控制台的【Elements】，可以显示DOM树，然后你点击一个html元素，又点了另外一个。这个时候想知道你之前点击的记录怎么办？

在控制台输入：

$0    // 表示最近一次点击的，输出的是DOM
$1    // 表示是比最近一次远一次的那个DOM

从$0一直到$4，可以记录最近5次点击。

不过个人感觉，这个没啥用。