Console的用法，以及Debug技巧

Console的用法，以及Debug技巧

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

一.背景介绍

什么是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开发者工具不完全指南

参考三：

                    href="https://developers.google.com/web/tools/chrome-devtools/console/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3">Google

                Developers官网

参考三：CSDN中文IT网

8.更多讨论

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

鸣谢

感谢大家观看

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院   

  “我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

   这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。

   快来与我一起学习吧~http://www.jnshu.com/login/1/21109035