F12Console的用法，以及如何Debug技巧

小课堂【郑州第七十八期】

1.背景介绍

long long ago，互联网在刚刚起步的时代，网页前端还主要以内容展示为主，浏览器脚本还只能为页面提供非常简单的辅助功能的时候。那个时候，网页主要运行在以IE6为主的浏览器中，JS的调试功能还非常弱，只能通过内置于Window对象中的alert方法来调试。

什么是console？

Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象 可以输出信息到 Console 窗口中。

2.知识剖析

一、控制台显示方式：

1，全频专用面板形式

2，全频专用抽屉形式

二、消息堆叠

如果一条消息连续重复，而不是在新行上输出每一个消息实例，控制台将“堆叠”消息并在左侧外边距显示一个数字。此数字表示该消息已重复的次数。

                
                    for (var i = 0;i<10;i++){

                        if(i % 5 === 0){

                            console.log("大娃");

                        }

                        else{

                            console.log("二娃");

                        }

                    }                
            

如果您倾向于为每一个日志使用一个独特的行条目，请在 Settings 设置中启用 Show timestamps。

三、处理控制台历史记录

1.清除历史记录

2.保留历史记录

3.保存历史记录

1.清除历史记录

●在控制台中点击右键，然后按 Clear console。

●在控制台中键入 clear()。

●从您的 JavaScript 代码内调用 console.clear()。

●按 Ctrl+L （Mac、Windows、Linux）。

2.保留历史记录

启用控制台顶部的 Preserve log 复选框可以在页面刷新或更改之间保留控制台历史记录。 消息将一直存储，直至您清除控制台或者关闭标签。

3.保存历史记录

在控制台中点击右键，然后选择 Save as，将控制台的输出保存到日志文件中。

四、选择执行环境

环境默认为：top（页面的顶部框架）

不过开发者很少需要在 top 以外的任意环境中操作。 输入一个变量，期待返回一个值，只是为了查看该变量是否为 undefined（因为该变量是在不同环境中定义的），这会非常令人困惑。

五、过滤控制台输出

点击 Filter 按钮，可以过滤控制台输出。您可以按严重性等级、按正则表达式模式或者通过隐藏网络消息的方式进行过滤。

                
        按严重性等级进行过滤的说明如下所示：

           选项及显示的内容:

               All             显示所有控制台输出

               Errors          仅显示 console.error() 的输出。

               Warnings        仅显示 console.warn() 的输出。

               Info            仅显示 console.info() 的输出。

               Logs            仅显示 console.log() 的输出。

               Debug           仅显示 console.timeEnd() 和console.debug() 的输出。                

六、其他设置

  设置及说明

   Hide network messages           默认情况下，控制台将报告网络问题。启用此设置将指示控制台不显示这些错误的日志。例如，将不会记录 404 和 500 系列错误。

   Log XMLHttpRequests             确定控制台是否记录每一个 XMLHttpRequest。

   Preserve log upon navigation    在页面刷新或导航时保留控制台历史记录。

   Show timestamps                 在调用时向显示的每条控制台消息追加一个时间戳。对于发生特定事件时的调试非常实用。这会停用消息堆叠。

   Enable custom formatters        控制 JavaScript 对象的格式设置。  

七、log 方法第一个参数支持类似 C 语言 printf 字符串替换模式

  
  Log 支持下面几种替换模式：

                ● %s  代替字符串

                ● %d  代替整数

                ● %f  代替浮点值

                ● %o  代替 Object   

八、console.xxx的五种显示方法

    
        console.log("金刚小葫芦");

        console.info("蛇精");

        console.debug("爷爷");

        console.warn("二娃：妖精，快放了我爷爷"); 

        console.error("三娃：妖精，再不放我爷爷，一口水淹死你");    

九.console.trace()

trace 方法可以查看当前函数的调用堆栈信息，即当前函数是如何调用的

十、console.group, groupCollapsed, groupEnd

                          console.group("第一组");

                console.info("大娃");

                console.log("二娃");

                console.log("三娃"); 

                console.groupEnd();

                console.group("第二组");

                console.debug("四娃"); 

                console.log("五娃"); 

                console.log("六娃"); 

                console.groupEnd(); 

                console.groupCollapsed();

                console.group("第三组");

                console.warn("爷爷");

                console.error("蛇精");

                console.log("七娃");           
        

这 3 个函数用于把 log 等输出的信息进行分组，方便阅读查看。 groupCollapsed 方法与 group 方法一样，只是显示的分组默认是折叠的.

十一、console.time(name)/console.timeEnd(name)

简单来说就是：用来测试 js 函数的执行时间

        
            console.time("test");

            for(var i = 0; i<1000;i++){

                console.log(i);

            } 

          
            console.timeEnd("test");        
    

十二、console.count("title")

count方法用于统计当前代码被执行过多少次，title 参数可以在次数前面输出额外的标题以帮助阅读。

            
                (function(){

                    test();

                    test();

                    test();

                    test();

                }); 

                var test = function(){

                };

                console.count("test被执行次数：");            
        

十三、 console.dir

dir方法是把列出对象的所有方法。比如，我们显示console对象下都些什么方法： console.dir(console);

十四、console.dirxml(node)

把 html 元素的html 代码打印出来,等同于log

十五、console.table(data)

able 方法把data 对象用表格的方式显示出来，这在显示数组或者格式一样的JSON 对象的时候非常有用。 注：table 只支持 FireBug，而且是在 firebug1.6+版本后才有。

JS调试必备的五个debug技巧

    
        1. debugger;JavaScript代码中加入一句debugger;来手工造成一个断点效果。

        2.设置在DOM node发生变化时触发断点,断点的触发条件可以设置成
        节点被删除、节点的属性有任何变化，或它的某个子节点有变化发生。

        3. Ajax 断点,
        XHR断点，或Ajax断点，就像它们的名字一样，可以让我们设置一个断点，
        在特定的Ajax调用发生时触发它们。

        4. sources断点调试

        5. 使用Audits改进你的网站    

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

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

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

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

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

7.参考文献

参考一：脚本之家

参考二：网易博客：月上西楼

参考三：Google Developers官网

参考三：CSDN中文IT网

8.更多讨论

还有没有其他的console的使用方法？

还有没有其他的debug技巧？