前言 :
通常，我们在编写一个新的JavaScript代码过程中经常会发生错误，可能是语法错误，可能是逻辑错误，如果没有一个调试工具帮助我们的话，相信你怕是头都要炸了。
由于JS是执行在浏览器的，所以我们可以直接在浏览器中进行调试。在所有的浏览器中，建议大家使用谷歌浏览器进行调试，体验非常的棒。当然所有的都一样，需要我们打开控制台输出窗口，即 Console面板。
Console 调试
我主要总结了一些在 Console 面板里的调试技巧, 记录自己学习过程中用到的方法。
- 设置断点调试
首先打开开发工具，选择 Elements，选择页面中的某个标签，右键 → Break on → Attributes modifications。即可为该元素添加断点，当它的属性发生改变时，会自动定位到页面代码中的对应行。
右键 → Break on可以设置三种不同情况的断点：
- subtree modifications 子节点修改
- attribute modifications 自身属性修改
- node removal 自身节点被删除
该方法与在程序代码中直接使用 debugger关键字的效果是一样的。
- 输出信息
调试过程中console.log()是再常用不过的了，我们用它来输出信息。
直接先输出查看一下console有哪些方法：
一般输出信息我们常用的就几个：
console.log 用于输出普通信息
console.info 用于输出提示性信息
console.warn 用于输出警示信息
console.error 用于输出错误信息
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();
这些调试技巧对我们的开发有很大帮助，就先总结这些，开发过程中都用的到。
该文章同步在 :
CSDN Blog： http://blog.csdn.net/levinhax/article/details/76862440
GitHub Page : https://levinhax.github.io/
