Chrome 开发者控制台中包含您可能意想不到的功能

2023-08-15 1331阅读

Chrome 有内置的开发者工具。它具有丰富的功能,如元素、网络和安全。今天,我们将重点关注 JavaScript 控制台。当我最初编写代码时,我只会使用 JavaScript 控制台来打印服务器返回值或变量值。但随着时间的推移,在教程的帮助下,我发现这个控制台的功能远远超出了我的想象。如果您在计算机上的 Chrome中阅读本文,您可以立即打开开发人员工具并尝试一下。但是当您无法在 DOM 中使用 jQuery 时,您仍然可以在开发者控制台中执行相同的操作。它返回 DOM 中选择器匹配的第一个元素。这会将结果放入数组中。相反,打开开发者控制台并输入以下内容:。开发者控制台使您可以更轻松地找到它们。这将显示与特定事件关联的侦听器。

中文:Swagat Kumar Swain 翻译:伯乐在线专栏作家-孙腾浩

如需转载请发送“转载”二字查看说明

Chrome 有内置的开发者工具。 它具有丰富的功能,如元素(Elements)、网络(Network)和安全(Security)。 今天,我们将重点关注 JavaScript 控制台

当我最初编写代码时,我只会使用 JavaScript 控制台来打印服务器返回值或变量值。 但随着时间的推移,在教程的帮助下,我发现这个控制台的功能远远超出了我的想象。

接下来我们来谈谈通过控制台可以执行的操作。 如果您在计算机上的 Chrome(或其他浏览器)中阅读本文,您可以立即打开开发人员工具并尝试一下。

1.选择DOM元素

如果您熟悉 jQuery,您应该知道 $('.class') 和 $('#id') 选择器的重要性。 他们通过关联的类或 ID 选择元素。

但是当您无法在 DOM 中使用 jQuery 时,您仍然可以在开发者控制台中执行相同的操作。

$('tagName')、$('.class')、$('#id') 和 $('.class #id') 等价于 document.querySelector(' ')。 它返回 DOM 中选择器匹配的第一个元素。

您可以使用 $$('tagName') 或 $$('.class') 构建特殊选择器来选择 DOM 中的所有匹配元素(注意两个 $ 符号)。 这会将结果放入数组中。 可以通过下标继续获取数组中的特定元素。

例如,$$('.className')将返回所有类为className的元素,$$('.className')[0]和$$('.className')[1]将分别首先返回你和第二个要素。

jquery超链接点击事件_jquery模拟点击事件_jquery 特定a 点击事件

2. 将浏览器变成编辑器

您是否想过是否可以在浏览器中编辑文本? 答案是肯定的,您可以将浏览器变成编辑器。 您可以在 DOM 中的任何位置添加或删除文本。

您不再需要检查元素和编辑 HTML。 相反,打开开发者控制台并输入以下内容:

document.body.contentEditable=true

这将使内容可编辑。 您可以编辑 DOM 中的任何内容。

3. 查找与 DOM 中的元素关联的事件

调试时,您肯定对 DOM 中绑定元素的事件侦听器感兴趣。 开发者控制台使您可以更轻松地找到它们。

您可以通过执行以下操作来查找特定事件的侦听器:

getEventListeners($('选择器')).eventName[0].listener

这将显示与特定事件关联的侦听器。 eventName[0] 是一个包含所有特定事件的数组。 例如:

getEventListeners($('firstName')).click[0].listener

它将显示与 ID 为“firstName”的元素的单击事件关联的侦听器。

4. 监控事件

如果您想在 DOM 中特定元素执行时监视绑定到这些元素的事件,您可以通过控制台来执行此操作。 您可以使用许多不同的命令监视部分或全部事件:

5.查询代码块执行时间

JavaScript 控制台有一个名为 console.time('labelName') 的重要函数,它将标签名称作为参数并启动计时器。 另一个重要的函数是 console.timeEnd('labelName'),它也将标签名称作为参数并结束与该特定标签名称关联的计时器。 例如:

console.time('myTime');//启动带有标签 - myTime 的计时器

console.timeEnd('myTime');//以标签 - myTime 结束计时器

//输出:myTime:123.00毫秒

上面两行代码向我们展示了计时器开始和结束之间的间隔。

我们可以改进它来计算代码块的执行时间。

例如,如果我想知道循环的执行时间。 我可以做这个:

console.time('myTime');//启动带有标签 - myTime 的计时器

for(vari=0;i < 100000;i++){

2+4+5;

console.timeEnd('mytime');//以标签 - myTime 结束计时器

//输出 - myTime:12345.00 毫秒

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) 在表结构中显示变量及其所有属性。 如下:

jquery模拟点击事件_jquery超链接点击事件_jquery 特定a 点击事件

7. 检查 DOM 中的元素

您可以直接在控制台中检查元素:

8. 列出元素的属性

您可以在控制台中执行以下操作来列出元素的所有属性。

dir($('selector')) 返回一个对象以及与其 DOM 元素关联的所有属性。 您可以展开它以查看详细信息。

9. 检索最近结果的值

您可以将控制台视为计算器。 执行此操作后,您可能需要在计算中使用最后的计算结果。 下面介绍如何从内存中获取上次计算的结果。

$_

像这样:

2+3+4

9//- SUM 的答案是 9

$_

9//给出最后的结果

$_ * $_

81 // 因为最后的结果是 9

数学。 开方($_)

9// 因为最后的结果是81

$_

9// 因为最后的结果是9

10.清除控制台和内存

如果您想清除控制台和内存,只需键入:

清除()

然后按 Enter 键。 是酱油。

以下是使用 Chrome JavaScript 控制台的一些示例。 我希望这些建议能让您的生活更美好。

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]