Chrome 有內置的開發者工具。它擁有豐富的特性,好比元素(Elements)、網絡(Network)和安全(Security)。今天,咱們主要關注一下 JavaScript 控制檯。數組
當我最初寫代碼時,我只會使用JavaScript控制檯來打印服務器返回值或變量值。但隨着時間推移和教程的幫助,我發現這個控制檯能作的事遠遠超乎個人想象。瀏覽器
接下來咱們說說你能夠經過控制檯作到的事情。若是你在電腦的 Chrome 瀏覽器(或其餘瀏覽器)中閱讀這篇文章,你能夠馬上打開開發者工具並嘗試。安全
1. 選取DOM元素服務器
若是你對 jQuery 很熟悉,你應該知道 $(‘.class’) 和 $(‘#id’) 選擇器的重要性。他們經過元素關聯的 class 或 id 來選取元素。網絡
但當你在 DOM 中沒法使用 jQuery 時,你依然能夠在開發者控制檯中作一樣的事情。編輯器
$(‘tagName’) 、$(‘.class’) 、$(‘#id’) 和 $(‘.class #id’) 至關於 document.querySelector(‘ ‘)。它返回選擇器在 DOM 中匹配到的第一個元素。ide
你能夠使用 $$(‘tagName’) 或 $$(‘.class’) 構建特殊的選擇器來選取 DOM 中全部匹配的元素(注意是兩個 $ 符號)。這會把結果放入一個數組。你能夠繼續經過下標在數組中獲取到特定的某個元素。函數
舉個例子,$$(‘.className’) 將給你返回全部 class 爲 className 的元素,$$(‘.className’)[0] 和 $$(‘.className’)[1] 分別給你返回第一個和第二個元素。工具
2. 將你的瀏覽器變成編輯器post
曾經屢次幻想是否在瀏覽器裏面就能夠編輯文本?答案是能夠的,你能夠把你的瀏覽器變成編輯器。你能夠在 DOM 中任意添加或移除文本。
你再也不須要檢查元素和編輯 HTML。相反,打開開發者控制檯輸入下面內容:
document.body.contentEditable=true
這將使內容變爲可編輯狀態。你能夠編輯 DOM 裏的任何東西。
3. 查找DOM中元素關聯的事件
當調試時,你確定對 DOM 中約束元素的事件監聽器感興趣。開發者控制檯讓你更容易找到它們。
你能夠作如下事情來找到特定事件的監聽器:
getEventListeners($(‘selector’)).eventName[0].listener
這將展現與特定事件相關聯的監聽器。eventName[0] 是一個包含全部特定事件的數組。好比:
getEventListeners($(‘firstName’)).click[0].listener
它會展現 ID 爲「firstName」元素的點擊事件所關聯的監聽器。
4. 監控事件
若是你想在 DOM 中特定元素綁定的事件執行時監控它們,你能夠經過控制檯中完成。你能夠使用不少不一樣的命令來監控部分或所有事件:
monitorEvents($(‘selector’)) 可以監控你所選取元素所關聯的全部事件,當事件觸發時,在控制檯打印它們。好比 monitorEvents($(‘#firstName’)) 會打印 ID 爲「firstName」的元素綁定的全部事件。
monitorEvents($(‘selector’),’eventName’) 將打印元素綁定的特定事件。你能夠將事件名字做爲參數傳入函數。它將打印特定元素綁定的特定事件。好比,monitorEvents($(‘#firstName’),’click’) 會打印 ID 爲「firstName」的元素綁定的點擊事件。
monitorEvents($(‘selector’),[‘eventName1′,’eventName3’,…]) 會根據你的要求打印多個事件。傳遞參數包含全部事件的字符串數組,而不是單個事件名字。好比,monitorEvents($(‘#firstName’),[‘click’,’focus’]) 會打印 ID 爲「firstName」的元素綁定的點擊事件和焦點事件。
unmonitorEvents($(‘selector’)) :這個會中止監視和在控制檯打印事件。
5. 查詢代碼塊執行時間
JavaScript 控制檯有一個名爲 console.time(‘labelName’) 的重要函數,它接收一個標記名做爲參數,而後開啓計時器。另外一個重要函數是 console.timeEnd(‘labelName’) ,它也接收一個標記名做爲參數,而後結束特定標記名所關聯的計時器。 舉個例子:
console.time('myTime'); //Starts the timer with label - myTime
console.timeEnd('myTime'); //Ends the timer with Label - myTime
//Output: myTime:123.00 ms
上面兩行代碼給咱們展現了計時器開始和結束的間隔時間。
咱們能夠改進它來計算代碼塊的執行時間。
舉個例子,若是我想知道一個循環的執行時間。我能夠這樣作:
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. 將變量裏的值排列成表格
好比咱們有一個下面這樣的對象數組:
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}]
當咱們在控制檯輸入變量名時,它給咱們返回的格式是對象數組。這頗有用。你能夠展開對象查看屬性值。
但當屬性增長時,這變得難於理解。所以,要想清楚地表現變量,咱們能夠把它展現成表格。
console.table(variableName) 把變量和它的全部屬性展示城表格結構。以下所示:
7. 檢查DOM中的元素
你能夠直接在控制檯中檢查元素:
inspect($(‘selector’)) 會檢查與選擇器匹配的元素,並切換 Chrome 開發者工具到元素標籤頁。舉個例子,inspect($(‘#firstName’)) 檢查 ID 爲「firstName」的元素,inspect($(‘a’)[3]) 檢查 DOM 中第 4 個錨點元素。
$0、$一、$2 等等能幫助你取到最近檢查的元素。好比,$0 給你返回上次檢查的 DOM 元素,$1 返回上上次檢查的 DOM 元素。
8. 列舉元素的屬性
你能夠在控制檯中作如下事情來列舉一個元素的全部屬性。
dir($(‘selector’)) 返回一個對象和與其 DOM 元素關聯的全部屬性。你能夠展開它查看細節。
9. 檢索最近一個結果的值
你能夠把控制檯當作計算器。一旦你這麼作,你可能須要在計算中使用上一次的計算結果。下面是如何從內存中取到上一次計算的結果。
$_
就像下面這樣:
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 控制檯的幾個例子。我但願這些小貼士能讓你的生活更美好。