Chrome自帶的開發者工具使用方法教程

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開發者工具的強大遠遠超出你的想象！這只是其中的一部分小技巧而已，但願可以幫到你！

感謝您的閱讀，要是您有什麼本身的獨門小技巧，也但願您在評論區與你們分享！

原文連接 Things you probably didn't know you could do with Chrome's Developer Console