java春眠不觉晓_春眠不觉晓，console知多少

console.log

console.log() 方法主要用来在控制台打印信息。其参数是不定的，可以传递任意多个参数，以逗号分割。

基本用法

console.log('hello');

console.log('hello', 'world');

console.log(obj1, obj2, document.getElementsByTagName('div'));

占位符

console.log() 提供了很多占位符，方便我们更加自如的定制我们的打印样式。

样式占位符

作用

%s

字符串占位符

%d 或者 %i

整数占位符

%f

浮点数占位符

%o

可展开的DOM

%O

列出DOM的属性

%c

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

这里仅以%c为例。

console.log("%c javascript", 'color: #ff0000; font-size:36px;');

结果如下：

应用场景

制作图画

console.log 除了在控制台打印我们需要的调试信息以外，还可以制作一些图画。

如下(盗图)

上面的图画，当然不是通过手动打出来的，有工具哦，推荐两个：

http://picascii.com/

http://www.degraeve.com/img2txt.php

控制台显示图片

另外，也可以使用console.log在控制台显示图片。

console.log('%c ', 'background: url(https://img.aotu.io/FiLwh8e3l--mGdsJNw3Bm-Z8o_JF) no-repeat center center;font-size:60px;padding:50px 200px;background-size:100% 100%;');

效果如下图：

在控制台通过console.log打印图片，需要注意的是：

1、console.log 不能定义图片，因此借助于css背景图片；

2、console.log 不支持对图片进行width，height设置，但是我们可以通过 font-size,padding,line-height 间接设置宽高，上面的示例也证明了这一点；

展开对象

最后，console.log 借助 JSON.stringify 可以对一个对象进行展开打印：

var obj = {

name: 'lxs',

size: 20,

child: [

{

name: 'ywx',

size: 0

},

{

name: 'hhh',

size: 1

}

]

};

console.log(JSON.stringify(obj, null, 4));

打印效果如下：

console.time 与 console.timeEnd

console.time 可以开启一个定时器，来跟踪摸一个(或者一组)操作所花费的时间，遇到同样参数的console.timeEnd方法时，会关闭这个定时器，并在浏览器控制台输出所花费的时间。

之前，我们想要知道某一些操作所花费的时间时，通常会这么做：

var start = new Date();

...

...

...

var end = new Date();

console.log(end - start);

但是一个更方便快捷的方式就是使用 console.time 和 console.timeEnd

console.time('cost');

for (var i = 0, j = 0; i < 10000; i++) {

j++;

}

console.timeEnd('cost');

结果如下：

$_

$_ 代表上一个语句的执行结果：

快捷引用：$i

代表的是inspect最近选中的5个DOM元素，

$0是最近选中的一次，$1...$4以此类推。这个很有用，在elements面板中单击某个DOM后，在控制台直接输入$0,就是对刚才单击元素的引用。

假设我们有如下DOM结构：

我们依次单击

div#J_content0, div#J_content1, div#J_content2, div#J_content3, div#J_content4, div#J_content5

再看控制台：

控制台中的\$0引用的是 div#J_content5，\$1引用的是倒数第二次点击的div#J_content4, ... 到$5 的时候报错了，是因为目前支持5个.。

快捷选择器：

$(selector) 与 $$(selector)

这里的$并不是jquery的那个$, 而是浏览器提供的一个 Command Line API.

$(selector)只匹配一个元素，其实是document.querySelector(如果支持)的别名；

$$(selector)返回匹配的所有元素，其实是document.querySelectorAll(如果支持)的别名；

还是上面的DOM结构：

$('div')

$$('div')

结果如下：

刚才说过，这里的$并不是 jquery， zepto等库的$,那是在页面没有引用这些库的情况下，如果页面使用了这些库，那么$就会被覆盖。

未使用jquery，zepto等库：

引用jquery之后：

clear

清除控制台的所有输出

table

console.table 用于将数据以表格的形式输出。

console.table(["apples", "oranges", "bananas"]);

在控制台输出如下：

var names = {

0: {

firstName: 'michael',

lastName: 'jordan'

},

1: {

firstName: 'bryant',

lastName: 'kobe'

}

};

console.table(names, ['firstName', 'lastName']);

console.group 与 console.groupEnd

在控制台上新建一个分组，随后打印的内容都会被添加一个缩进，表示该内容属于当前分组，直到遇到console.groupEnd()之后，当前分组结束。

console.group();

console.log(1);

console.log(2);

console.log(3);

console.groupEnd();

console.group();

console.log(4);

console.log(5);

console.log(6);

console.groupEnd();

console.info

在控制台输出通知信息，用法和 console.log 一样。

console.warn

在控制台输出警告信息，用法和 console.log 一样。

console.debug

console.log 的别名。

console.error

在控制台输出错误信息，用法和 console.log 一样。