大家好，我是IT修真院成都分院第九期的学员徐炜，一枚正直纯洁善良的前端程序员。今天给大家带来的是CONSOLE的用法，以及DEBUG技巧。
一.背景介绍
调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。 例如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。
二.知识剖析
1、传统调试方式——ALERT：在互联网刚刚起步的时代，网页前端还主要以内容展示为主，浏览器脚本还只能为页面提供非常简单的辅助功能的时候。 那个时候，网页主要运行在以IE6为主的浏览器中，JS的调试功能还非常弱，只能通过内置于Window对象中的alert方法来调试。
2、新兴调试方式——CONSOLE：传统的alert调试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的窗口不太美观，会遮挡部分页面内容。 另一方面，alert的调试信息，必须在程序逻辑中添加类似”alert(xxx)”这样的语句，才能正常工作，并且alert会阻碍页面的继续渲染。这就意味着开发人员调试完成后，必须手动清除这些调试代码，很繁琐。 所以，新一代的浏览器Firefox、Chrome等，都相继推出了JS调试控制台，支持使用类似”console.log(xxx)”的形式，在控制台打印调试信息，而不直接影响页面显示。
三.常见问题
如何进行断点调试？
四.解决方案
断点，调试器的功能之一，可以让程序中断在需要的地方，从而方便其分析。 也可以在一次调试中设置断点，下一次只需让程序自动运行到设置断点位置，便可在上次设置断点的位置中断下来，极大的方便了操作，同时节省了时间。 简单来说，JS断点调试，即是在浏览器开发者工具中为JS代码添加断点，让JS执行到某一特定位置停住，方便开发者对该处代码段的分析与逻辑处理。
五.编码实战
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()方法。
实战演示demo，详见视频。
六.扩展思考
为什么不提倡用alert进行调试？
一方面，传统的alert调试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的窗口会遮挡部分页面内容，也不太美观。 另一方面，alert的调试信息会中断代码，阻碍页面的继续渲染。这就意味着开发人员调试完成后，必须手动清除这些调试代码，十分繁琐。另外，如果在循环中使用alert，还会弹出多个窗口。
七.参考文献
参考一： 你真的了解console吗？
参考二：一探前端开发中的JS调试技巧
八.更多讨论
问题一：为什么不推荐使用有限状态机的库？
因为有限状态机的库需要一定的学习成本，而且局限性比较高，很多种情况不能使用，只能在红绿灯或者水的液化固化这种比较简单的情况下使用，而如果模拟 日常其他生活中比较复杂的情况，还是自己写逻辑判定会比较好。
问题二：有限状态机为什么要用到传值？
在单一的简单界面是不需要用到传值的，比如像我自己写的这个小demo，而在有些界面切换的状态是需要保存，因为其他页面也需要做状态判定，甚至有些上传数据到服务器，以便下次登录的时候再再次取用 判定状态。
问题三：什么情况下不适合用有限状态机去处理问题？
有限状态机 虽然在很多情况下都适用但是有一些频繁交互，频繁判定的游戏就不适合用有限状态机的理论。
感谢梁耀|王栋两位师兄，此教程是在他们之前技术分享的基础上完善而成。
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~