Chrome开发者控制台的这些功能你都知道吗？

Chrome内置了一些开发者工具，这些工具提供了不少的功能。今天，咱们将会专一于JavaScript控制台。

在我编程的过程当中，这个控制台为我提供了大量的帮助。

若是你正在电脑端阅读这篇文章，你能够在阅读的同时打开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()

而后点击回车，就是真么简单。