Chrome 開發(fā)者控制臺中，你可能意想不到的功能
接下來我們說說你可以通過控制臺做到的事情。如果你在電腦的 Chrome 瀏覽器（或其他瀏覽器）中閱讀這篇文章，你可以立刻打開開發(fā)者工具并嘗試。
1. 選取DOM元素
如果你對 jQuery 很熟悉，你應(yīng)該知道 $(‘.class’) 和 $(‘#id’) 選擇器的重要性。他們通過元素關(guān)聯(lián)的 class 或 id 來選取元素。
但當(dāng)你在 DOM 中無法使用 jQuery 時，你依然可以在開發(fā)者控制臺中做同樣的事情。
$(‘tagName’) 、$(‘.class’) 、$(‘#id’) 和 $(‘.class #id’) 相當(dāng)于 document.querySelector(‘ ‘)。它返回選擇器在 DOM 中匹配到的第一個元素。
你可以使用 $$(‘tagName’) 或 $$(‘.class’) 構(gòu)建特殊的選擇器來選取 DOM 中所有匹配的元素（注意是兩個 $ 符號）。這會把結(jié)果放入一個數(shù)組。你可以繼續(xù)通過下標(biāo)在數(shù)組中獲取到特定的某個元素。
舉個例子，$$(‘.className’) 將給你返回所有 class 為 className 的元素，$$(‘.className’)[0] 和 $$(‘.className’)[1] 分別給你返回第一個和第二個元素。
2. 將你的瀏覽器變成編輯器
曾經(jīng)多次幻想是否在瀏覽器里面就可以編輯文本？答案是可以的，你可以把你的瀏覽器變成編輯器。你可以在 DOM 中任意添加或移除文本。
你不再需要檢查元素和編輯 HTML。相反，打開開發(fā)者控制臺輸入下面內(nèi)容：
document.body.contentEditable=true
這將使內(nèi)容變?yōu)榭删庉嫚顟B(tài)。你可以編輯 DOM 里的任何東西。
3. 查找DOM中元素關(guān)聯(lián)的事件
當(dāng)調(diào)試時，你肯定對 DOM 中約束元素的事件監(jiān)聽器感興趣。開發(fā)者控制臺讓你更容易找到它們。
你可以做以下事情來找到特定事件的監(jiān)聽器：
getEventListeners($(‘selector’)).eventName[0].listener
這將展示與特定事件相關(guān)聯(lián)的監(jiān)聽器。eventName[0] 是一個包含所有特定事件的數(shù)組。比如：
getEventListeners($(‘firstName’)).click[0].listener
它會展示 ID 為「firstName」元素的點(diǎn)擊事件所關(guān)聯(lián)的監(jiān)聽器。
4. 監(jiān)控事件
如果你想在 DOM 中特定元素綁定的事件執(zhí)行時監(jiān)控它們，你可以通過控制臺中完成。你可以使用很多不同的命令來監(jiān)控部分或全部事件：
-
monitorEvents($(‘selector’)) 能夠監(jiān)控你所選取元素所關(guān)聯(lián)的所有事件，當(dāng)事件觸發(fā)時，在控制臺打印它們。比如 monitorEvents($(‘#firstName’)) 會打印 ID 為「firstName」的元素綁定的所有事件。
-
monitorEvents($(‘selector’),’eventName’) 將打印元素綁定的特定事件。你可以將事件名字作為參數(shù)傳入函數(shù)。它將打印特定元素綁定的特定事件。比如，monitorEvents($(‘#firstName’),’click’) 會打印 ID 為「firstName」的元素綁定的點(diǎn)擊事件。
-
monitorEvents($(‘selector’),[‘eventName1′,’eventName3’,…]) 會根據(jù)你的要求打印多個事件。傳遞參數(shù)包含所有事件的字符串?dāng)?shù)組，而不是單個事件名字。比如，monitorEvents($(‘#firstName’),[‘click’,’focus’]) 會打印 ID 為「firstName」的元素綁定的點(diǎn)擊事件和焦點(diǎn)事件。
-
unmonitorEvents($(‘selector’)) ：這個會停止監(jiān)視和在控制臺打印事件。
5. 查詢代碼塊執(zhí)行時間
JavaScript 控制臺有一個名為 console.time(‘labelName’) 的重要函數(shù)，它接收一個標(biāo)記名作為參數(shù)，然后開啟計時器。另一個重要函數(shù)是 console.timeEnd(‘labelName’) ，它也接收一個標(biāo)記名作為參數(shù)，然后結(jié)束特定標(biāo)記名所關(guān)聯(lián)的計時器。 舉個例子：
console.time('myTime'); //Starts the timer with label - myTime
console.timeEnd('myTime'); //Ends the timer with Label - myTime
//Output: myTime:123.00 ms
上面兩行代碼給我們展示了計時器開始和結(jié)束的間隔時間。
我們可以改進(jìn)它來計算代碼塊的執(zhí)行時間。
舉個例子，如果我想知道一個循環(huán)的執(zhí)行時間。我可以這樣做：
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ù)組：
ar 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)我們在控制臺輸入變量名時，它給我們返回的格式是對象數(shù)組。這很有用。你可以展開對象查看屬性值。
但當(dāng)屬性增加時，這變得難于理解。因此，要想清楚地表現(xiàn)變量，我們可以把它展示成表格。
console.table(variableName) 把變量和它的所有屬性展現(xiàn)城表格結(jié)構(gòu)。如下所示：
7. 檢查DOM中的元素
你可以直接在控制臺中檢查元素：
-
inspect($(‘selector’)) 會檢查與選擇器匹配的元素，并切換 Chrome 開發(fā)者工具到元素標(biāo)簽頁。舉個例子，inspect($(‘#firstName’)) 檢查 ID 為「firstName」的元素，inspect($(‘a(chǎn)’)[3]) 檢查 DOM 中第 4 個錨點(diǎn)元素。
-
$0、$1、$2 等等能幫助你取到最近檢查的元素。比如，$0 給你返回上次檢查的 DOM 元素，$1 返回上上次檢查的 DOM 元素。
8. 列舉元素的屬性
你可以在控制臺中做以下事情來列舉一個元素的所有屬性。
dir($(‘selector’)) 返回一個對象和與其 DOM 元素關(guān)聯(lián)的所有屬性。你可以展開它查看細(xì)節(jié)。
9. 檢索最近一個結(jié)果的值
你可以把控制臺當(dāng)做計算器。一旦你這么做，你可能需要在計算中使用上一次的計算結(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
clear()
這是使用 Chrome JavaScript 控制臺的幾個例子。我希望這些小貼士能讓你的生活更美好。
浙公網(wǎng)安備 33010602011771號