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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

技术分享 

要想找到某个特定eventListener,你可以使用下面这个命令:

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

然后点击回车,就是真么简单。

以上是关于Chrome开发者控制台的这些功能你都知道吗?的主要内容,如果未能解决你的问题,请参考以下文章

Chrome这些调试技巧你都知道吗

Git学习总结_06_作为一名程序员这些代码托管工具你都知道吗?

这些 Web 开发工具,你都知道吗?

Python 这些“重试机制“你都知道吗?

身为初学Java的你,这些IDE的优缺点你都知道吗?

想做前端开发?这些要求你都知道吗?