Chrome內(nèi)嵌的開發(fā)者工具擁有很多特性，例如網(wǎng)頁元素，網(wǎng)絡，和安全。今天我們將全部注意力投入到它的JavaScript控制臺。
我剛開始編程時，僅僅把JavaScript控制臺當做服務器響應包的日志輸出，或者輸出變量的值。隨后，在幫助文檔的幫助下，我發(fā)現(xiàn)了控制臺可以做的很多事情都是我未曾想象過的。
以下是非常有用的功能，如果你閱讀這篇文章時使用的是Chrome瀏覽器，你甚至可以立即打開它的開發(fā)工具并嘗試這些功能。
1. 選擇DOM元素
如果你對jQuery比較熟悉，你知道('#id')是非常重要的，它們可以利用和DOM元素相關聯(lián)的id或class對元素進行選擇。
但是當你不在jQuery和DOM環(huán)境中時，你仍然可以利用開發(fā)者控制臺并使用相同的功能操作DOM。
$('tagName')、$('.class')、$('#id')、$('.class #id')和document.querySelector('')等價，將返回所匹配元素列表的第一個元素。
你可以使用雙美元符$$('tagName')或$$('.class')選擇被匹配的所有DOM元素，這些元素將被放入一個數(shù)組中。更進一步，你可以通過指定數(shù)組中的一個下標從而選出其中特定元素。
例如，$$('.className')將返回包含類className的所有元素，$$('.className')[0]和$$('.className')[1]將分別返回其中的第一個和第二個元素。
2. 把你的瀏覽器變成一個編輯器
是否可以在瀏覽器中編輯文字？這個問題你想過多少次？答案是可以。你可以把你的瀏覽器變成一個編輯器，你可以在任意DOM中增加或刪除文字。
你不再需要在HTML文件中編輯這個元素了，相反的，打開開發(fā)者控制臺，并輸入以下命令：
document.body.contentEditable=true
該命令將使頁面可編輯，此時你幾乎可以編輯DOM中的任何東西。
3. 查找DOM中和某個元素相關聯(lián)的事件
Debug時，你應該對查找DOM中和某個元素綁定的事件監(jiān)聽者感興趣。開發(fā)者控制臺讓這件事變得簡單。
getEventListeners($('selector'))返回綁定在指定元素上的所有事件對象的一個數(shù)組，你可以展開該對象從而查看事件：
你可以輸入以下命令，從而輸出監(jiān)聽器上的特定事件：
getEventListeners($(‘selector’)).eventName[0].listener
該操作將展示監(jiān)聽器上綁定的特定事件，這里eventName[0]是一個列有特定事件的事件數(shù)組，例如：
getEventListeners($(‘firstName’)).click[0].listener
...將展示與ID為'firstName'元素相關聯(lián)的點擊事件的監(jiān)聽者。
4. 監(jiān)控事件
當你想監(jiān)控DOM中某個元素執(zhí)行中的事件，你也可以在開發(fā)者控制臺中完成。以下是不同的監(jiān)控這些事件的命令：
-
monitorEvents($('selector'))：監(jiān)控選擇器指定元素所關聯(lián)的所有事件，一旦事件觸發(fā)，將日志記錄到控制臺。例如，monitorEvents($('#firstName'))將記錄綁定在ID為'firstName'的元素上的所有事件。 -
monitorEvents($(‘selector’),’eventName’)：將記錄綁定在元素上的特定事件，你可以將事件名作為參數(shù)傳遞給該函數(shù)。例如，monitorEvents($('#firstName'), 'click')將記錄所有綁定在ID為'firstName'的元素上的點擊事件。 -
monitorEvents($(‘selector’),[‘eventName1’,’eventName3',….])：該命令將記錄多個事件，具體數(shù)量取決于你的需求。區(qū)別是需要傳遞一組事件字符串數(shù)組作為參數(shù)，而不是單個事件名。例如monitorEvents($('#firstName'), ['click', 'focus'])將記錄在ID為'firstName'元素上所綁定的點擊和焦點事件。 -
unmonitorEvents($(‘selector’))：停止監(jiān)控和記錄控制臺中的事件。
5. 查看某個代碼塊的執(zhí)行時間
console.time('labelName')是JavaScript console的基本函數(shù)，它接受一個標簽名作為參數(shù)，并開始計時。對應的，console.timeEnd('labelName')是另一個基本函數(shù)，它同樣接受標簽名作為參數(shù)，并結(jié)束標簽名對應的時間。
例如：
console.time('myTime'); //Starts the timer with label - myTime
console.timeEnd('mytime'); //Ends the timer with Label - myTime
//Output: myTime:123.00 ms
上面代碼的前兩行將返回時間開始到時間結(jié)束之間的時間。
我們可以利用它來計算執(zhí)行一段代碼所消耗的時間。
例如，我們想知道執(zhí)行一個循環(huán)所消耗的時間，可以這樣做：
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. 將變量的值排列到表格中
假設我們有一個數(shù)組變量看起來像這樣：
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}]
當我們在控制臺敲入變量名，將會以數(shù)組對象的形式展示，這非常有幫助，你可以展開對象從而查看對象值。
但當屬性數(shù)量增加時，是比較難理解的。因此，為了更清晰的展示變量數(shù)據(jù)，我們可以將它們放到表格中。
console.table(variableName)將變量及其屬性以表格的結(jié)構(gòu)展示。它們看起來像這樣：
7. 檢查DOM中的元素
在控制臺中，你可以直接檢查某個元素
-
inspect($('selector'))將監(jiān)視被匹配的元素，這個元素會被列在Chrome Developer Tool是的Elements標簽欄。例如inspect($('#firstName'))將監(jiān)視ID為'firstName'的元素；inspect($('a'[3]))將監(jiān)視DOM中第4個<a>元素 -
1,
0返回最后一個被監(jiān)視的元素，而$1返回倒數(shù)第二個。
8. 列出元素的屬性
如果你想列出元素所有的屬性，你也可以直接在控制臺完成。
dir($('selector'))返回一個包含關聯(lián)元素中所有屬性的對象，你可以展開查看更多細節(jié)。
9. 重新獲取上一次結(jié)果的值
你可以把控制臺當做一個計算器，當你這樣做時，你可能需要在第二個算式中使用第一個算式的計算結(jié)果，以下是如何在內(nèi)存中獲取前一個計算結(jié)果的方式：
$_
類似這樣：
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. 清空控制臺和內(nèi)存
如果你想清空控制臺和它的內(nèi)存，只需要輸入：
clear()
這里只是Chrome的Javascript控制臺的部分例子，我希望這些小技巧可以讓你的工作更高效。
原文：Things you probably didn’t know you could do with Chrome’s Developer Console
