LeeDaisen

切换主题

扫码开始移动端阅读

彻底搞懂console对象

共
2582
字
需要≈
12.91
分钟
JavaScript

console 对象是 JavaScript 中最常用的调试工具之一。通过不同的方法，console 可以帮助开发者输出信息、警告、错误等。在开发中，合理地使用 console 能有效地提高开发效率，但滥用也可能导致一些问题。本文将详细介绍 console 的各种方法，如何美化控制台输出，以及在使用中的一些建议和注意事项。

状态类方法 ​

详情 info() ​

console.info() 向 web 控制台输出一个通知信息。仅在 Firefox，web 控制台的日志中的项目旁边会显示一个小的‘I‘图标

js
console.info("这是一个提示信息");  // 输出: 这是一个提示信息

日志 log() ​

错误 error() ​

console.error() 用于打印错误信息，通常以红色字体显示，表明发生了错误。

js
console.error("这是一个错误信息");  // 输出: 这是一个错误信息

参数：
与debug方法相同 debug()

警告 warn() ​

console.warn() 用于打印警告信息，通常以黄色字体显示，表示代码可能存在潜在问题。

js
console.warn("这是一个警告信息");  // 输出: 这是一个警告信息

参数：
与debug方法相同 debug()

调试 debug() ​

console.debug() 方法将一条消息输出到 web 控制台,它的样式和log,info是一样的。

js
console.debug("这是一个调试信息");  // 输出: 这是一个调试信息

参数：

  • obj1 ... objN 被用来输出的 Javascript 对象列表，最后输出的字符串是各个对象依次拼接的结果。
  • msg 一个包含零个或多个子串的 Javascript 字符串。
  • subst1 ... substN 各个消息作为字串的 Javascript 对象。这个参数可以让你能够控制输出的格式。

功能类方法 ​

对象内部 dir() ​

console.dir() 是一个非常实用的方法，它可以以更友好的格式显示 JavaScript 对象的内部结构。

js
console.dir(document.body);
// 将会输出完整的body的对象，包括原型链与属性

参数：

  • object 对象，该对象将会以更友好的格式显示。

断言 assert() ​

console.assert() 如果断言为 false，则将一个错误消息写入控制台。如果断言是 true，没有任何反应。

参数：

  • assertion 一个布尔表达式。如果 assertion 为假，消息将会被输出到控制台之中。
  • obj1 ... objN 被用来输出的 Javascript 对象列表，最后输出的字符串是各个对象依次拼接的结果。
  • msg 一个包含零个或多个子串的 Javascript 字符串。
  • subst1 ... substN 各个消息作为字串的 Javascript 对象。这个参数可以让你能够控制输出的格式。
js
const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});

清空 clear() ​

console.clear() 方法会清空控制台，但前提是该控制台允许清空。像浏览器运行的图形控制台就允许清空，而像 Node 运行的终端上显示的控制台则不支持它，调用该方法将不会产生任何效果（也不会报错）。

js
console.clear();  // 清空控制台

参数：
无

计数 count() 和 重置计数countReset() ​

console.count() 方法会记录调用 count() 的次数。
console.countReset() 用于重置 count() 的计数器。

js
console.count("点击次数");  // 第一次输出: 点击次数: 1
console.count("点击次数");  // 第二次输出: 点击次数: 2
console.countReset("点击次数");  // 重置计数器 
console.count("点击次数");  // 第三次输出: 点击次数: 1

参数：

  • label 计数器标签，用于区分不同的计数器。类型String

格式化 dirxml() ​

DANGER

非标准: 好像只有chrome支持,开发的时候可以用，但是生产环境别用，否则报错可能影响正常业务,如果传入的不是元素对象，将会类似普通dir方法输出

console.dirxml()方法将对象格式化成 XML 格式，常用于调试 HTML 元素。

js
console.dirxml(document.body);  // 输出: <body>...</body>

参数：

  • element 对象，该元素对象将会以更友好的格式显示。

分组 group() 与 groupEnd() ​

console.group() 与 console.groupEnd() 用于将多条输出信息分组，提供层次感。

js
console.group("用户信息");
console.log("Name: 肯了个德");
console.log("Type: 个人博客");
console.groupEnd();
// 输出
    // 用户信息
        // Name: 肯了个德
        // Type: 个人博客

TIP

groupCollapsed的方法与group()方法类似，但默认是折叠的。

console.log() 是最基础的输出方法，用于打印一般信息。

js
console.log("普通信息");  // 输出: 普通信息

参数：
与debug方法相同 debug()

性能 profile() 与 profileEnd() ​

console.profile() 与 console.profileEnd() 用于分析代码性能，常用来检测页面加载时间。

WARNING

注意：该特性是非标准的，请尽量不要在生产环境中使用它！
在 console.profile() 之后立刻调用此 API 可能会导致其无法工作。为解决此问题，请在 setTimeOut 中至少延迟 5 毫秒后再调用。

