Chrome 开发者控制台中包含您可能意想不到的功能
.png)
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]将分别首先返回你和第二个要素。
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) 在表结构中显示变量及其所有属性。 如下：
7. 检查 DOM 中的元素
您可以直接在控制台中检查元素：
8. 列出元素的属性
您可以在控制台中执行以下操作来列出元素的所有属性。
dir($('selector')) 返回一个对象以及与其 DOM 元素关联的所有属性。 您可以展开它以查看详细信息。
9. 检索最近结果的值
您可以将控制台视为计算器。 执行此操作后，您可能需要在计算中使用最后的计算结果。 下面介绍如何从内存中获取上次计算的结果。
$_
像这样：
2+3+4
9//- SUM 的答案是 9
$_
9//给出最后的结果
$_ * $_
81 // 因为最后的结果是 9
数学。 开方($_)
9// 因为最后的结果是81
$_
9// 因为最后的结果是9
10.清除控制台和内存
如果您想清除控制台和内存，只需键入：
清除（）
然后按 Enter 键。 是酱油。
以下是使用 Chrome JavaScript 控制台的一些示例。 我希望这些建议能让您的生活更美好。
