本文已参与「新人创作礼」活动,一起开启掘金创作之路
控制台日志输出,别再只会 console.log
了,其实Console
对象还提供了很多方法。比如console.info()
、console.warn()
、console.error()
等等,下面我们就来看看这些常用方法。
console.info()
console.log()
是我们再熟悉不过了,我们经常使用它在控制台输出信息进行代码调试,这里就不过多介绍了,首先我们来看看console.log()
的好兄弟,console.info()
;
console.info()
和 console.log()
类似,用于在控制台输出一条日志信息;
javascript console.info("我是console.info"); console.log("我是console.log");
在Chrome浏览器下,控制台输出效果相同:
但在其他浏览器下,比如:IE浏览器下输出 console.info()
前会有一个小图标:
console.warn()
console.warn()
方法用于在控制台输出警告信息;
当我们与他人协同开发过程中,别人调用我们的方法时,漏传或少传参数的时候可以使用console.warn()
给出警告;
javascript console.warn("我是一条警告信息");
console.error()
console.error()
方法用于在控制台输出错误信息;
我们可以将捕获到的错误信息通过console.error()
输出到控制台;
例如:捕捉输出因接口参数(或网络情况等)变化而导致错误的信息;
xxxx.post('请求路径',{参数}) .then(res => { xxxxxx }) .catch(error => { console.error(error); })
javascript console.error("我是一条错误信息");
ps:
console.error()
只是在控制台输出一条错误信息,并不会阻止程序的执行
console.clear()
console.clear()
方法用于清除控制台输出的信息;
当控制台输出日志信息过多时,清除控制台是必要的,以便我们快速找到需要查看的日志;
javascript console.clear();
console.time() 、timeLog()、timeEnd()
console.time()
、timeLog()
、timeEnd()
联合使用,可以在控制台输出某段程序的运行时间;
- console.time()开始计时;
- console.timeLog()相当于console.Log();
- console.timeEnd()结束计时;
我们可以使用这些方法用来测试某段程序的运行效率;
javascript console.time("ForLoop"); for (let i = 0; i < 3; i++) { console.timeLog('ForLoop'); } console.timeEnd("ForLoop");
输出样式
Console
对象的这些方法可以使用%c
指令添加样式,出现在%c
后的字符串将使用参数中样式;
单次使用%c
;
console.log("%cMy message", "color: yellow; background-color: blue;padding: 2px");
多次使用%c
;
console.log("0 %c123 %c456", "color: red", "color: orange", "789");
代码示例
console.info("我是%cconsole.info", "color: yellow; background-color: blue;padding: 2px"); console.log("我是%cconsole.log", "color: yellow; background-color: blue;padding: 2px"); console.warn("我是%c一条警告信息", "color: yellow; background-color: blue;padding: 2px"); console.error("我是%c一条错误信息", "color: yellow; background-color: blue;padding: 2px"); console.time("%cForLoop", "color: yellow; background-color: blue;padding: 2px"); for (let i = 0; i < 3; i++) { console.timeLog("%cForLoop", "color: yellow; background-color: blue;padding: 2px"); } console.timeEnd("%cForLoop", "color: yellow; background-color: blue;padding: 2px");