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

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

百度控制台招聘

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

通常,我们都是用console.log来调试js,即运行一段js来测试程序是否正常运行,或者输出一些基础文本。今天在此说点新玩意,之前我只是认为console.log在输入方便只是普通的文本,可是后来看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;");
控制台输出图片

然后,没有了。

夜深了,一首歌: