前端调试必备：CHROME CONSOLE控制台的使用：诊断并记录

chrome console控制台日志记录是检查您的页面或应用程序的功能的强大方法。 我们从console.log（）开始，探索其他高级用法。

这篇文章主要讲以下几个内容：

使用log（）进行基本的日志记录

使用error（）和console.warn（）来引人注目的东西

使用group（）和console.groupEnd（）来分组相关消息，避免混乱

使用assert（）显示条件错误消息

写入控制台console

使用console.log（）方法进行任何基本的日志记录到控制台。 它将一个或多个表达式作为参数，并将其当前值写入控制台，将多个参数连接成空格分隔的行。

在你的JavaScript中执行这行代码(注意在console下面写这段代码的时候，换行是shift+Enter)

那么，控制台就会输出以下信息：

自动完成命令

当您键入控制台时，控制台会自动显示一个与您输入的文本相匹配的相关方法的自动完成下拉菜单。 这包括您执行的以前的命令。这是命令的提示，能更好地帮你记得console有哪些命令：

组织控制台输出

消息放在一个组里

您可以将相关输出与组命令一起放在一个组里。 console.group（）命令使用一个字符串参数来设置组的名称。 在您的JavaScript中调用它之后，控制台将开始将所有后续输出组合在一起。

要结束分组，只需在完成后调用console.groupEnd（）。

示例输入：

例子输出：

嵌套组

日志组也可以彼此嵌套。 这对于一次看到一个较小的小组很有用。

此示例显示登录进程的身份验证阶段的日志组：

输出的结果如下：

自动折叠组

当大量使用群体时，在发生的事情看不到的时候可能非常有用。 对于这些时间，您可以通过调用console.groupCollapsed（）而不是console.group（）来自动折叠组，这样一个组就可以自动折叠起来，不会因为消息太多而忽略其他。

groupCollapsed() 的输出：

错误和警告

错误和警告的行为与正常记录相同。 唯一的区别是error（）和warn（）有样式来引起注意。

console.error（）

console.error（）方法显示红色图标和红色消息文本：

输出如下：

console.warn（）

console.warn（）方法显示带有消息文本的黄色警告图标：

输出如下：

Assertions

console.assert（）方法仅在其第一个参数的计算结果为false时才有条件地显示错误字符串（第二个参数）。

一个简单的Assertions和它如何显示

只有当属于list元素的子节点数大于500时，以下代码才会在控制台中导致错误消息。

如何在控制台中显示断言失败：

字符串替换和格式

传递给任何日志记录方法的第一个参数可能包含一个或多个格式说明符。格式说明符由一个％符号和一个字母组成，该字母指示适用于该值的格式。字符串后面的参数按顺序应用于占位符。

以下示例使用字符串和数字格式化程序将值插入到输出字符串中。你会在控制台上看到“Sam has 100 points”。

格式说明符的完整列表：

此示例使用数字说明符来格式化document.childNodes.length的值。它还使用浮点说明符来格式化Date.now（）的值。

代码：

输出如下：

使用CSS设计控制台输出

CSS格式说明符允许您自定义控制台中的显示。用说明符%c开始字符串，并给出你希望应用的样式作为第二个参数，就是说第二个样式为CSS的样式。 试试这个代码：

让你的输出字体是蓝色的，而且是large的

将DOM元素格式化为JavaScript对象

默认情况下，DOM元素以HTML的表示形式登录到控制台，但是有时您想要以JavaScript对象的形式访问DOM元素并检查其属性。您可以使用％o字符串说明符来执行此操作（请参阅上文），或者使用console.dir来实现相同的操作：

本文内容来自：chrome console控制台的使用： 诊断并记录 – Break易站