Chrome開發者控制檯的這些功能你都知道嗎？

在我編程的過程當中，這個控制檯爲我提供了大量的幫助。php

若是你正在電腦端閱讀這篇文章，你能夠在閱讀的同時打開Chrome來實踐一下。編程

1. 選擇DOM元素

若是你熟悉jQuery，你必定知道$(‘.class’)和$(‘#id’)選擇器有多重要。它們會經過類或是與其相關的ID來選擇DOM元素。瀏覽器

可是其實在開發者控制檯中，即便你沒法在DOM中使用jQuery，你同樣能夠這樣選擇。ruby

$(‘tagName’) $(‘.class’) $(‘#id’)和$(‘.class #id’)至關於document.querySelector(‘ ‘)。它會反回DOM中與選擇器相符的第一個元素。bash

你可使用$$(‘tagName’)或是$$(‘.class’) 來根據具體的選擇器來選擇全部DOM中的全部元素。這個操做會生成一個字符串。以後，你能夠經過定義元素在字符串中的位置，來選擇某個特定的元素。編輯器

例如，$$(‘.className’)能幫你選擇全部帶有「className」這個類的元素。而$$(‘.className’)[0]和$$(‘.className’)[1]可以讓你選擇字符串中的第一個和第二個元素。函數

2. 將瀏覽器轉換爲編輯器

你是否曾經想要在瀏覽器中編輯文本？沒問題，你能夠將瀏覽器轉化爲編輯器。而後在DOM中添加或是移除文本。工具

你再也不須要檢查元素，而後編輯HTML文件。如今，你只須要打開開發者控制檯，而後輸入下列命令：oop

document.body.contentEditable=true

這個命令會讓內容編程能夠編輯的形式。以後你就能夠在DOM中進行編輯了。ui

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()

而後點擊回車，就是真麼簡單。