Chrome DevTools學習筆記

---恢復內容開始---

chrome和firefox的開發者工具大同小異，都很是強大。今天在博客園上看了這篇文章（http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html）才發現本身原來對chrome的控制檯所知甚少。之後必定多看博客，多寫筆記。

下面就是我對Chrome DevTools學習的小小總結。

 

1.console.log&console.info&console.warn&console.error

用於插入待調試程序返回相關信息，本質上四個命令相同，只不過爲了語義化因此纔在名稱上有所區別。

與alert()函數的不一樣點在於，以上四個函數並不會打斷程序。

 

順便說一下，console裏的換行是shift+enter。一開始不會換行我苦惱了很久。。。

還有，注意是console.warn不是console.warning。

還有括號中的參數能夠加css代碼進去，好比：

console.log('%chello world','font-size:25px;color:red;');

盜圖了：

 

 

 

 

2.console.group&console.groupEnd

用於將控制檯信息分組顯示，用法同括號或html的雙標籤。

括號中的參數用於匹配和標示。

 

3.console.table

表格形式的參數輸出。例：

var data=[{"name":"jack","score":1},{"name":"taoshen","score":4}];
console.table(data);

 

4.console.assert

console.assert至關於帶有判斷的console.log，只有在某一條件不成立/爲假時纔可執行。

 

5.console.count

計數器。例：

 

6.console.dir

以JS對象形式輸出DOM節點。

與console.log不一樣console.log是以DOM樹形式輸出。

 

7.大殺器來了，console.time&console.timeEnd

性能測試必備武器。是一個計時器，使用方法同括號與HTML雙標籤。用於函數執行計時。

 

能夠以直接手寫計時器：

顯然console.time&console.timeEnd方便和精確多了。

 

8.$

類JQuery的選擇器。

$（'selector'）至關於原生JS的document.querySelecter()的封裝；

$$('selector') 至關於原生JS的document.querySelectorAll()的封裝；

另外，$_做爲命令表示返回上一次結果，功能上與方向鍵向上+回車相同；做爲變量就表示上一次的結果，如：

下面直接搬運一下：$0~$4則表明了最近5個你選擇過的DOM節點。
什麼意思？在頁面右擊選擇審查元素，而後在彈出來的DOM結點樹上面隨便點選，這些被點過的節點會被記錄下來，而$0會返回最近一次點選的DOM結點，以此類推，$1返回的是上上次點選的DOM節點，最多保存了5個，若是不夠5個，則返回undefined。

 

 

9.copy

這個命令用來複制選定的DOM樹結構。但是在個人chrome裏這條命令已經失效了，不知爲什麼。搬運一下別人的圖片作例子吧

 

10.keys&values

【鍵-值】形式輸出對象的屬性名與屬性值。例：

注意是keys不是key，是values不是value。

 

 

11.monitor&unmonitor

一個函數監聽器。monitor（）接收一個函數名做爲參數，輸出結果爲該函數函數名與該函數參數。unmonitor（）用於中止監聽。