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 中約束元素的事件監聽器感興趣。開發者控制台讓你更容易找到它們。

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

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(vari=;i

2+4+5;

}

console.timeEnd( mytime );//Ends the timer with Label - myTime

//Output - myTime:12345.00 ms

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

比如我們有一個下面這樣的對象數組：

var myArray=[,,,]

當我們在控制台輸入變數名時，它給我們返回的格式是對象數組。這很有用。你可以展開對象查看屬性值。

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

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 控制台的幾個例子。我希望這些小貼士能讓你的生活更美好。

看完本文有收穫？請轉發分享給更多人

關注「前端大全」，提升前端技能

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 前端大全 的精彩文章: