JavaScript 控制台不仅仅是 console.log()

JavaScript 中，最直接的故障排除方法之一是使用 console.log 记录日志。但控制台还提供了许多其他方法可以帮助您更好地调试。
让我们从它开始。记录一个字符串或多个 JavaScript 对象是最基本的用例。
就像这样：

console.log('Where am I?');

假设我们有很多对象并且需要将它们记录到控制台中。

const foo = { id: 1, height: '200px', width: '100px' };
const bar = { id: 2, height: '250px', width: '200px' };

只有逐个 console.log(variable) 才是最直观的记录方式。当我们查看它在控制台上的显示方式时，问题就更加明显了。 正如你所见，变量名是不可见的。有时，当你有大量输出并且必须逐个展开才能理解它是哪个对象或变量时，这会变得困难或烦人。 避免这种情况的一个解决方案是使用 console.log，如下所示：

console.log({ foo, bar });

这也减少了我们代码中的 console.log 行数。

console.warn() 和 console.error()

根据具体情况，您可以使用 console.warn() 或 console.error() 添加日志，以确保控制台更具可读性。在某些浏览器中，console.info() 还会显示“i”图标。

控制台.group()

这可以在将相关详细信息分组或嵌套在一起时使用，以便于您轻松阅读日志。
如果您在函数中有几个日志语句，并且希望每个语句的作用域清晰可见，也可以使用这种方法。
例如，如果您记录购物车的详细信息：

console.group('Shopping Cart');
console.log('user: John Doe');
// Group Start
console.group('Shopping item');
console.log('Name: JS Book 1');
console.log('Author: Unknown author');
console.log('ISBN: 048665088X');
console.groupEnd();
// Group strat
console.group('Shopping item');
console.log('Name: JS Book 2');
console.log('Author: Unknown author');
console.log('ISBN: 048665087X');
console.groupEnd();
console.groupEnd();

控制台.table()

我们可以更进一步，将所有这些放在一个表中，使其更具可读性。每当您有具有共同属性的对象或对象数组时，请使用 console.table() 。这里可以使用 console.table({foo, bar }) ，控制台将显示：

控制台.trace()

这将向您显示到达调用 console.trace() 点所采用的调用路径

控制台.time()

启动一个计时器，用于跟踪操作的耗时。每个计时器都有一个唯一的名称，一个页面上最多可以运行 10,000 个计时器。当您使用相同的名称调用 console.timeEnd() 时，浏览器将输出自计时器启动以来经过的时间（以毫秒为单位）。

console.time();
for (let i = 0; i < 100000; i++) {
  // some code
}
console.timeEnd();

控制台.clear()

清除控制台。控制台的内容将被替换为类似“控制台已清除”之类的信息性消息。

控制台.dir()

console.dir 是在控制台中查看指定 JavaScript 对象的所有属性的方法，通过它我们可以轻松获取对象的属性。

喜欢学习吗？

在Twitter上关注我，我会发布所有关于 JavaScript、AI、DevOps、VR/AR、科技和科学的最新资讯！也可以在LinkedIn上关注我！