Chrome內(nèi)嵌的開發(fā)者工具擁有很多特性，例如網(wǎng)頁元素踪少，網(wǎng)絡(luò)塘安，和安全。今天我們將全部注意力投入到它的JavaScript控制臺(tái)援奢。
我剛開始編程時(shí)兼犯，僅僅把JavaScript控制臺(tái)當(dāng)做服務(wù)器響應(yīng)包的日志輸出，或者輸出變量的值。隨后切黔，在幫助文檔的幫助下砸脊，我發(fā)現(xiàn)了控制臺(tái)可以做的很多事情都是我未曾想象過的。
以下是非常有用的功能纬霞，如果你閱讀這篇文章時(shí)使用的是Chrome瀏覽器凌埂，你甚至可以立即打開它的開發(fā)工具并嘗試這些功能。
1. 選擇DOM元素
如果你對(duì)jQuery比較熟悉诗芜，你知道('#id')是非常重要的瞳抓，它們可以利用和DOM元素相關(guān)聯(lián)的id或class對(duì)元素進(jìn)行選擇。
但是當(dāng)你不在jQuery和DOM環(huán)境中時(shí)绢陌，你仍然可以利用開發(fā)者控制臺(tái)并使用相同的功能操作DOM挨下。
$('tagName')熔恢、$('.class')脐湾、$('#id')、$('.class #id')和document.querySelector('')等價(jià)叙淌，將返回所匹配元素列表的第一個(gè)元素秤掌。
你可以使用雙美元符$$('tagName')或$$('.class')選擇被匹配的所有DOM元素，這些元素將被放入一個(gè)數(shù)組中鹰霍。更進(jìn)一步闻鉴，你可以通過指定數(shù)組中的一個(gè)下標(biāo)從而選出其中特定元素。
例如茂洒，$$('.className')將返回包含類className的所有元素孟岛，$$('.className')[0]和$$('.className')[1]將分別返回其中的第一個(gè)和第二個(gè)元素。
2. 把你的瀏覽器變成一個(gè)編輯器
是否可以在瀏覽器中編輯文字督勺？這個(gè)問題你想過多少次渠羞？答案是可以。你可以把你的瀏覽器變成一個(gè)編輯器智哀，你可以在任意DOM中增加或刪除文字次询。
你不再需要在HTML文件中編輯這個(gè)元素了，相反的瓷叫，打開開發(fā)者控制臺(tái)屯吊，并輸入以下命令：
document.body.contentEditable=true
該命令將使頁面可編輯，此時(shí)你幾乎可以編輯DOM中的任何東西摹菠。
3. 查找DOM中和某個(gè)元素相關(guān)聯(lián)的事件
Debug時(shí)盒卸，你應(yīng)該對(duì)查找DOM中和某個(gè)元素綁定的事件監(jiān)聽者感興趣。開發(fā)者控制臺(tái)讓這件事變得簡單次氨。
getEventListeners($('selector'))返回綁定在指定元素上的所有事件對(duì)象的一個(gè)數(shù)組世落，你可以展開該對(duì)象從而查看事件：
你可以輸入以下命令，從而輸出監(jiān)聽器上的特定事件：
getEventListeners($(‘selector’)).eventName[0].listener
該操作將展示監(jiān)聽器上綁定的特定事件，這里eventName[0]是一個(gè)列有特定事件的事件數(shù)組屉佳，例如：
getEventListeners($(‘firstName’)).click[0].listener
...將展示與ID為'firstName'元素相關(guān)聯(lián)的點(diǎn)擊事件的監(jiān)聽者谷朝。
4. 監(jiān)控事件
當(dāng)你想監(jiān)控DOM中某個(gè)元素執(zhí)行中的事件，你也可以在開發(fā)者控制臺(tái)中完成武花。以下是不同的監(jiān)控這些事件的命令：
-
monitorEvents($('selector'))：監(jiān)控選擇器指定元素所關(guān)聯(lián)的所有事件圆凰，一旦事件觸發(fā)，將日志記錄到控制臺(tái)体箕。例如专钉，monitorEvents($('#firstName'))將記錄綁定在ID為'firstName'的元素上的所有事件。 -
monitorEvents($(‘selector’),’eventName’)：將記錄綁定在元素上的特定事件累铅，你可以將事件名作為參數(shù)傳遞給該函數(shù)跃须。例如，monitorEvents($('#firstName'), 'click')將記錄所有綁定在ID為'firstName'的元素上的點(diǎn)擊事件娃兽。 -
monitorEvents($(‘selector’),[‘eventName1’,’eventName3',….])：該命令將記錄多個(gè)事件菇民，具體數(shù)量取決于你的需求。區(qū)別是需要傳遞一組事件字符串?dāng)?shù)組作為參數(shù)投储，而不是單個(gè)事件名第练。例如monitorEvents($('#firstName'), ['click', 'focus'])將記錄在ID為'firstName'元素上所綁定的點(diǎn)擊和焦點(diǎn)事件。 -
unmonitorEvents($(‘selector’))：停止監(jiān)控和記錄控制臺(tái)中的事件玛荞。
5. 查看某個(gè)代碼塊的執(zhí)行時(shí)間
console.time('labelName')是JavaScript console的基本函數(shù)娇掏，它接受一個(gè)標(biāo)簽名作為參數(shù)，并開始計(jì)時(shí)勋眯。對(duì)應(yīng)的婴梧，console.timeEnd('labelName')是另一個(gè)基本函數(shù)，它同樣接受標(biāo)簽名作為參數(shù)客蹋，并結(jié)束標(biāo)簽名對(duì)應(yīng)的時(shí)間塞蹭。
例如：
console.time('myTime'); //Starts the timer with label - myTime
console.timeEnd('mytime'); //Ends the timer with Label - myTime
//Output: myTime:123.00 ms
上面代碼的前兩行將返回時(shí)間開始到時(shí)間結(jié)束之間的時(shí)間。
我們可以利用它來計(jì)算執(zhí)行一段代碼所消耗的時(shí)間嚼酝。
例如浮还，我們想知道執(zhí)行一個(gè)循環(huán)所消耗的時(shí)間，可以這樣做：
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è)我們有一個(gè)數(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}]
當(dāng)我們在控制臺(tái)敲入變量名闽巩，將會(huì)以數(shù)組對(duì)象的形式展示钧舌，這非常有幫助，你可以展開對(duì)象從而查看對(duì)象值涎跨。
但當(dāng)屬性數(shù)量增加時(shí)洼冻，是比較難理解的。因此隅很，為了更清晰的展示變量數(shù)據(jù)撞牢，我們可以將它們放到表格中。
console.table(variableName)將變量及其屬性以表格的結(jié)構(gòu)展示。它們看起來像這樣：
7. 檢查DOM中的元素
在控制臺(tái)中屋彪，你可以直接檢查某個(gè)元素
-
inspect($('selector'))將監(jiān)視被匹配的元素所宰，這個(gè)元素會(huì)被列在Chrome Developer Tool是的Elements標(biāo)簽欄。例如inspect($('#firstName'))將監(jiān)視ID為'firstName'的元素畜挥；inspect($('a'[3]))將監(jiān)視DOM中第4個(gè)<a>元素 -
1,
0返回最后一個(gè)被監(jiān)視的元素蟹但，而$1返回倒數(shù)第二個(gè)躯泰。
8. 列出元素的屬性
如果你想列出元素所有的屬性，你也可以直接在控制臺(tái)完成华糖。
dir($('selector'))返回一個(gè)包含關(guān)聯(lián)元素中所有屬性的對(duì)象麦向，你可以展開查看更多細(xì)節(jié)。
9. 重新獲取上一次結(jié)果的值
你可以把控制臺(tái)當(dāng)做一個(gè)計(jì)算器客叉，當(dāng)你這樣做時(shí)诵竭，你可能需要在第二個(gè)算式中使用第一個(gè)算式的計(jì)算結(jié)果，以下是如何在內(nèi)存中獲取前一個(gè)計(jì)算結(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. 清空控制臺(tái)和內(nèi)存
如果你想清空控制臺(tái)和它的內(nèi)存十办，只需要輸入：
clear()
這里只是Chrome的Javascript控制臺(tái)的部分例子秀撇，我希望這些小技巧可以讓你的工作更高效超棺。
原文：Things you probably didn’t know you could do with Chrome’s Developer Console
