很难想象在不向控制台输出信息的情况下在JS上进行开发。隐喻地说， console.log（）是大多数代码疾病的根治方法。

调试几乎就像在您也是罪魁祸首的情况下调查犯罪-Filipe Fortes

但是除了常用的console.log（）函数外，还有许多其他工具可以大大简化此过程。让我们通过简单的示例来看看其中的一些。

console.log（）、. info（）、. debug（）、. warn（）、. error（）

最简单的方法是使用与事件类型相对应的颜色来打印行。

我们使用占位符

为了用消息替换一行中的数据，使用占位符最方便。

％o-对于对象
％s-字符串
％d-十进制或整数

添加CSS

没有足够的信息/警告/错误？没关系！您可以将CSS应用于控制台消息。

是否只想将CSS应用于消息的一部分？这样做是这样的：

console.dir（）

通常，打印我们感兴趣的对象的JSON表示要方便得多。

HTML输出

可以使用与检查器相同的方式检查控制台中的HTML元素。

console.table（）

是否想快速查看JSON列表中的数据？

console.group（）和console.groupEnd（）

为了方便起见，控制台中的消息可以分组。

console.count（）

此函数记录已被调用多少次。

如果传递了可选参数标签，则该函数将记录具有相同标签的调用次数。

如果没有参数调用该函数，则它将记录同一行上的调用次数。

console.assert（）

当您想按条件显示信息时，使用起来很方便。仅会输出assert（）的第一个参数为 false的消息。

console.trace（）

此方法将帮助您了解代码如何到达特定点。

console.time（）

衡量一段代码执行时间的最简单方法。

控制台内存

是否想要最终找出所有可用RAM的去向？

console.clear（）

用于入门。完全清除控制台中的先前消息。

本文中使用的代码

// time and time end console.time("This"); let total = 0; for (let j = 0; j < 10000; j++) { total += j } console.log("Result", total); console.timeEnd("This"); // Memory console.memory // Assertion const errorMsg = 'Hey! The number is not even'; for (let number = 2; number <= 5; number += 1) { console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg}); } // Count for (let i = 0; i < 11; i++) { console.count(); } // group & groupEnd console.group(); console.log('Test message'); console.group(); console.log('Another message'); console.log('Something else'); console.groupEnd(); console.groupEnd(); // Table const items = [ { name: "chair", inventory: 5, unitPrice: 45.99 }, { name: "table", inventory: 10, unitPrice: 123.75 }, { name: "sofa", inventory: 2, unitPrice: 399.50 } ]; console.table(items) // Clear console.clear() // HTML Element let element = document.getElementsByTagName("BODY")[0]; console.log(element) // Dir const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"} console.dir(userInfo); // Color console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small'); // pass object, variable const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"} console.log("Hey %s, here is your details %o in form of object", "John", userDetails); // Default console.log('console.log'); console.info('console.info'); console.debug('console.debug'); console.warn('console.warn'); console.error('console.error');

我们在Chrome中使用console.log（）