Console的用法，以及Debug技巧

一.背景介绍

什么是console？

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()

可将传入的对象，或数组以表格形式输出，相比传统树形输出，这种输出方案更适合内部元素排列整齐的对象或数组，不然可能会出现很多的 undefined。

                
                        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);

                
            

3.console.count([label])

输出执行到该行的次数例如：

                
                        (function() {
  for (var i = 0; i < 5; i++) {
    console.count('count');
  }
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5
                
            

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()方法我们可以很方便地监控运行性能。

例如下面这段代码：

                
                    function parent() {
  for (var i = 0; i < 10000; i++) {
    childA()
  }
}

function childA(j) {
  for (var i = 0; i < j; i++) {}
}

console.profile('性能分析');
parent();
console.profileEnd();
                
            

然后我们可以在 Profiles 面板下看到上述代码运行过程中的消耗时间。

页面加载过程的性能优化是前端开发的一个重要部分，使用控制台的 profiles 面板可以监控所有 JS 的运行情况使用方法就像录像机一样，控制台会把运行过程录制下来。如图，工具栏上有录制和停止按钮。

6. 其他方法

. 清除控制台 clear()

. 将对象及子元素以目录树列出来 console.dir()

. 条件打印（断言）console.assert()

3.常见问题

常用调试方法

4.解决方案

1. 断点调试

断点调试是最基础的一个调试方法，在调试的过程中查看变量和函数的变化状态，这使得不可见的程序运行过程变得可视化。 断点调试都在source选项卡中进行，所以放在下面一起来讨论。

2. sources 选项卡

a. 上图source选项代码序列上的蓝色标签即为断点的标识，断点也显示在Breakpoint选项中，可以在Breakpoint选项卡中勾掉暂时不用的断点，后面再使用的时候可以再勾选，这样就不用再代码中翻来翻去迷失方向了。 
b. 这几个小图标前两个和调试时页面的两个按钮相同， 分别是暂停/开始和单步；往右边两个向上向下的箭头意思是进入函数，和（执行完）跳出函数；后面的一个是忽略所有断点运行，这样被避免更改完之后，点掉所有断点执行一遍在挨个加断点的尴尬。 
c. watch窗口： 点击“+”添加一个想要监视的变量，在整个调试过程中，这个变量会一直显示在这里，就不用在函数之间苦苦寻找，然后再“hover”上去显示它的值，非常适合全局变量的监视。

5.编码实战

6.扩展思考

为什么不提倡用alert进行调试？

一方面，传统的alert调试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的调试信息，那个窗口着实不太美观，而且会遮挡部分页面内容，着实有些不太友好。

另一方面，alert的调试信息会中断代码，阻碍页面的继续渲染。这就意味着开发人员调试完成后，必须手动清除这些调试代码，实在有些麻烦。

另外，如果在循环中使用alert，光关闭弹出的窗口就够自己累的了，哈哈！

7.参考文献

参考一：你真的了解console吗

参考二：Chrome开发者工具不完全指南

参考三：Google Developers官网

参考三：CSDN中文IT网

8.更多讨论

大家在调试程序中有什么比较好的方法分享一下？

问题：

1：如何在控制台进行代码格式化？

在sources面板选中需要格式化的js文件，然后点击pretty print。

2：alert的更多缺点？

1）.alert()是一种破坏性的方法，执行的时候弹出弹窗之后的代码就不会执行。

2）.alert()还有一个缺点就是会将参数message转换为字符串。改变原信息格式。

3：console和打断点哪个更好用？

各有特长吧，如果你要验证一个特定的函数，是不是自己想要的效果，就用console，如果不确定页面的问题出在哪儿，就用断点调试。