f12弹出debug_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，会弹出很多个窗口

参考文献

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

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

技能树.IT修真院

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

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