F12 console的用法，以及如何debug程序？

这里是修真院前端小课堂，本篇分析的主题是

【F12 console的用法，以及如何debug程序？】

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【F12 console的用法，以及如何debug程序？】

 

1.背景介绍

Chrome中Console是用于显示JS和DOM对象信息的单独窗口。并且向JS中注入1个console对象，

使用该对象 可以输出信息到Console窗口中。在具备调试功能的浏览器上，window对象中会注册一个名为

console的成员变量，指代调试工具中的控制台，console有很多方法，比如我们最常用的log()

1.console对象

console对象代表浏览器的javascript控制台，主要有两个作用：1.显示网页代码运行时的错误信息。2.提供一个命令行

接口，用来与网页代码互动

2.如何使用开发者工具调试js代码

使用console对象的内置方法，或者使用开发者工具的断点调试功能。

 

2.知识剖析

1.console显示信息的命令

.log()方法：在console窗口显示信息

.log用于输出普通信息

.info用于输出提示性信息

.error用于输出错误信息

.warn用于输出警示信息

.debug用于输出调试信息

.table()方法,把有复合数据的对象作为表格显示

.assert()方法，验证条件并输出

.time(),.timeEnd()方法，计算一个操作消耗的时间

其它方法：

.group(),.groupend()方法：将显示信息分组

.dir()显示对象的所