春眠不覺曉，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 同樣。