F12Console的用法,以及如何Debug程序

大家好,我是IT修真院深圳分院第4期学员梁耀,一枚正直纯洁善良的web程序员。

今天给大家分享:

【JS-01】F12Console的用法,以及如何Debug程序

Web小课堂

分享人:梁耀

1.背景介绍

什么是console?

Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中。Chrome和FireFox都支持console。控制台以及浏览器内置Console对象的出现,给前端开发调试带来了极大的便利。

2.知识剖析

console的用法

1、console.log 用于输出普通信息

2、console.info 用于输出提示性信息

3、console.error用于输出错误信息

4、console.warn用于输出警示信息

5.console.groupEnd结束一组输出信息

6.console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台。

7.console.count当你想统计代码被执行的次数(经常用到)

8.console.dir 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等。

9.console.time(name)/console.timeEnd(name)用于函数的计时

如何进行断点调试?


从左到右,各个图标表示的功能分别为:

Pause/Resume script execution:暂停/恢复脚本执行(程序执行到下一断点停止)。

Step over next function call:执行到下一步的函数调用(跳到下一行)。

Step into next function call:进入当前函数。

Step out of current function:跳出当前执行函数。

Deactive/Active all breakpoints:关闭/开启所有断点(不会取消)。

Pause on exceptions:异常情况自动断点设置。

拓展思考

为什么不用alert?

用alert调试方式对开发者太不友好;每次执行结束都需要点击一次弹窗;而且有时候弹窗会遮住一些页面效果;

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

另外,如果在循环中使用alert,会弹出很多个窗口

参考文献

JavaScript程序员必备的5个debug技巧

前端开发中的JS调试技巧

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

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

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

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

你可能感兴趣的:(F12Console的用法,以及如何Debug程序)