console.log() 的小技巧

众所周知，我们开发项目通常会使用前端框架，前端调试变得更加有难度，除了用一些插件以外，使用console.log()是最多的。console.log()为我们提供了很多打印的方法，下面是一些console对象包含的方法：

一、基本打印

1.console.log()

console.log()就是最最基本和常用的用法。它可以再JavaScript代码的任何地方，这样就可以在浏览器的控制台中看到打印信息。基本使用方法如下：

let name = "HHHHH";
let age = 18;
console.log(name)                    // HHHHH
console.log(`my name is: ${name}`)   // HHHHH
console.log(name, age)               // HHHHH 18
console.log("message:", name, age)   // message: HHHHH 18

console.log()还支持以下方式：

let name = "HHHHH";
let age = 18;
let height = 168;
console.log('Name: %s, Age: %d', name, age)     // Name: HHHHH, Age: 18
console.log('Age: %d, Height: %d', age, height) // Age: 18, Height: 168

这里是将后面的变量赋值给了前面的占位符的位置，他们是一一对应的。在console.log中，支持的占位符格式如下：

• 字符串：%s
• 整数：%d
• 浮点数：%f
• 对象：%o或者%O
• CSS样式：%c

通过以上可以看到，除了最基本的几种类型之外，它还支持定义CSS样式：

let name = "HHHHH";
console.log('My Name is %cHHHHH', 'color: skyblue; font-size: 30px;') 

打印结果如下 （但是好像并没有什么用）。：

这种方法可能有用的地方就是打印图片，用来查看图片是否正确：

 console.log('%c ','background-image:url("http://iyeslogo.orbrand.com/150902Google/005.gif");background-size:120% 120%;background-repeat:no-repeat;background-position:center center;line-height:60px;padding:30px 120px;');

效果图如下：

 严格来说，console.log()并不支持打印图片，但是可以使用CSS的背景图来打印图片，不过并不能直接打印，因为是不支持设置图片的宽高属性，所以就需要使用line-height和padding来撑开图片，使它可以正常显示出来。

我们还可以使用console.log()来打印字符画：

效果图：

2.console.warn()

console.warn()方法用于在控制台输出警告信息。它的用法和console.log是一样的，但是显示的样式不太一样，信息最前面加上一个黄色三角，表示警告：

const arr = ["123","456","789"];
console.warn(arr);

 

3. console.error()

console.error()可以用于在控制台输出错误信息。它和上面的两个方法的用法是一样的，只是显示样式不一样：

const arr = ["123","456","789"];
console.error(arr);

 

 4. console.info()

console.info()可以用来打印资讯类说明信息，它和console.log()的用法一致，打印出来的效果也是一样的。

二、打印时间

1. console.time() & console.timeEnd()

如果我们想要获取一段代码的执行时间，就可以使用console对象的console.time() 和console.timeEnd()方法，来看下面的例子：

console.time();

setTimeout(() => {
	console.timeEnd();
}, 1000);

// default: 1000.52099609375 ms

它们都可以传递一个参数，该参数是一个字符串，用来标记唯一的计时器。如果页面只有一个计时器时，就不需要传这个参数 ，如果有多个计时器，就需要使用这个标签来标记每一个计时器：

console.time("timer1");
console.time("timer2");

setTimeout(() => {
	console.timeEnd("timer1");
}, 1000);

setTimeout(() => {
	console.timeEnd("timer2");
}, 2000);

// timer1: 1004.666259765625 ms
// timer2: 2004.654052734375 ms

2. console.timeLog()

这里的console.timeLog()上面的console.timeEnd()类似，但是也有一定的差别。他们都需要使用console.time()来启动一个计时器。然后console.timeLog()就是打印计时器当前的时间，而console.timeEnd()是打印计时器，直到结束的时间。下面来看例子：

console.time("timer");

setTimeout(() => {
    console.timeLog("timer")
		setTimeout(() => {
	    console.timeLog("timer");
    }, 2000);
}, 1000);

// timer: 1002.80224609375 ms
// timer: 3008.044189453125 ms

而使用console.timeEnd()时：

console.time("timer");

setTimeout(() => {
  console.timeEnd("timer")
	setTimeout(() => {
	    console.timeLog("timer");
    }, 2000);
}, 1000);

 

可以看到，它会终止当前的计时器，所以里面的timeLog就无法在找到timer计数器了。 所以两者的区别就在于，是否会终止当前的计时。