前言

在使用 Js 开发过程中，你是否也曾经历过这样的场景：代码跑着跑着突然崩了，然后一脸茫然地盯着屏幕，心里默念：“这到底哪里出问题了？“接着，下意识地敲下了那句经典的console.log("Here!")，试图从茫茫代码中找到问题的蛛丝马迹

没错，console.log是我们调试代码的“利器”，但它真的只是console世界的冰山一角！本文，就带你走进console的奇妙世界，看看这个看似简单的工具，隐藏了多少强大的功能

常用方法

从基础的日志输出，到高级的性能分析，再到创意的样式美化，console不仅能帮你快速定位问题，还能让你的调试过程变得有趣又高效

console.log

log方法可以说是最常用的日志输出方法，它的功能很简单，就是把东西打印出来；无论是字符串、数字、对象，还是数组，它都能搞定

需比较注意的是，在某些场景下输出对象时，推荐使用console.log(JSON.parse(JSON.stringify(obj)))的方式输出序列化后的对象值，以确保输出的对象值是当前输出时刻的值；不然，在大多数浏览器下可能输出的是随着程序运行，值不断变化的对象的实时结果；在某些环境下，还可能输出[object Object]结果

占位符

console.log除了打印东西外，它还可以玩一些花样，如：给输出加上样式

以上代码可在浏览器控制台输出如下内容：

以上代码之所以可以渲染出CSS样式，主要是使用了%c占位符，它会将其后的字符串内容渲染上参数中对应的CSS样式

如上：

第一句输出有两个参数，一个为占位符跟内容，一个为一段CSS样式描述，其代表第一个参数的%c占位符后文本的CSS样式

第二局输出有三个参数，第一个为一段含占位符内容，后两个为对应占位符的CSS样式，它们分别控制对应%c占位符后跟随内容的渲染样式

需注意的是，当使用了%c占位符，其后的参数必须为对应的占位符提供合法的CSS样式，否则将无效；如第一个参数有一个%c占位符，则其后紧随的一个参数(即第二个)必须为合法的CSS样式文本，会渲染占位符后面的文本；如第一个参数有两个%c，则紧随其后的两个参数(第二个与第三个)必须为合法的CSS样式文本，其分别渲染对应占位符后面的文本；以此类推

利用这一特性，我们可以在浏览器控制台输出很多个性化的内容，丰富站点的标识度；当然，%c也不是所有CSS属性均支持，主要支持属性如下：

• background，除了寻常的颜色，还可以输出背景图
• border
• border-radius
• box-decoration-break
• box-shadow
• clear和float
• color
• cursor
• display
• font
• line-height
• margin
• outline
• padding
• 类text-*属性
• white-space
• word-spacing和word-break
• writing-mode

以上属性也并非绝对支持，具体得看对应浏览器的支持程度

除了%c占位符添加样式的作用外，console还提供了许多其它实用的占位符，大致如下

使用效果大致如下：

其中比较有意思的是%o与%O的作用，两者都用于输出对象，前者输出对象的普通形式，后者以树状可展开形式输出对象的原始形式；其在普通对象下作用不大，常用于输出一些复杂对象，如DOM元素

其在浏览器控制台对应输出如下：

如上，直接输出一个DOM元素，其会以标签形式输出，得不到多少有用的信息，如需输出标签对象本身，则需使用%O占位符

日志级别

debug、info、warn、error也可用于输出内容，同时其还可以区分不同的输出等级

以上代码在浏览器控制台输出结果如下：

可以明显地看出，不同级别会有不同的样式渲染，同时，warn与error还会输出对应的堆栈信息，可以展开查看

在控制台，还可以通过选项选择对应级别输出的显示情况

各方法对应的日志等级

如只显示error级别输出等

调试技巧

除了简单地输出调试外，console还提供了一些有趣的方法用于更方便地调试

断言调试

console.assert就像个“侦探”，它会检查一个条件是否为真，如果条件为真，则没有任何反应，不会输出；如果条件为假，它就会输出一条错误信息

这个方法特别适合用来验证代码中的假设是否成立

追踪调用堆栈

有时候，代码的执行路径像迷宫一样复杂，如果我们需要获取调试位置的执行路径，获取其是由那些文件一步步执行过去的，此时，就可以使用console.trace，它会输出当前的调用堆栈，告诉你代码是怎么一步步走到这里的

方法无需传参，运行后，可看到一条清晰的调用路径

计数与重置

有时候，我们可能需要统计某段代码被执行了多少次，此时可以使用console.count，其类似一个“计数器”

count方法接收一个字符串参数，表示计数器的标签，用于标识计数器，当重置计数器时也需用到

countReset方法同样接收一个字符串参数，表示重置某个计数器，参数为计数器的标签

高级功能

除了以上的输出方法外，console还提供了许多更加复杂、高级的输出

表格化输出

console.table可用于格式化显示数组或对象，将一堆杂乱的数据整理成一张漂亮的表格

上侧代码在控制台输出如下

运行后，可看到一个清晰的表格，数据一目了然

该方法除了作为数据的参数外，还可接收一个可选的参数，用于控制表格输出数据的字段，为一个数组

分组输出

当调试的日志信息太多时，可以用console.group和console.groupEnd把它们分组显示

其在控制台输出如下

groupCollapsed与group功能基本一致，只不过前者的输出默认会折叠；groupEnd用于结束分组

该系列方法适用于组织复杂的日志输出

性能测量

当我们想知道某段代码执行了多久时，可使用console.time和console.timeEnd方法

• time：启动一个计时器，可接收一个字符串参数，表示计时器的名称
• timeLog：在计时器运行期间，输出此时计时器的值，可接受一个字符串参数，为当前计时器的名称
• timeEnd：停止一个计时器，可接收一个字符串参数，为计时器的名称

这个功能可以用于测试代码运行速度，以便优化代码性能

查看对象和 DOM 结构

针对不同对象，有时候，普通的log输出，可能不是我们想要的效果，其可能输出toString的结果，但我们可能需要的是原本的对象，包含属性的输出，此时即可使用dir及dirxml

其控制台输出结果如下：

• dir：以交互式树状结构显示 JavaScript 对象，适合用于查看对象的属性和方法
• dirxml：接收一个element对象，用于以XML/HTML 树状结构显示 DOM 元素，比较适合查看 DOM 节点的层次结构

清空控制台

当控制台被日志塞满了，可以用console.clear一键清空

总结

console不仅仅是console.log，它是一个功能强大的调试工具，从基础的日志输出，到高级的性能测量，再到创意的样式美化，console都能帮你搞定；当你需要调试复杂的项目时，可以尝试以上功能，可以让调试代码也变得很有趣！