1、console.log()
我们经常会使用console.log来打印出某个变量的值或者某个实体对象,也可以传入多个变量参数,它会按照传入顺序进行打印:
1. 传入一个变量
const a = 1;
console.log(a); // -> 1
2. 传入一个对象
const foo = {a: 1};
console.log(foo); // -> {a: 1}
3. 传入多个变量
console.log(a, foo); // -> 1 {a: 1}
除此之外,它还支持格式化打印的功能,传入特定的占位符来对参数进行格式化处理,常见的占位符有以下几种:
%s:字符串占位符
%d:整数占位符
%f:浮点数占位符
%o:对象占位符(注意是字母o,不是数字0)
%c: CSS样式占位符
const string = 'Glory of Kings';
const number = 100;
const float = 9.5;
const obj = {name: 'daji'};
1、%s 字符串占位符
console.log('I do like %s', string); // -> I do like Golry of Kings.
2、%d 整数占位符
console.log('I won %d times', number); // -> I won 100 times.
3、%f 浮点数占位符
console.log('My highest score is %f', float); // -> My highest score is 9.5
4、%o 对象占位符
console.log('My favorite hero is %o', obj); // -> My favorite hero is {name: 'daji'}.
5、%c CSS样式占位符
console.log('I do like %c%s', 'padding: 2px 4px;background: orange;color: white;border-radius: 2px;', string);
作者:小维FE
链接:https://juejin.im/post/5ddd373cf265da05d7582ce8
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
2、console.warn()
你可以完全使用console.warn来代替console.log方法,但前提是该条打印信息是属于警告级别而不是普通信息级别,因此浏览器遇到一条警告级别的信息会区别对待,最明显的是它的左侧会有一个警告图标,并且背景色和文字颜色也会不一样。
相比于普通信息,警告信息会出现在上图左侧的warning面板中,而不是info面板中,这样也有助于我们在一堆打印信息中快速筛选出警告信息,方便查看。
3、console.dir()
在大多数情况下,console.dir方法的作用和console.log作用相似,但是有一点细微的差别。
在上图中,我们可以看到,console.log方法会将打印结果的详细信息显示完整,但是console.dir方法只会打印出对象,不会展开详细信息,当然点击之后看到的信息和前者一样。
唯一差异比较大的地方是当我们打印HTML文档中的节点时,会有完全不一样的表现形式。例如我们使用console.log来打印body标签:
我们会方便地看到DOM结构,并且鼠标移上去能够帮我们自动定位到对应的DOM节点。但是在某些情况下,其实这并不是你想要看到的效果,或许你想看到的是该DOM节点下的所有属性信息,那么你可以尝试使用console.dir方法来试试:
4、console.table()
在我们的项目开发中经常会遇到对象数组形式的列表数据,在调试过程中我们可能会使用console.log方法打印出这些数据来进行查看,但比起前者,还可以使用一种比较可视化的方式来进行打印。例如,这里准备一些列表数据:
const response = [
{
id: 1,
name: 'Marry',
age: 18,
sex: 0
},
{
id: 2,
name: 'John',
age: 20,
sex: 1
}
];
然后我们使用console.log来进行打印。