Console 调试小技巧

前言 :

通常，我们在编写一个新的JavaScript代码过程中经常会发生错误，可能是语法错误，可能是逻辑错误，如果没有一个调试工具帮助我们的话，相信你怕是头都要炸了。

由于JS是执行在浏览器的，所以我们可以直接在浏览器中进行调试。在所有的浏览器中，建议大家使用谷歌浏览器进行调试，体验非常的棒。当然所有的都一样，需要我们打开控制台输出窗口，即 Console面板。

Console 调试

我主要总结了一些在 Console 面板里的调试技巧, 记录自己学习过程中用到的方法。

• 设置断点调试

首先打开开发工具，选择 Elements，选择页面中的某个标签，右键 → Break on → Attributes modifications。即可为该元素添加断点，当它的属性发生改变时，会自动定位到页面代码中的对应行。

右键 → Break on可以设置三种不同情况的断点：
1. subtree modifications 子节点修改
2. attribute modifications 自身属性修改
3. node removal 自身节点被删除

该方法与在程序代码中直接使用 debugger关键字的效果是一样的。

• 输出信息

调试过程中console.log()是再常用不过的了，我们用它来输出信息。
直接先输出查看一下console有哪些方法：

一般输出信息我们常用的就几个：

1. console.log 用于输出普通信息

2. console.info 用于输出提示性信息

3. console.warn 用于输出警示信息

4. console.error 用于输出错误信息

5. console.debug 用于输出调试信息

• log 的更多输出

.log() 是最常用的，它的输出结果的形式也有很多种

• %s 字符串

• %d 整数

• %f 浮点值

• %o Object

• %c 设定输出的样式，在之后的文字将按照第二个参数里的设置显示

• 打印输出DOM元素

当我们获取到DOM元素之后，也可以把他们打印出来，有两种输出的形式，log 输出这个DOM元素的HTML标签，dir 输出这个DOM元素的属性列表。

• 换种更清晰的形式输出

除了以上的输出，我们还可以以表格的形式或分组将信息输出出来：

以表格形式输出，还可以加上参数输出具体的某一列

另外一种就是我们还可以分组展示数据信息

• assert 方法进行测试

该方法接收一个表达式作为参数，如果断言为false，则将一个错误消息写入控制台；如果断言是true，没有任何反应。

console.assert(1 ===1, "（断言为真）");   // 无结果输出
console.assert(1 ===0, "断言为假");     // 输出错误信息，内容为 断言为假

• count 计数

对输出的对象进行计数。但需要注意的是这里的计数对象仅限于由 count() 输出的内容，并非所有 console 中的输出。

• time 计时

用 time(“name”) 和 timeEnd(“name”) 分别控制开始点和结束点，它们两的参数表示当前计时的名称，可以自定义但需要保持相同。所以如果想看异步获取数据花了多场时间，可以这样写：

• 清空 console 面板输出内容

好了，说了那么多，是时候把之前输出的内容清一下了，这个时候就用到了 console.clear() 。

console.clear();

这些调试技巧对我们的开发有很大帮助，就先总结这些，开发过程中都用的到。

该文章同步在 :
简书 ： https://www.jianshu.com/users/63adfe13324c/timeline
GitHub Page : https://levinhax.github.io/