Abstract：Chrome Developer Tools是前端開發不可缺少的利器，這里介紹幾個有趣的Command Line API，使得開發調試過程中，不經意的透露出那點點的優雅。
主要內容：
- 記錄ex的 $_
- 記錄現任的 $0
- 簡潔的 $(selector) 和 $$(selector)
- 拷貝Object的 copy(Object)
- 更優雅的打斷點 debug(function)
- 列出對象的所有屬性 dir(objcet) 和 列出事件的getEventListeners(object)
- 記錄方法的 monitor(function) 和 記錄事件的 monitorEvents(object[, events])
- 表格化顯示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])
和后台開發扯皮數據的時候特別有用，丟這截圖給他，用你的優雅，亮瞎他，揮一揮衣袖，哈哈哈。
轉自：這里