一、 背景介绍
Chrome 中 Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象 可以输出信息到 Console 窗口中。在具备调试功能的浏览器上，window 对象中会注册一个名为 console 的成员变量，指代调试工具中的控制台，console 有很多方法，比如我们最常用的log()。
二、知识剖析：常用CONSOLE方法
-
console.log(),普通打印方法； -
console.table()将函数和数组一表格的形式打印出来； -
console.trace()将传入的对象，或数组以表格形式输出.
案例分析
-
console.log()：
常亮 console.log("常量");
变量 console.log(name);
表达式 console.log("名字：" + name);
方法 console.log(document.getElementsByTagName("code"));
很常用，打印的结果就不多说了。
-
console.table():
var obj = {
fun: {
name: 'foo',
age: '18'
},
bar: {
name: 'bar',
age: '19'
}
};
var arr = [
['fun', '18'],
['bar', '19']
];
console.log(obj);
console.table(obj);
console.log(arr);
console.table(arr);
打印出的结果如下：
console.table(obj)打印的是obj对象，其中两个对象的树行分别被按顺序打印出来，形成一个表格，方便筛选数据。（点击顶栏的index name age，都可以实现按顺序排列）；console.table(arr)打印的也大同小异，因为数组本身就是一个对象，只是数组里面的数组（对象）名称为数组的索引而已。
-
console.trace()：
function traceEnd(i) {
console.log(i);
console.trace();
}
function thirdTrace(i) {
traceEnd(++i);
}
function secondTrace(i) {
thirdTrace(++i);
}
function traceBegin(i){
secondTrace(++i);
}
function fun3() {
var i = 0;
traceBegin(i);
}
这个demo 中四个函数依次调用，在最后一个函数traceEnd()中添加console.trace()方法，即可以打印出函数的调用链，打印的结果为:
demo.html:202 console.trace
traceEnd @ demo.html:202
thirdTrace @ demo.html:206
secondTrace @ demo.html:210
traceBegin @ demo.html:214
fun3 @ demo.html:219
onclick @ demo.html:128
由于我们使用的是onclick()函数调用fun4()然后一次调用，所以总共返回6个函数。
console.trace()的遍历之处在于，当项目足够复杂，函数之间的调用连自己都记不清楚的时候，很难发现那个调用出现问题，通过trace()方法返回调用函数之后就可以按照调用去排查。非常方便。
- 其他方法：
. 清除控制台clear()
. 将对象及子元素以目录树列出来console.dir()
. 条件打印（断言）console.assert()
三、常用debug方法
-
断点调试
断点调试时最基础的一个调试方法，在调试的过程中查看变量和函数的变化状态，这使得不可见的程序运行过程变得可视化。
断点调试都在source选项卡中进行，所以放在下面一起来讨论。 -
source选项卡：
除了网络和DOM大部分的js调试都在source选项卡中进行。
a. 上图source选项代码序列上的蓝色标签即为断点的标识，断点也显示在Breakpoint选项中，可以在Breakpoint选项卡中勾掉暂时不用的断点，后面再使用的时候可以再勾选，这样就不用再代码中翻来翻去迷失方向了。
b.
这几个小图标前两个和调试时页面的两个按钮相同， 分别是暂停/开始和单步；往右边两个向上向下的箭头意思是进入函数，和（执行完）跳出函数；后面的一个是忽略所有断点运行，这样被避免更改完之后，点掉所有断点执行一遍在挨个加断点的尴尬。
c. watch窗口：
点击“+”添加一个想要监视的变量，在整个调试过程中，这个变量会一直显示在这里，就不用在函数之间苦苦寻找，然后再“hover”上去显示它的值，非常适合全局变量的监视。
d. Call Stack窗口：
这个就是堆栈窗口，显示当前堆栈中的内容，一般为函数调用和对象。这里可以查看想要调用的函数是否被掉用。在被调用函数中打一个断点，Call stack窗口就就会显示当前堆栈中的函数，调用函数在下面，被调用函数在上面，用蓝色圆点标记。
四、参考文献
你真的了解 console 吗：
https://segmentfault.com/a/1190000000481884
Chrome开发者工具不完全指南
http://web.jobbole.com/82562/
最全面的JavaScript调试技巧总结
http://ms.csdn.net/geek/67969?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io
更多讨论：
- 手机端调试只能使用
alert()吗？
听起来好像是这样的，手机端没有console，貌似只能通过alert来调试，实际上还是有方法的：使用工具 m-console具体方法参考：
https://segmentfault.com/a/1190000005173779 - 如何查看一段js代码执行的时间？
比较坑的一个方法是：
function test(func){
var start = new Date().getTime();//起始时间
func();//执行待测函数
var end = new Date().getTime();//接受时间
return (end - start)+"ms";//返回函数执行需要时间
}
其实不坑，可以用。
另一个一个方法是查看开发工具中的timeline选项卡，可是我的浏览器中怎么找不到这个选项卡，大家可以看看自己的有没有这个选项卡。
网友评论