春眠不觉晓，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打印图片，须要注意的是：

一、console.log 不能定义图片，所以借助于css背景图片；
二、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 同样。