在我編程的過程中，這個控制台為我提供了大量的幫助。
如果你正在電腦端閱讀這篇文章，你可以在閱讀的同時打開Chrome來實踐一下。
1. 選擇DOM元素
如果你熟悉jQuery，你一定知道$(‘.class’)和$(‘#id’)選擇器有多重要。它們會通過類或是與其相關的ID來選擇DOM元素。
但是其實在開發者控制台中，即使你無法在DOM中使用jQuery，你一樣可以這樣選擇。
$(‘tagName’) $(‘.class’) $(‘#id’)和$(‘.class #id’)相當於document.querySelector(‘ ‘)。它會反回DOM中與選擇器相符的第一個元素。
你可以使用$$(‘tagName’)或是$$(‘.class’) 來根據具體的選擇器來選擇所有DOM中的所有元素。這個操作會生成一個字符串。之后，你可以通過定義元素在字符串中的位置，來選擇某個特定的元素。
例如，$$(‘.className’)能幫你選擇所有帶有“className”這個類的元素。而$$(‘.className’)[0]和$$(‘.className’)[1]能夠讓你選擇字符串中的第一個和第二個元素。
2. 將瀏覽器轉換為編輯器
你是否曾經想要在瀏覽器中編輯文本？沒問題，你可以將瀏覽器轉化為編輯器。然后在DOM中添加或是移除文本。
你不再需要檢查元素，然后編輯HTML文件。現在，你只需要打開開發者控制台，然后輸入下列命令：
document.body.contentEditable=true 這個命令會讓內容編程可以編輯的形式。之后你就可以在DOM中進行編輯了。
3.在DOM中尋找與某個元素相關聯的Event
在調試的時候，你一定想要在DOM中找到與某個元素相關聯的event。使用開發者控制台，你可以更輕松的完成這個目標。
getEventListeners($(‘selector’))會發揮一個對象字符串，里面包含着與那個元素有關的所有event。你可以展開對象，查看這些event：
要想找到某個特定event的Listener，你可以使用下面這個命令：
getEventListeners($(‘selector’)).eventName[0].listener 4. 監測Events
當DOM中的某個特定的元素在運行的時候，如果你想要監測與這個元素有關的event，你可以通過開發者控制台來完成。你可以通過多個不同的命令來監測這些event：
monitorEvents($(‘selector’))會根據選擇器中的元素，監測與這個元素有關的所有event，然后在控制台中對這些event進行記錄。
monitorEvents($(‘selector’),’eventName’)會記錄與某個元素有關的一個特定event。你可以將event的名稱作為argument對象發送給函數。
monitorEvents($(‘selector’),[‘eventName1’,’eventName3’,….])會根據你的要求記錄多個event。
unmonitorEvents($(‘selector’)) :停止監測與控制台中的記錄。
5. 尋找某個代碼庫的執行時間
JavaScript控制台有一個名叫console.time(‘labelName’)的基本函數，它會將label的名稱作為argument對象，然后開始計時。還有另一個名叫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我們可以使用這兩條命令來統計某個代碼段的執行時間。
例如，如果我想確定一個loop的執行時間，我可以這樣做：
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. 將變量的值在圖標中顯示
假設我有一個下面這樣的由對象組成的字符串：
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}]在控制台中，當我們輸入變量的名稱時，它會以對象字符串的形式為我們提供值。這個功能非常實用，你可以展開對象，查看這些值。
但是，隨着變量的數量的增多，我們很難對其進行查看。因此，為了更好的查看變量，我們可以用圖表的方式對其進行顯示。
你可以使用console.table(variableName)來完成這個目的：
7. 在DOM中對某個元素進行檢查
你可以在控制台中直接對某個元素進行檢查：
inspect($(‘selector’))會根據你所輸入的選擇器對元素進行檢查。
$0, $1, $2……能幫你找到最近檢查過的元素。
8. 列出元素的Property
如果你想要列出元素的所有property，你可以使用dir($(‘selector’))，它會返回一個帶有所有property的對象，你可以展開對象，查看更多細節。
9. 取回最后一個結果的值
你可以將控制台作為計算器使用。你可以用下面的方式從內存中取回上一次計算的結果：
$_ Here’s what this looks like:
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. 清空控制台和內存
如果你要清空控制台以及內存，你只需要輸入：
clear()
然后點擊回車，就是真么簡單。