console.log

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

基本用法

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

占位符

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

这里仅以%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 一样。