对于前端开发，console.log控制台调试输出必不可少。

愈加发现现在的公司喜欢在控制台输入做文章了，一些公司网站在控制台运行简单的游戏，而另一些公司则是在他们网站的控制台发布招聘消息，如百度：

难道这是考验前端开发的观察，或者鉴于他们职业习惯性的去F12。

通常，我们都是用console.log来调试js，即运行一段js来测试程序是否正常运行，或者输出一些基础文本。今天在此说点新玩意，之前我只是认为console.log在输入方便只是普通的文本，可是后来看console.log官方文档却并非如此，它是支持输出有样式的文本，图片等。

翻译如下：

模式 类型
%s 字符串
%d, %i 整数（目前还不支持数字格式）
%f/%.xf 浮点数x表示小数位数的数量应四舍五入到（如果省略的话，这个数字将不进行四舍五入）
%o 对象的超链接
%c 样式格式

针对图表介绍，我们知道console.log可以以各种形式输出文字，下面就逐个列出它们的用法。

1. %s ，在控制台将变量以字符串的形式输出：

代码和效果图：

var animal="cat"; console.log("The is a %s", animal);

2. %d, %i，在控制台将变量以整数数字的形式输出：

代码和效果图：

var animal="cat",
  count1=2; 

console.log("The %s jumped over %d tall buildings", animal, count1);

3 . %f/%.xf，在控制台将变量以浮点数的形式输出：

代码和效果图：

var animal="cat",
  count2=2.5;

console.log("The %s jumped over %f tall buildings", animal, count2);

4. %o ，在控制台将变量以对象的形式输出：

代码和效果图：

var oDiv=document.createElement("div");

oDiv.style.width="100px"; 
oDiv.style.height="100px"; 
oDiv.style.backgroundColor="red"; 

console.log("The %o", oDiv);

5. %c ，在控制台将文本添加样式输出：

代码和效果图：

var animal="cat",
  count1=2; 

console.log("The %c %s jumped over %f tall buildings","font-size:30px;
text-shadow:10px 10px 12px #000;", animal, count1);

另外除了输出文本外，在控制台样式处理方面，我们还可以做图片输出，不过这里不是用img 标签，而且给文本设置背景，这里文字空格的长度控制背景图所显示的长度，而font-size则控制背景图显示的高度，另外背景src必须是绝对路径。

代码和效果图：

console.log("%c    ","font-size:50px;font-family:'宋体';background:url
(http://www.yi-jy.com/images/console_pic.jpg) no-repeat;");

然后，没有了。

夜深了，一首歌：