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。相反，開啟開發者控制檯輸入下面內容：

這將使內容變為可編輯狀態。你可以編輯 DOM 裡的任何東西。

3. 查詢DOM中元素關聯的事件

當除錯時，你肯定對 DOM 中約束元素的事件監聽器感興趣。開發者控制檯讓你更容易找到它們。

你可以做以下事情來找到特定事件的監聽器：

這將展示與特定事件相關聯的監聽器。eventName[0] 是一個包含所有特定事件的陣列。比如：

它會展示 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’) ，它也接收一個標記名作為引數，然後結束特定標記名所關聯的計時器。 舉個例子：

上面兩行程式碼給我們展示了計時器開始和結束的間隔時間。

我們可以改進它來計算程式碼塊的執行時間。

舉個例子，如果我想知道一個迴圈的執行時間。我可以這樣做：

6. 將變數裡的值排列成表格

比如我們有一個下面這樣的物件陣列：

當我們在控制檯輸入變數名時，它給我們返回的格式是物件陣列。這很有用。你可以展開物件檢視屬性值。

但當屬性增加時，這變得難於理解。因此，要想清楚地表現變數，我們可以把它展示成表格。

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. 檢索最近一個結果的值

你可以把控制檯當做計算器。一旦你這麼做，你可能需要在計算中使用上一次的計算結果。下面是如何從記憶體中取到上一次計算的結果。

就像下面這樣：

10. 清空控制檯和記憶體

如果你想清空控制檯和記憶體，只需要輸入：

然後敲Enter鍵。就是醬紫。

這是使用 Chrome JavaScript 控制檯的幾個例子。我希望這些小貼士能讓你的生活更美好。

打賞支援我翻譯更多好文章，謝謝！

打賞譯者