共计 2127 个字符，预计需要花费 6 分钟才能阅读完成。
JavaScript 中的 console 对象可用于拜访浏览器调试控制台，能够用它在控制台中输入代码中变量的值。
不过大多数人都只过 console.log() 在浏览器控制台中进行输入调试。log 只是 console 对象的一种办法，除了它还有很多十分有用的办法。
1. console.log()
这个办法次要用于将传给它的值输入到控制台。能够给 log() 传递任何类型：能够是字符串，数组，对象，布尔值等。
console.log('JavaScript');
console.log(7);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3]);
console.log({a: 1, b: 2, c: 3});输入：
2. console.error()
这个办法在测试代码时十分有用。它用于将谬误输入到浏览器控制台。谬误音讯默认用红色突出显示。
console.error('Error found');输入：
3. console.warn()
这个办法用于向控制台抛出正告。正告音讯默认以黄色突出显示。
console.warn('Warning!');输入：
4. console.clear()
这个函数用来革除控制台。如果控制台中充斥了音讯和错误信息，能够用它革除控制台，并在控制台中显示一条音讯：Console was cleared。
console.clear()输入：
5. console.time() 与 console.timeEnd()
这两种办法要互相联合应用。每当咱们想晓得一个代码块或函数所破费的工夫时，都能够用 time() 和 timeEnd() 办法。这两个函数都以字符串作为参数。应用时要对这两个函数用雷同的字符串来测量工夫。
console.time('timer'); const hello = function(){console.log('Hello Console!');
}const bye = function(){console.log('Bye Console!');
}hello(); // calling hello();
bye(); // calling bye();console.timeEnd('timer');输入：
6. console.table()
这个办法能够在控制台中生成一个表格，可能进步可读性。它能够主动为数组或对象生成一个表。
console.table({a: 1, b: 2, c: 3}); 输入：
7. console.count()
能够在循环中用它来查看特定的值应用了多少次。
for(let i=0; i<3; i++){console.count(i);
}输入：
8. console.group() 和 console.groupEnd()
group() 和 groupEnd() 能够让咱们把内容分组到一个独自的块中。就像 time() 和 timeEnd() 一样，它们须要以雷同值的标签作为参数。你还能够对组执行开展或折叠操作。
console.group('group1');
console.warn('warning');
console.error('error');
console.log('I belong to a group');
console.groupEnd('group1');
console.log('I dont belong to any group');输入：
9. 为你的日志增加款式
还能够在控制台日志增加款式，使日志看起来更丑陋。只须要把 CSS 款式作为 log() 函数的第二个参数，同时第一个参数以 %c 开始即可。
const spacing = '10px';
const styles = `padding: ${spacing}; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em;`;
console.log('%cI am a styled log', styles);输入：
总结
console 对象对代码调试十分有用。然而很多人通常只用 log 函数。从当初开始应该充分利用 console 对象，以便更轻松地调试并活泼地查看浏览器日志。
本文首发微信公众号：前端先锋
欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章
欢送持续浏览本专栏其它高赞文章：
- 深刻了解 Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13 个帮你进步开发效率的古代 CSS 框架
- 疾速上手 BootstrapVue
- JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
- WebSocket 实战：在 Node 和 React 之间进行实时通信
- 对于 Git 的 20 个面试题
- 深刻解析 Node.js 的 console.log
- Node.js 到底是什么？
- 30 分钟用 Node.js 构建一个 API 服务器
- Javascript 的对象拷贝
- 程序员 30 岁前月薪达不到 30K，该何去何从
- 14 个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩大插件
- Node.js 多线程齐全指南
- 把 HTML 转成 PDF 的 4 个计划及实现
- 更多文章 …
