Chrome 開發者控制臺中，你可能意想不到的功能
Chrome 有內置的開發者工具。它擁有豐富的特性，比如元素（Elements）、網絡（Network）和安全（Security）。今天，我們主要關註一下 JavaScript 控制臺。
當我最初寫代碼時，我只會使用JavaScript控制臺來打印服務器返回值或變量值。但隨著時間推移和教程的幫助，我發現這個控制臺能做的事遠遠超乎我的想象。
接下來我們說說你可以通過控制臺做到的事情。如果你在電腦的 Chrome 瀏覽器（或其他瀏覽器）中閱讀這篇文章，你可以立刻打開開發者工具並嘗試。
1. 選取DOM元素
如果你對 jQuery 很熟悉，你應該知道 $(‘.class’) 和 $(‘#id’) 選擇器的重要性。他們通過元素關聯的 class 或 id 來選取元素。
但當你在 DOM 中無法使用 jQuery 時，你依然可以在開發者控制臺中做同樣的事情。
$(‘tagName’) 、$(‘.class’) 、$(‘#id’) 和 $(‘.class #id’) 相當於 document.querySelector(‘ ‘)。它返回選擇器在 DOM 中匹配到的第一個元素。
你可以使用 $$(‘tagName’) 或 $$(‘.class’) 構建特殊的選擇器來選取 DOM 中所有匹配的元素（註意是兩個 $ 符號）。這會把結果放入一個數組。你可以繼續通過下標在數組中獲取到特定的某個元素。
舉個例子，$$(‘.className’) 將給你返回所有 class 為 className 的元素，$$(‘.className’)[0] 和 $$(‘.className’)[1] 分別給你返回第一個和第二個元素。
2. 將你的瀏覽器變成編輯器
曾經多次幻想是否在瀏覽器裏面就可以編輯文本？答案是可以的，你可以把你的瀏覽器變成編輯器。你可以在 DOM 中任意添加或移除文本。
你不再需要檢查元素和編輯 HTML。相反，打開開發者控制臺輸入下面內容：
document.body.contentEditable=true
這將使內容變為可編輯狀態。你可以編輯 DOM 裏的任何東西。
3. 查找DOM中元素關聯的事件
當調試時，你肯定對 DOM 中約束元素的事件監聽器感興趣。開發者控制臺讓你更容易找到它們。
你可以做以下事情來找到特定事件的監聽器：
getEventListeners($(‘selector’)).eventName[0].listener
這將展示與特定事件相關聯的監聽器。eventName[0] 是一個包含所有特定事件的數組。比如：
getEventListeners($(‘firstName’)).click[0].listener
它會展示 ID 為「firstName」元素的點擊事件所關聯的監聽器。
4. 監控事件
如果你想在 DOM 中特定元素綁定的事件執行時監控它們，你可以通過控制臺中完成。你可以使用很多不同的命令來監控部分或全部事件：
-
monitorEvents($(‘selector’)) 能夠監控你所選取元素所關聯的所有事件，當事件觸發時，在控制臺打印它們。比如 monitorEvents($(‘#firstName’)) 會打印 ID 為「firstName」的元素綁定的所有事件。
-
monitorEvents($(‘selector’),’eventName’) 將打印元素綁定的特定事件。你可以將事件名字作為參數傳入函數。它將打印特定元素綁定的特定事件。比如，monitorEvents($(‘#firstName’),’click’) 會打印 ID 為「firstName」的元素綁定的點擊事件。
-
monitorEvents($(‘selector’),[‘eventName1′,’eventName3’,…]) 會根據你的要求打印多個事件。傳遞參數包含所有事件的字符串數組，而不是單個事件名字。比如，monitorEvents($(‘#firstName’),[‘click’,’focus’]) 會打印 ID 為「firstName」的元素綁定的點擊事件和焦點事件。
-
unmonitorEvents($(‘selector’)) ：這個會停止監視和在控制臺打印事件。
5. 查詢代碼塊執行時間
JavaScript 控制臺有一個名為 console.time(‘labelName’) 的重要函數，它接收一個標記名作為參數，然後開啟計時器。另一個重要函數是 console.timeEnd(‘labelName’) ，它也接收一個標記名作為參數，然後結束特定標記名所關聯的計時器。 舉個例子：
console.time(‘myTime‘); //Starts the timer with label - myTime
console.timeEnd(‘myTime‘); //Ends the timer with Label - myTime
//Output: myTime:123.00 ms
上面兩行代碼給我們展示了計時器開始和結束的間隔時間。
我們可以改進它來計算代碼塊的執行時間。
舉個例子，如果我想知道一個循環的執行時間。我可以這樣做：
console.time(‘myTime‘); //Starts the timer with label - myTime
for(var i=0; i < 100000; i++){
2+4+5;
}
console.timeEnd(‘mytime‘); //Ends the timer with Label - myTime
//Output - 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}]
當我們在控制臺輸入變量名時，它給我們返回的格式是對象數組。這很有用。你可以展開對象查看屬性值。
但當屬性增加時，這變得難於理解。因此，要想清楚地表現變量，我們可以把它展示成表格。
console.table(variableName) 把變量和它的所有屬性展現城表格結構。如下所示：
7. 檢查DOM中的元素
你可以直接在控制臺中檢查元素：
-
inspect($(‘selector’)) 會檢查與選擇器匹配的元素，並切換 Chrome 開發者工具到元素標簽頁。舉個例子，inspect($(‘#firstName’)) 檢查 ID 為「firstName」的元素，inspect($(‘a’)[3]) 檢查 DOM 中第 4 個錨點元素。
-
$0、$1、$2 等等能幫助你取到最近檢查的元素。比如，$0 給你返回上次檢查的 DOM 元素，$1 返回上上次檢查的 DOM 元素。
8. 列舉元素的屬性
你可以在控制臺中做以下事情來列舉一個元素的所有屬性。
dir($(‘selector’)) 返回一個對象和與其 DOM 元素關聯的所有屬性。你可以展開它查看細節。
9. 檢索最近一個結果的值
你可以把控制臺當做計算器。一旦你這麽做，你可能需要在計算中使用上一次的計算結果。下面是如何從內存中取到上一次計算的結果。
$_
就像下面這樣：
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 JavaScript 控制臺的幾個例子。我希望這些小貼士能讓你的生活更美好。
Chrome 開發者控制臺中，你可能意想不到的功能