大家好,我是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,而在有些界面切换的状态是需要保存,因为其他页面也需要做状态判定,甚至有些上传数据到服务器,以便下次登录的时候再再次取用 判定状态。
问题三:什么情况下不适合用有限状态机去处理问题?
有限状态机 虽然在很多情况下都适用但是有一些频繁交互,频繁判定的游戏就不适合用有限状态机的理论。
感谢梁耀|王栋两位师兄,此教程是在他们之前技术分享的基础上完善而成。
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~