php的console.log,console.log()的神奇用法

console.log()对于开发者来说一点也不陌生，尤其是前端开发、Web开发，这是我们离不开的调试工具。 console.log()除了能够输出我们要调试的数据外，还有一些有趣的用法，先上图。

来看一下天猫的首页，打开调试工具能看到以下内容，有天猫服务的招聘信息，还有字符画

在来看一下百度的,也在控制台里输出了招聘信息。

我们可以发现，控制台除了输出了常规的文字，还有大小、颜色不常规的文字，这是怎么做到呢? 难道css也能修饰console.log输出的内容?

基本语法

console.log()的基本语法

console.log(object [, object, …]);

平常我们使用console.log()的时候一般只会用到第一个参数，写什么，控制台就会输出什么，不论是字符串、数字还是对象，什么都是可以往里写。 但其实 console.log()是有多个参数的， 如果第一个参数是字符串的话，字符串里面是可以写占位符的，后面的参数自然是用来代替占位符的真是内容。 有点像C语言的printf()函数，当然不关c语言，php中也有springf()函数，当然绝大部分语言都有这样的函数或语法结构。

用法示例

console.log("%s love you", "yanyan")

//会输出 yanyan love you

//第二个参数就代替了 第一个占位符%s

console.log("%s有%f米高", "yanyan", 1.76);

//会输出 yanyan有1.76米高

//其中 yanyan代替了%s, 1.76代替了%f

占位符

占位符除了上面例子中用到的%s,%f之外，还有很多

格式占位符

做用

%s

字符串

%d 或 %i

整数

%f

浮点数

%o

可展开的DOM

%O

列出DOM的属性

%c

根据提供的css样式格式化字符串

%o和%O在普通对象上的表现是一样的，但是在DOM上就有区别了：

// 格式成可展开的的DOM，像在开发者工具Element面板那样可展开

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

// 像JS对象那样访问DOM元素，可查看DOM元素的属性

// 等同于console.dir(document.body)

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

实在不理解，就亲自去测试一下，你就懂了

%c占位符是最常用的，使用%c占位符时，对应的后面的参数必须是CSS语句，用来对输出内容进行CSS渲染。于是，利用%c配合CSS可以做出吊炸天的效果，比如背景色、字体颜色渐变、字体3D效果、图片等，甚至可以是火星文、表情包等。

console.log("%cHello,yanyan","color: red; font-size: 100px");

//输出红色的、100px大小的 Hello,yanyan！

注意：

console不能定义img，因此用背景图片代替。

console不支持width和height，利用空格和font-size代替；还可以使用padding和line-height代替宽高。

console输出url会自动变为可以点击的超链接

字符画

像天猫的控制台中还有一个字符画， 怎么画字符画呢？ 我们可以利用搜狗输入法，也可以使用字符画的在线工具

在线字符画工具 ：picascii

在线字符画工具 ：mg2txt

大概方法：使用在线工具生成字符画，然后复制到编辑器中，将每行开头的换行删除，且替换成\n。最后只有一行代码，即保证没有换行，最后再丢到console.log("")代码中即可，当然，也可以结合%c做出更酷炫的效果。

字符画本质上仍然是字符串，能不能把字符画直接写在字符串中呢？ 但是JavaScript字符串中出现换行会报错的，不过，ES6帮我们解决了这个问题，我们可以使用运算符 ` 来定义字符串。

兼容性问题

低版本的IE6/7/8是没有控制台工具的， chrome、Firefox、IE9+ 都有console工具

IE不支持%o和%O, Firefox中把%o和%O的行为都显示为%o。

超链接 IE不可点击跳转。

##示例

可以将下面代码复制到你的编辑器中，来执行,在你的浏览器中查看效果。

也可以直接打开调试工具，在本页面中查看效果。

let pig = `

╭︿︿︿╮

{/ o o /}

( (oo) )

︶︶︶

`;

let hert = `

☆☆ ☆☆ ☆☆ ☆☆

★★ ★ ★★

☆☆ 祝你快乐！ ☆☆

★★ ★★

☆☆ ☆☆

★★ ★★

☆☆ ☆☆

★★ ★★

☆☆

`;

console.log(pig,hert);

console.log("不论学前端还是后端，请访问 %chttp://unclealan.cn", "color:blue");

console.log("%c我%c爱%c你","color:orange;font-size:30px", "color:green;font-size:30px", "color:purple;font-size:30px");

console.log("%c ", "font-size:300px;background:url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1398884738,516982899&fm=23&gp=0.jpg');background-size:100%;")