老铁，你真的会用 console.log 吗？
共 4157字，需浏览 9分钟
·
2021-09-05 01:08
对于广大的前端工程师来讲，在浏览器或者程序中通过console.log()来调试输出变量信息是常用的一种方式，你可能了解过console.error()、console.warning()，但总是用于输出文本吧，今天看到一篇比较好的外文，做了适当翻译和修饰，供君阅读和参考。
在浏览器控制台打印输出信息，极大地方便了开发者的调试以及解决问题。console.log() 该方法输出的信息就像是解决难缠问题的一剂良药。而且大多数的开发者都想这样——让我在浏览器控制台获得更多与问题有关的信息。我很确定我并不是唯一这样想的人。
除了通常使用console.log()在浏览器中打印输出信息，还有很多不同的方法使得你的调试过程更加容易。接下来让我们通过示例了解一下它们吧。
0x00 console.log( ) | info( ) | debug( ) | warn( ) | error( )
它们会在浏览器控制台中打印原始的字符串内容，并且根据不同的“等级”，而文字的颜色有所不同。
0x01 使用占位符
Javascript提供了很多占位符，可以用于调试输出的有如下：
%o — 对象占位 %s — 字符串占位 **%d ** — 数字占位
0x02 给输出的内容添加CSS
你是否会认为所有的console方法输出的区别不大？好吧，从现在开始它将不再相同，使得您更容易找到你所关心的问题
使用%c这个占位符，可以像写行内样式一样，自定义输出内容的样式
0x03 console.dir()
输出指定对象的JSON格式，其实在console.info()这个方法中，会自动判断是否为对象来决定是否打印输出JSON格式。console.dir()强制做了这件事儿。
0x04 格式化输出HTML元素
可以通过js获取到DOM节点，然后打印输出，效果和在开发者工具中的“Elements”选项卡类似，这里的功能就是对HTMLElements做了一个默认的DOM格式化吧。
0x05 console.table()
想要更加直观/美观展示JSON格式的数据？
0x06 console.group( ) & console.groupEnd( )
它会尽可能地将打印的信息组织在一起，这样的话，我们的输出看起来就更加的有层次、有组织
0x07 console.count( )
count() 用来打印调用次数，一般用在循环或递归函数中。接收一个 label 参数以定制输出，默认直接输出 1 2 3 数字。
0x08 console.assert( )
console 版断言工具，当且仅当第一个参数值为 false 时才打印第二个参数作为输出。
这种输出结果为 error，所以也可被 console.error + 代码级别断言所取代。
0x09 console.trace( )
打印此时的调用栈，在打印辅助调试信息时非常有用。
##0x0A console.time( )
打印代码执行时间，性能优化和监控场景比较常见。
0x0B console.memory
打印内存使用情况。
0x0C console.clear( )
清空控制台输出。
0x0D 总结
通过如上的例子，console为我们发现输出控制台信息的提供了很多方式，那么在日志打印和调试输出的时候，是否就可以做一些关于规范话的内容呐？
比如基于console 封装的logger，在团队项目上做一些更加规范化的日志输出，相信对于团队成员成功解决问题将更加有帮助！
Reference
Mastering JavaScript console.log( ) to become a Pro
下面的代码是例子中用到的参考示例的集合：
// 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');