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 个计划及实现
- 更多文章 …