众所周知,浏览器的开发者工具为我们提供了强大的调试系统,可以用来查看DOM树结构、CSS样式调试、动画调试、JavaScript代码断点调试等。今天我们就来看看console调试的那些实用的调试技巧。
如今,我们项目的开发通常会使用React、Vue等前端框架,前端调试也变得更加有难度,除了使用React Dev Tools,Vue Dev Tools等插件之外,我们使用最多的就是console.log(),当然多数情况下,console.log()就能满足我们的需求,但是当数据变得比较复杂时,console.log()就显得有些单一。其实console对象为我们提供了很多打印的方法,下面是console对象包含的方法(这里使用的是Chrome浏览器,版本为 95.0.4638.54(正式版本) (arm64)):
console 对象提供了浏览器控制台调试的接口,我们可以从任何全局对象中访问到它,如果你平时只是用console.log()来输出一些变量,那你可能没有用过console那些强大的功能。下面带你用console玩玩花式调试。
一、基本打印
1. console.log()
console.log()就是最基本、最常用的用法了。它可以用在JavaScript代码的任何地方,然后就可以浏览器的控制台中看到打印的信息。其基本使用方法如下:
let name = "CUGGZ"; let age = 18; console.log(name) // CUGGZ console.log(`my name is: ${name}`) // CUGGZ console.log(name, age) // CUGGZ 18 console.log("message:", name, age) // message: CUGGZ 18 复制代码
除此之外,console.log()还支持下面这种输出方式:
let name = "CUGGZ"; let age = 18; let height = 180; console.log('Name: %s, Age: %d', name, age) // Name: CUGGZ, Age: 18 console.log('Age: %d, Height: %d', age, height) // Age: 18, Height: 180 复制代码
这里将后面的变量赋值给了前面的占位符的位置,他们是一一对应的。这种写法在复杂的输出时,能保证模板和数据分离,结构更加清晰。不过如果是简单的输出,就没必要这样写了。在console.log中,支持的占位符格式如下:
- 字符串:%s
- 整数:%d
- 浮点数:%f
- 对象:%o或%O
- CSS样式:%c
可以看到,除了最基本的几种类型之外,它还支持定义CSS样式:
let name = "CUGGZ"; console.log('My Name is %cCUGGZ', '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-heigh和padding来撑开图片,使其可以正常显示出来。
我们可以使用console.log()来打印字符画,就像知乎的这样:
可以使用字符画在线生成工具,将生成的字符粘贴到console.log()即可。在线工具:mg2txt。我的头像生成效果如下,中间的就是生成的字符:
除此之外,可以看到,当占位符表示一个对象时,有两种写法:%c或者%C,那它们两个有什么区别呢?当我们指定的对象是普通的object对象时,它们两个是没有区别的,如果是DOM节点,那就有有区别了,来看下面的示例:
可以看到,使用 %o 打印的是DOM节点的内容,包含其子节点。而%O打印的是该DOM节点的对象属性,可以根据需求来选择性的打印。
2. console.warn()
console.warn() 方法用于在控制台输出警告信息。它的用法和console.log是完全一样的,只是显示的样式不太一样,信息最前面加一个黄色三角,表示警告:
const app = ["facebook", "google", "twitter"]; console.warn(app); 复制代码
打印样式如下:
3. console.error()
console.error()可以用于在控制台输出错误信息。它和上面的两个方法的用法是一样的,只是显示样式不一样:
const app = ["facebook", "google", "twitter"]; console.error(app); 复制代码
需要注意,console.exception() 是 console.error() 的别名,它们功能是相同的。
当然,console.error()还有一个console.log()不具备的功能,那就是打印函数的调用栈:
function a() { b(); } function b() { console.error("error"); } function c() { a(); } c(); 复制代码
打印结果如下:
可以看到,这里打印出来了函数函数调用栈的信息:b→a→c。
console对象提供了专门的方法来打印函数的调用栈(console.trace()),这个下面会介绍到。
4. console.info()
console.info()可以用来打印资讯类说明信息,它和console.log()的用法一致,打印出来的效果也是一样的:
二、打印时间
1. console.time() & console.timeEnd()
如果我们想要获取一段代码的执行时间,就可以使用console对象的console.time() 和console.timeEnd()方法,来看下面的例子:
console.time(); setTimeout(() => { console.timeEnd(); }, 1000); // default: 1001.9140625 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计数器了。 所以两者的区别就在于,是否会终止当前的计时。