一、 背景介绍
Chrome 中 Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象 可以输出信息到 Console 窗口中。在具备调试功能的浏览器上，window 对象中会注册一个名为 console 的成员变量，指代调试工具中的控制台，console 有很多方法，比如我们最常用的log()。
二、知识剖析：常用CONSOLE方法
案例分析
1. console.log()：
常亮console.log("常量");
变量console.log(name);
表达式console.log("名字："+name);
方法console.log(document.getElementsByTagName("code"));
很常用，打印的结果就不多说了。
2. console.table():
···
varobj={
fun:{
name:'foo',
age:'18'
},
bar:{
name:'bar',
age:'19'
}
};
vararr=[
['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)打印的也大同小异，因为数组本身就是一个对象，只是数组里面的数组（对象）名称为数组的索引而已。
3. console.trace()：
functiontraceEnd(i){
console.log(i);
console.trace();
}
functionthirdTrace(i){
traceEnd(++i);
}
functionsecondTrace(i){
thirdTrace(++i);
}
functiontraceBegin(i){
secondTrace(++i);
}
functionfun3(){
vari=0;
traceBegin(i);
}
这个demo 中四个函数依次调用，在最后一个函数traceEnd()中添加console.trace()方法，即可以打印出函数的调用链，打印的结果为:
demo.html:202console.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()方法返回调用函数之后就可以按照调用去排查。非常方便。
4.console.time(name)
计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上，name参数可作为标签名。
console.time('计时器');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器');
5.console.profile([profileLabel])
这是个挺高大上的东西，可用于性能分析。在 JS 开发中，我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以，但显得不够灵活而且有误差。借助控制台以及console.profile()方法我们可以很方便地监控运行性能。
6.其他方法：
. 清除控制台clear()
. 将对象及子元素以目录树列出来console.dir()
. 条件打印（断言）console.assert()
三、常用debug方法
1. 断点调试
断点调试时最基础的一个调试方法，在调试的过程中查看变量和函数的变化状态，这使得不可见的程序运行过程变得可视化。
断点调试都在source选项卡中进行，所以放在下面一起来讨论。
2. source选项卡：
除了网络和DOM大部分的js调试都在source选项卡中进行。
a. 上图source选项代码序列上的蓝色标签即为断点的标识，断点也显示在Breakpoint选项中，可以在Breakpoint选项卡中勾掉暂时不用的断点，后面再使用的时候可以再勾选，这样就不用再代码中翻来翻去迷失方向了。
b.
这几个小图标前两个和调试时页面的两个按钮相同， 分别是暂停/开始和单步；往右边两个向上向下的箭头意思是进入函数，和（执行完）跳出函数；后面的一个是忽略所有断点运行，这样被避免更改完之后，点掉所有断点执行一遍在挨个加断点的尴尬。
c.watch窗口：
点击“+”添加一个想要监视的变量，在整个调试过程中，这个变量会一直显示在这里，就不用在函数之间苦苦寻找，然后再“hover”上去显示它的值，非常适合全局变量的监视。
d.Call Stack窗口：
这个就是堆栈窗口，显示当前堆栈中的内容，一般为函数调用和对象。这里可以查看想要调用的函数是否被掉用。在被调用函数中打一个断点，Call stack窗口就就会显示当前堆栈中的函数，调用函数在下面，被调用函数在上面，用蓝色圆点标记。
四、参考文献
你真的了解 console 吗：
https://segmentfault.com/a/1190000000481884
Chrome开发者工具不完全指南
最全面的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代码执行的时间？
比较坑的一个方法是：
functiontest(func){
varstart=newDate().getTime();//起始时间
func();//执行待测函数
varend=newDate().getTime();//接受时间
return(end-start)+"ms";//返回函数执行需要时间
网友评论