console深刻理解

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

 

下面一一介紹： 

console.log() 用於輸出普通訊息

console.info() 用於輸出提示性信息

console.error() 用於輸出錯誤信息

console.warn() 用於輸出警示信息

console.debug() 用於輸出調試信息

上面的5種方法，均可以使用printf風格的佔位符，不過，佔位符的種類比較少，只支持字符（％s），整數（％d或％i），浮點數（％f）和對象（％o）四種

 

console.dirxml() 用來顯示網頁的某個節點（node）所包含的html／xml代碼

window.onload = function () {
        var mytable = document.getElementById(‘mytable‘);
        console.dirxml(mytable);
    }

 

console.group() 輸出一組信息的開頭

console.groupEnd() 結束一組輸出信息

這兩個結合使用輸出一組信息

 

console.assert() 對輸入的表達式進行斷言，只有表達式爲false時，才輸出相應的信息到控制檯

var isDebug = false;

console.assert(isDebug, '爲false時輸出的log信息。。。')

 

console.conunt() 統計代碼被執行的次數

function myFunction(){

console.count("myFunction 被執行的次數")

}

myFunction();

myFunction();

// myFunction 被執行的次數: 1

// myFunction 被執行的次數: 2

 

console.dir() 直接將DOM節點以對象的方式進行輸出，也能夠輸出對象，查看對象的方法和屬性

console.dirxml() 只是輸出DOM結構

 

console.time() 計時開始

console.timeEnd() 計時結束

//第一種方法是使用console.time來統計實例化1000000個對象所需的時間

console.time('Array initialize')

var array = new Array(1000000);

for(var i = array.length-1; i > -1; i--){

array[i] = new Object();

}

//第二種方法是用傳統的時間差相減來統計的

console.timeEnd("Array initialize");

// Array initialize: 150ms

 

var start = new Date().getTime();

var array = new Array(1000000);

for(var i = array.length-1; i > -1; i--){

array[i] = new Object();

}

console.log(new Date().getTime()-start);

// 160

 

console.profile() 和 console.profileEnd() 配合使用來查看CPU使用的相關信息。若是沒有用上面的方法的話 Profiles面板裏沒有CPU的相關信息，只有使用該方法後纔有

 

console.timeLine 和 console.timeLineEnd 配合一塊兒記錄一段時間軸， 同上面的方法

 

console.trace() 堆棧跟蹤相關的調試

 

 控制檯的一些快捷鍵

一、方向鍵盤的上下鍵

二、$_命令返回最近一次表達式執行的結果，功能跟按向上的方向鍵再回車是同樣的

三、$0-$4 表明最近5個你選擇過的DOM節點，$0是最近一次點選的DOM節點， $1是上上次點選的DOM節點，最多保存5個，若是不夠則返回undefined

四、Chrome控制檯中支持jQuery的選擇器，也就是說能夠直接$('body')選擇DOM節點

五、copy() 經過此命令能夠將在控制檯中獲取到的內容複製到鍵貼板

copy(document.body)， 能夠任意粘貼到哪

六、keys(obj) 和 values(obj) 返回屬性名和值組成的數組

七、console.table(obj) 將對象直接生成table，在console中顯示

八、monitor & unmonitor 接收一個函數名做爲參數，函數每次被執行了都會在控制檯輸出一條信息，裏面包含了函數名稱及執行時所傳入的參數， 解除了監視就不在控制檯輸出信息了

monitor(sayHello);

sayHello('angela');

sayHello('Phoebe');

unmonitor(sayHello);

// function sayHello called with arguments: angela

// function sayHello called with arguments: Phoebe

 

• $ // 簡單理解就是 document.querySelector 而已。
• $$ // 簡單理解就是 document.querySelectorAll 而已。
• $_ // 是上一個表達式的值
• $0-$4 // 是最近5個Elements面板選中的DOM元素，待會會講。
• dir // 其實就是 console.dir
• keys // 取對象的鍵名, 返回鍵名組成的數組
• values // 去對象的值, 返回值組成的數組

 

console.log('%c',"padding:50px 300px;line-height: 120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.git') no-repeat");

%c應該是佔位符的意思吧

 

console.clear()