天啦嚕！原來Chrome自帶的開發者工具還能這麼用！
原文連結 Things you probably didn‘t know you could do with Chrome’s Developer Console
作者：Swagat Kumar Swain
Chrome
自帶開發者工具。它的功能十分豐富，包括元素、網路、安全等等。今天我們主要介紹
JavaScript控制檯
部分的功能。
我最早寫程式碼的時候，也就是在JS控制檯裡輸出一些伺服器返回的內容，或者一些變數的值。但是後來透過一些深入的學習和了解，我發現Chrome的JS控制檯原來還有這麼多神奇的功能。
在這裡我總結了一些特別有用的功能。要是你湊巧在Chrome裡瀏覽這篇文章的話，現在就開啟開發者工具，跟著隨手試試吧！
1。選取DOM元素
要是你用過兩天jQuery的話，一定對 $（‘。className’） 或者 $（‘#id’） 這種選擇器不會陌生。上面這倆貨分別是jQuery的類選擇器和ID選擇器。
在一個網頁沒有引入jQuery的情況下，在控制檯裡你也可以透過類似的方法選取DOM。
不管 $（‘tagName’） /$（‘。class’）/ $（‘#id’） 還是 $（‘。class #id’） 等類似的選擇器，都相當於原生JS的document。querySelector（‘’） 方法。這個方法返回第一個匹配選擇規則的DOM元素。
在Chrome的控制檯裡，你可以透過 $$（‘tagName’） 或者 $$（‘。className’） 記得是兩個$$符號來選擇所有匹配規則的DOM元素。選擇返回的結果是一個數組，可以透過陣列的方法來訪問其中的單個元素。
舉個栗子 $$（‘className’） 會返回給你所有包含 className 類屬性的元素，之後你可以透過 $$（‘className’）［0］ 和$$（‘className’）［1］ 來訪問其中的某個元素。
2。一秒鐘讓Chrome變成所見即所得的編輯器
你可能經常會困惑你到底能不能直接在瀏覽器裡更改網頁的文字內容。答案是肯定的，你可以只通過一行簡單的指令把Chrome變成所見即所得的編輯器，直接在網頁上隨心所欲地刪改文字。
你不需要再傻傻地右鍵審查元素，編輯原始碼了。開啟Chrome的開發者控制檯，輸入
document
。
body
。
contentEditable
=
true
然後奇蹟就發生啦！要是你正在用Chrome現在就可以試試！
3。獲取某個DOM元素繫結的事件
在除錯的時候，你肯定需要知道某個元素上面綁定了什麼觸發事件。Chrome的開發者控制檯可以讓你很輕鬆地找到它們。
getEventListeners（$（‘selector’）） 方法以陣列物件的格式返回某個元素繫結的所有事件。你可以在控制檯裡展開物件檢視詳細的內容。
要是你需要選擇其中的某個事件，可以透過下面的方法來訪問：
getEventListeners
（
$
（
‘selector’
））。
eventName
［
0
］。
listener
這裡的 eventName 表示某種事件型別，例如：
getEventListeners
（
$
（
‘#firstName’
））。
click
［
0
］。
listener
上面的例子會返回ID為 firstName 元素繫結的click事件。
4。監測事件
當你需要監視某個DOM觸發的事件時，也可以用到控制檯。例如下面這些方法：
monitorEvents（$（‘selector’）） 會監測某個元素上繫結的所有事件，一旦該元素的某個事件被觸發就會在控制檯裡顯示出來。
monitorEvents（$（‘selector’），‘eventName’） 可以監聽某個元素上繫結的具體事件。第二個引數代表事件型別的名稱。例如 monitorEvents（$（‘#firstName’），‘click’） 只監測ID為firstName的元素上的click事件。
monitorEvents（$（‘selector’），［‘eventName1’，‘eventName3’，…。］） 同上。可以同時檢測具體指定的多個事件型別。
unmonitorEvents（$（‘selector’）） 用來停止對某個元素的事件監測。
5。用計時器來獲取某段程式碼塊的執行時間
透過 console。time（‘labelName’） 來設定一個計時器，其中的 labelName 是計時器的名稱。透過console。timeEnd（‘labelName’） 方法來停止並輸出某個計時器的時間。例如：
console
。
time
（
‘myTime’
）；
//設定計時器開始 - myTime
console
。
timeEnd
（
‘mytime’
）；
//結束並輸出計時時長 - myTime
//輸出： myTime：123。00 ms
再舉一個透過計時器來計算程式碼塊執行時間的例子：
console
。
time
（
‘myTime’
）；
//開始計時 - myTime
for
（
var
i
=
0
；
i
<
100000
；
i
++
）{
2
+
4
+
5
；
}
console
。
timeEnd
（
‘mytime’
）；
//結束並輸出計時時長 - myTime
//輸出 - myTime：12345。00 ms
6。以表格的形式輸出陣列
假設我們有一個像下面這樣的陣列：
var
myArray
=
［{
a
：
1
，
b
：
2
，
c
：
3
}，{
a
：
1
，
b
：
2
，
c
：
3
，
d
：
4
}，{
k
：
11
，
f
：
22
}，{
a
：
1
，
b
：
2
，
c
：
3
}］
要是你直接在控制檯裡輸入陣列的名稱，Chrome會以文字的形式返回一個數組物件。但你完全可以透過console。table（variableName） 方法來以表格的形式輸出每個元素的值。例如下圖：
7。透過控制檯方法來檢查元素
你可以直接在控制檯裡輸入下面的方法來檢查元素
inspect（$（‘selector’）） 會檢查所有匹配選擇器的DOM元素，並返回所有選擇器選擇的DOM物件。例如inspect（$（‘#firstName’）） 選擇所有ID是 firstName 的元素，inspect（$（‘a’）［3］） 檢查並返回頁面上第四個 p元素。
$0， $1， $2等等會返回你最近檢查過的幾個元素，例如 $0 會返回你最後檢查的元素，$1 則返回倒數第二個。
8。列出某個元素的所有屬性
你也可以透過控制檯列出某個元素的所有屬性：
dir（$（‘selector’）） 會返回匹配選擇器的DOM元素的所有屬性，你可以展開輸出的結果檢視詳細內容。
9。獲取最後計算結果的值
你可以把控制檯當作計算器使用。當你在Chrome控制檯裡進行計算時，可以透過$_來獲取最後的計算結果值，還是直接看例子吧：
2
+
3
+
4
9
//- The Answer of the SUM is 9
$_
9
// Gives the last Result
$_
*
$_
81
// As the last Result was 9
Math
。
sqrt
（
$_
）
9
// As the last Result was 81
$_
9
// As the Last Result is 9
10。清空控制檯輸出
當你需要這麼做的時候，只需要輸入 clear（） 然後回車就好啦！
Chrome開發者工具
的強大遠遠超出你的想象！這只是其中的一部分小技巧而已，希望能夠幫到你！
感謝您的閱讀，要是您有什麼自己的獨門小技巧，也希望您在評論區與大家分享！