優雅且高效的使用Chrome Developer Tools（上）

Abstract：Chrome Developer Tools是前端開發不可缺乏的利器，這裏介紹幾個有趣的Command Line API，使得開發調試過程當中，不經意的透露出那點點的優雅。

主要內容：

1. 記錄ex的 $_
2. 記錄現任的 $0
3. 簡潔的 $(selector) 和 $$(selector)
4. 拷貝Object的 copy(Object)
5. 更優雅的打斷點 debug(function)
6. 列出對象的全部屬性 dir(objcet) 和 列出事件的getEventListeners(object)
7. 記錄方法的 monitor(function) 和 記錄事件的 monitorEvents(object[, events])
8. 表格化顯示object table(data[, columns])

記錄ex的 $_

$_是上一次表達式的計算結果。

舉個例子： 須要計算天天,每一年都有多少秒。

很簡單：

記錄現任的 $0

調試的時候，很方便的取到選擇的dom節點

另外$1 $2 $3 $4 是前幾回選擇的dom，不過這幾個就更不經常使用了。

簡潔的 $(selector) 和 $$(selector)

不少時候，頁面沒有引入jQuery之類的庫或者是這些庫被做爲模塊加載到頁面中，那麼window中就不會有dom選擇器，這時候咱們通常會用：

1	document.querySelector()

或者是

1	document.querySelectorAll()

其實在Chrome中他們有兩個好基友，分別是$(selector) 與 $$(selector)。有了這兩位之後，不再要輸入那麼長的API了。

拷貝Object的 copy(Object)

右鍵複製HTML？不，有更好的：

更優雅的打斷點 debug(function)

不少時候，咱們須要在運行到某一個方法的打個斷點，以前的方式是打開這個文件，而後點一下，設置一個斷點，但如今有一種很優雅的方式來作到這個：

好比，我想在jQuery.data方法的時候中斷下：

對了，這幅圖，還複習了前面兩個優雅的方法。

而後，就會跳轉到sources調試的地方，這對於被壓縮的代碼，更是一種方便。

對了，取消的只要一行代碼：

1	undebug( function)

列出對象的全部屬性 dir(objcet) 和 列出事件的getEventListeners(object)

舉個例子，咱們想看一個dom節點的全部屬性：

若是想看這個dom上都有一些什麼事件：

是否是很優雅~

記錄方法的 monitor(function) 和 記錄事件的 monitorEvents(object[, events])

仍是用jQuery的data來舉例，有時候咱們只是想知道這個方法被調用幾回還有參數之類的，那麼能夠

若是須要監控事件被調用了幾回、event對象是什麼：

1 2 3 4

monitorEvents( window, "resize"); unmonitorEvents( window, "resize"); monitorEvents( window, [ "resize", "scroll"]) unmonitorEvents( window, [ "resize", "scroll"])

能夠監控的事件有：

Event type	Corresponding mapped events
mouse	「mousedown」, 「mouseup」, 「click」, 「dblclick」, 「mousemove」, 「mouseover」, 「mouseout」, 「mousewheel」
key	「keydown」, 「keyup」, 「keypress」, 「textInput」
touch	「touchstart」, 「touchmove」, 「touchend」, 「touchcancel」
control	「resize」, 「scroll」, 「zoom」, 「focus」, 「blur」, 「select」, 「change」, 「submit」, 「reset」

表格化顯示object table(data[, columns])

和後臺開發扯皮數據的時候特別有用，丟這截圖給他，用你的優雅，亮瞎他，揮一揮衣袖，哈哈哈。

轉自：這裏