1.背景介绍

调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。 例如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。

2.知识剖析

一、传统调试方式——Alert

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

二、新兴调试方式——Console

传统的alert调试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的窗口不太美观，会遮挡部分页面内容。 另一方面，alert的调试信息，必须在程序逻辑中添加类似”alert(xxx)”这样的语句，才能正常工作，并且alert会阻碍页面的继续渲染。这就意味着开发人员调试完成后，必须手动清除这些调试代码，很繁琐。 所以，新一代的浏览器Firefox、Chrome等，都相继推出了JS调试控制台，支持使用类似”console.log(xxx)”的形式，在控制台打印调试信息，而不直接影响页面显示。 打开控制台来尝试一下。

3.常见问题

如何进行断点调试

4.解决方案

5.编码实战

1. console.log( )

普通输出方法，参数可以为任何对象

2. console.table()

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

3.console.count([label])

输出执行到该行的次数

4.console.time(name)

计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上，name参数可作为标签名。

5.console.dir(object)

将传入对象的属性，包括子对象的属性以列表形式输出。

6.console.group

让控制台输出的语句产生不同的层级嵌套关系，每一个console.group()会增加一层嵌套，相反要减少一层嵌套可以使用console.groupEnd()方法。

6.扩展思考

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

一方面，传统的alert调试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的窗口会遮挡部分页面内容，也不太美观。 另一方面，alert的调试信息会中断代码，阻碍页面的继续渲染。这就意味着开发人员调试完成后，必须手动清除这些调试代码，十分繁琐。另外，如果在循环中使用alert，还会弹出多个窗口。

7.参考文献

参考一： 你真的了解console吗？

参考二：一探前端开发中的JS调试技巧

8.更多讨论

鸣谢

感谢大家观看

BY :梁耀|王栋|徐炜