天啦嚕!原來Chrome自帶的開發者工具還能這么用!
(提升JS調試能力的10個技巧)
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') 方法來停止並輸出某個計時器的時間。例如：
1 console.time('myTime'); //設定計時器開始 - myTime 2 console.timeEnd('mytime'); //結束並輸出計時時長 - myTime 3 4 //輸出: myTime:123.00 ms
再舉一個通過計時器來計算代碼塊運行時間的例子：
1 console.time('myTime'); //開始計時 - myTime 2 3 for(var i=0; i < 100000; i++){ 4 2+4+5; 5 } 6 7 console.timeEnd('mytime'); //結束並輸出計時時長 - myTime 8 9 //輸出 - 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控制台里進行計算時，可以通過$_來獲取最后的計算結果值，還是直接看例子吧：
1 2+3+4 2 9 //- The Answer of the SUM is 9 3 4 $_ 5 9 // Gives the last Result 6 7 $_ * $_ 8 81 // As the last Result was 9 9 10 Math.sqrt($_) 11 9 // As the last Result was 81 12 13 $_ 14 9 // As the Last Result is 9
10.清空控制台輸出
當你需要這么做的時候，只需要輸入 clear() 然后回車就好啦！
Chrome開發者工具的強大遠遠超出你的想象！這只是其中的一部分小技巧而已，希望能夠幫到你！
感謝您的閱讀，要是您有什么自己的獨門小技巧，也希望您在評論區與大家分享！
原文轉自: 知乎. 版權歸原作者所有.
原文鏈接：Things you probably didn't know you could do with Chrome's Developer Console
作者：Swagat Kumar Swain
Lionden 2016年10月09日
E-mail：hsdlionden@hotmail.com
轉載請注明原文地址和博客園Lionden：http://www.cnblogs.com/lionden/