js
console.profile("性能分析");
setTimeout(() => {
    console.profileEnd("性能分析");
} , 10);
// 输出:
// 性能分析报告“性能分析”已开始
// 4034 我并不知道这个值代表这什么 但是这是一个不确定的数。相同的代码执行多次也不一定相同
// 性能分析报告“性能分析”已完成。

参数：

  • label 性能分析器标签，用于区分不同的性能分析器。类型String

表格 console.table() ​

console.table() 可以将数组或对象以表格形式输出，非常适合查看复杂的数据结构。

INFO

这个方法需要一个必须参数 data，data 必须是一个数组或者是一个对象；还可以使用一个可选参数 columns。
它会把数据 data 以表格的形式打印出来。数组中的每一个元素（或对象中可枚举的属性）将会以行的形式显示在表格中。
表格的第一列是 index。如果数据 data 是一个数组，那么这一列的单元格的值就是数组的索引。如果数据是一个对象，那么它们的值就是各对象的属性名称。注意（在 FireFox 中）console.table 被限制为只显示 1000 行（第一行是被标记的索引）。

js
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];
console.table(users);

输出：

（索引）nameage
0Bob30
1Alice25

记时 console.time() 与 console.timeEnd() 与timeLog() ​

console.time() 与 console.timeEnd() 用于测量代码执行时间，适合用于性能分析。

js
console.time("计时器");
for (let i = 0; i < 100; i++) {
    console.timeLog("计时器");
    // 输出: 计时器: 0.345ms...
    // 会循环100次
}
console.timeEnd("计时器");  // 输出: 计时器: 2.345ms

参数：

  • label 计时器标签，用于区分不同的计时器。类型String

时间戳 timeStamp() ​

console.timeStamp() 用于在控制台中添加一个时间戳,来记录代码执行的时间。

DANGER

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！

js
console.timeStamp();  // 输出: Time stamp: 1638720495666.628

参数：

  • label 时间戳标签，用于区分不同的时间戳。类型String

堆栈 trace() ​

console.trace() 用于输出当前执行堆栈信息，常用于调试。

js
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

// 输出:
// console.trace
// bar
// foo
// （匿名）

任务 createTask(String) ​

返回一个 Task 实例，该实例会将当前堆栈轨迹与创建的 task 对象相关联。您稍后可以使用此 task 对象运行函数（下例中的 f）。task.run(f) 可执行任意载荷，并将返回值转发回调用方。

js
const f = ()=> console.log(111)
const task = console.createTask('name');
task.run(f)

TIP

我也不太懂这个具体有什么应用场景，可以能在调试中是有用的吧。

原型链与继承 ​

console 对象的原型链 ​

在 JavaScript 中，console 对象本身是一个内置对象，它的原型链如下：

plaintext
console --> Object.prototype --> null

由于 console 是一个对象，它继承了 Object.prototype 上的方法，例如 hasOwnProperty、toString 等。然而，console 的核心功能是由浏览器实现的，与普通的 JavaScript 对象不同。

继承的意义 ​

  • 扩展性：因为 console 是一个对象，所以你可以通过扩展它来添加自定义的调试方法。不过，直接修改内置对象的原型链通常不被推荐，因为这可能会引起维护性问题和不可预见的错误。
  • 方法重写：你可以重写 console 对象的方法，例如 console.log，以添加额外的调试信息或格式化输出。

示例：重写 console.log ​

js
const originalLog = console.log;
console.log = function(message) {
  originalLog('%c[LOG]', 'color: green;', message);
};

console.log("Hello, World!");  // 输出带有绿色 [LOG] 标签的消息

其他技巧 ​

你可以使用 CSS 样式来美化控制台输出，使得信息更具视觉吸引力和可读性。

js
console.log('%c这是一个蓝色的大字信息', 'color: blue; font-size: 20px;');
console.log('%c红色背景的警告', 'background: red; color: white; padding: 2px;');

在实际开发中，这些样式能帮助你更好地分类和强调重要的信息。

使用建议 ​

  1. 明确目的：使用 console 时，首先要明确输出的目的是什么。例如，调试、错误捕捉还是提供信息反馈。
  2. 分类输出：通过不同的方法输出不同类别的信息，例如：log 用于一般信息，warn 用

于警告信息。
3. 避免滥用：在开发过程中尽量控制 console 的使用，特别是在生产环境中，应去除不必要的 console 语句。
4. 样式化输出：使用样式来突出重要信息，但要适度，以免影响控制台的整体可读性。
5. 定期清理：定期检查和清理 console 语句，避免在代码中遗留大量的调试信息。

总结 ​

console 对象是 JavaScript 中功能强大且易用的调试工具。它提供了多种方法用于不同场景下的信息输出，如常用的 log、error、warn，以及更高级的 table、dir 等。掌握这些方法并合理运用，可以大大提高开发效率。但同时也需要注意避免滥用，特别是在生产环境中，应去除不必要的 console 语句。通过样式化输出和对原型链的了解，开发者可以更有效地利用 console 进行调试工作。

上次更新: