轉載翻譯自：https://blog.bitsrc.io/10-chrome-console-utility-apis-you-probably-never-used-14a0b64f1bd6
作者的標題中寫的是10條，但是正文有12條。
以下爲正文：
10個你可能會錯過的Chrome中Console的實用功能。
Console工具是Chrome dev-tool中最常用也是最有用的工具之一。它提供了一些功能用於在我們的頁面中拓展一些額外的功能，幫助我們調試、分析和監控網頁。
1. monitor
用來監聽一個函數，可以知道此函數什麼時候被調用。
function traceFunc (arg) { }
mointor(traceFunc)
traceFunc方法做爲參數被傳遞給了monitor。現在無論何時調用了traceFunc，monitor都會告訴我們該方法被調用了。
traceFunc(90);
function traceFunc was called with arguments: 90
2. unmonitor
用於刪除被monitor監聽的方法，解除對traceFunc方法的監聽我們可以這樣做：
unmonitor(traceFunc)
當我們調用traceFunc方法，我們不會有任何的結果：
traceFunc(90)
3. monitorEvents
用法如下：
monitorEvents(object, [,events])
此方法用來監聽和打印輸出觸發在元素上的事件。
<button id="button">Button</button>
現在我們在Console中輸入如下代碼：
monitorEvents(button, 'click')
當這個按鈕被點擊時，monitorEvents會監聽到並將點擊事件打印輸出到Console中，表示這個按鈕被點擊了。
我們同樣也可以監聽一個對象上的不同事件。
monitorEvents(button, ['click', 'mouseover'])
它將會監聽按鈕中的click和mouseover事件，當我們將鼠標移到按鈕上時會看到Console打印了此事件，同理，點擊這個按鈕也是如此。
我們也可以監聽一個對象上的通用事件：
monitorEvents(button, ['click', 'mouse'])
mouse是鼠標事件的通用事件：
- mouseover
- mouseout
因此會監聽上邊所說的綁定到按鈕上的事件，使得當點擊事件或任何鼠標事件發生在按鈕上時，Console會打印相應的日誌
此外，鍵盤的key Events將會打印任何關於key Events事件，比如keyup、keydown等等。
4. unmonitorEvents
此方法做了monitorEvents相反的事情，它將解除通過monitorEvents設置的對對象的監聽。
monitorEvents(button, 'click')
給按鈕添加點擊監聽事件，點擊按鈕時Console會打印相應的事件。
執行unmonitorEvents(button, 'click')將會解除對按鈕的監聽。現在點擊按鈕，Console不會有結果打印。
5. $_
此方法用於執行Console歷史記錄中最後的表達式。
如果我們在Console中輸入2+2：
我們將會得到答案4，這是表達式求值的結果。
接下來，我們又輸入3 * 2：
Console會給我們返回結果6。
我們執行了兩條表達式，其中3 * 2是最後執行的。現在在Console中輸入並執行$_，我們會得到6這個結果。
6. copy
這個功能會複製數據至剪切板。
在Console中輸入copy('nnamdi')，這將複製字符串nnamdi至剪切板。去瀏覽器的URL地址欄中右鍵粘貼，你將會看到nnamdi粘貼到了你的地址欄裏。
7. clear
此方法會清空Console歷史記錄。
輸入如下表達式：
> 2 + 2
4
> 3 * 2
6
Console的執行歷史記錄爲(2+2)4和(3*2)6。在Console中輸入clear()將會清空歷史記錄。
8. keys(object)
就像Object.keys一樣，此方法會以數組的形式返回一個對象中的所有key值。
9. values(object)
就像Object.values一樣，此方法會以數組的形式返回一個對象中的所有value值。
10. getEventListeners(object)
這個方法會返回註冊在對象上的事件。舉例來說，如果我們在一個按鈕上註冊了click、mouseover、mouseout事件，這個方法會返回一個事件名稱做爲key的對象。該返回對象的value爲數組，包含了對應事件的監聽函數。
我們有一代碼塊：
<button id="button" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button</button>
<script>
function clickHandler() {
}
function mousedownHandler() {
}
function mouseoverHandler() {
}
</script>
這個按鈕有三個事件，包括click、mouseover、mouseout，對應的監聽事件爲clickHandler、mousedownHandler、mouseoverHandler。
執行getEventListeners(button)，會得到如下的結果：
如圖所示，返回的對象中的屬性值爲註冊在按鈕上的click、mousedown、mouseover事件名。屬性值爲數組，包含了一些對象。展開這些對象，我們會看到註冊在按鈕上的監聽器函數。
11. $(elementName, [,node])
此方法會返回指定的第一個元素。
我們有如下代碼塊：
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
我們有四個按鈕：button1, button2, button3, button4。要選擇第一個按鈕，執行如下命令：
$('button')
可以看到button1被返回了，因爲它是document中的第一個按鈕。我們可以使用返回的DOM的屬性和方法。
這裏，我們使用button1的DOM節點引用來獲取它的id：
我們也可以獲取指定的DOM節點的第一個元素：
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>
按鈕2、3、4被嵌套在div節點中，我們可以選擇div節點中的第一個button，只需要這樣做：
$('button', document.querySelector('div'))
可以看到，Console打印了button2，因爲它是div中的第一個按鈕元素。
12. $$(element,[,node]) Double dollar
此方法的作用跟上面的單$一樣，但是它會返回所有指定的元素。
使用如下代碼塊：
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
執行$$('button')會得到一個數組，包含了所有的button節點。
我們也可以同樣得到給定的DOM節點中的所有元素：
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>
Button2, 3, 4被嵌套在div中，要全部選擇它們，執行如下語句：
$$('button', document.querySelector('div'))
我們會得到button2, 3, 4。
這裏還有一些。。。
- table
- debug
- undebug
- $x()
- dir
- dirxml
- profile() profileEnd()
- inspect
- $0~$X
總結
這些方法在調試或監控頁面上的某些內容會非常有用，它們會是你的第三隻眼。
隨着Chrome新版本的發佈，會有更多的新特性新功能會被加入到Console tab中。我上面的列表中還有一些其它的功能，我力勸你花一些時間在你的Console中找出更多隱藏的特性和功能。
感謝觀看！