console.log格式输出全解及console的其他方法

一、console.log格式化打印

console.log格式化这一用法一般都在个人博客或其他官网上有,当F12查看网页元素时,在控制台(console)那里偶尔会发现一些个性化的输出,感觉很奇特很好玩,其实现原理不难看一遍就晓得,具体实现如下

 

1、%c表示css样式

 

console.log('%c hello world', 'color: red;font-size: 24px;font-weight: bold;text-decoration: underline;');

 

 

 

 

 

2、%d表示数字

 

console.log('%d', 123);

 

 

console.log格式输出全解及console的其他方法_第1张图片

 

3、%i表示整型数字

 

console.log('%i', 123);

 

 

console.log格式输出全解及console的其他方法_第2张图片

 

4、%o表示DOM元素

 

console.log('%o', document.body);

 

 

console.log格式输出全解及console的其他方法_第3张图片

 

5、%O表示javascript对象

 

console.log('%O', new Date());

 

 

console.log格式输出全解及console的其他方法_第4张图片

 

二、console对象的一些方法

首先在控制台(console)输入console回车,会看到

console.log格式输出全解及console的其他方法_第5张图片

有如此多的方法,本人常用的有

 

console.log()    // 打印日志
console.debug()  // 打印调试
console.error()  // 打印错误
console.info()   // 打印信息
console.warn()   // 打印警告
console.assert() // 打印断言
console.clear()  // 清空

 

写到最后,推广下一个不错的分享平台:http://www.techshare100.com/,欢迎大家加入

 

你可能感兴趣的:(网端前端)