Chrome 开发者控制台中，你可能意想不到的功能

Chrome 有内置的开发者工具。它拥有丰富的特性，好比元素（Elements）、网络（Network）和安全（Security）。今天，咱们主要关注一下 JavaScript 控制台。

 

当我最初写代码时，我只会使用JavaScript控制台来打印服务器返回值或变量值。但随着时间推移和教程的帮助，我发现这个控制台能作的事远远超乎个人想象。

 

接下来咱们说说你能够经过控制台作到的事情。若是你在电脑的 Chrome 浏览器（或其余浏览器）中阅读这篇文章，你能够马上打开开发者工具并尝试。

 

 

---

 

1. 选取DOM元素

若是你对 jQuery 很熟悉，你应该知道 $(‘.class’) 和 $(‘#id’) 选择器的重要性。他们经过元素关联的 class 或 id 来选取元素。

 

但当你在 DOM 中没法使用 jQuery 时，你依然能够在开发者控制台中作一样的事情。

 

$(‘tagName’) 、$(‘.class’) 、$(‘#id’) 和 $(‘.class #id’) 至关于 document.querySelector(‘ ‘)。它返回选择器在 DOM 中匹配到的第一个元素。

 

你能够使用 $$(‘tagName’) 或 $$(‘.class’) 构建特殊的选择器来选取 DOM 中全部匹配的元素（注意是两个 $ 符号）。这会把结果放入一个数组。你能够继续经过下标在数组中获取到特定的某个元素。

 

举个例子，$$(‘.className’) 将给你返回全部 class 为 className 的元素，$$(‘.className’)[0] 和 $$(‘.className’)[1] 分别给你返回第一个和第二个元素。

 

 

2. 将你的浏览器变成编辑器

曾经屡次幻想是否在浏览器里面就能够编辑文本？答案是能够的，你能够把你的浏览器变成编辑器。你能够在 DOM 中任意添加或移除文本。

 

你再也不须要检查元素和编辑 HTML。相反，打开开发者控制台输入下面内容：

document.body.contentEditable=true

这将使内容变为可编辑状态。你能够编辑 DOM 里的任何东西。

 

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

当调试时，你确定对 DOM 中约束元素的事件监听器感兴趣。开发者控制台让你更容易找到它们。

 

你能够作如下事情来找到特定事件的监听器：

getEventListeners($(‘selector’)).eventName[0].listener

 

这将展现与特定事件相关联的监听器。eventName[0] 是一个包含全部特定事件的数组。好比：

getEventListeners($(‘firstName’)).click[0].listener

 

它会展现 ID 为「firstName」元素的点击事件所关联的监听器。

 

4. 监控事件

 

若是你想在 DOM 中特定元素绑定的事件执行时监控它们，你能够经过控制台中完成。你能够使用不少不一样的命令来监控部分或所有事件：

 

• monitorEvents($(‘selector’)) 可以监控你所选取元素所关联的全部事件，当事件触发时，在控制台打印它们。好比 monitorEvents($(‘#firstName’)) 会打印 ID 为「firstName」的元素绑定的全部事件。

• monitorEvents($(‘selector’),’eventName’) 将打印元素绑定的特定事件。你能够将事件名字做为参数传入函数。它将打印特定元素绑定的特定事件。好比，monitorEvents($(‘#firstName’),’click’) 会打印 ID 为「firstName」的元素绑定的点击事件。

• monitorEvents($(‘selector’),[‘eventName1′,’eventName3’,…]) 会根据你的要求打印多个事件。传递参数包含全部事件的字符串数组，而不是单个事件名字。好比，monitorEvents($(‘#firstName’),[‘click’,’focus’]) 会打印 ID 为「firstName」的元素绑定的点击事件和焦点事件。

• unmonitorEvents($(‘selector’)) ：这个会中止监视和在控制台打印事件。

 

5. 查询代码块执行时间

 

JavaScript 控制台有一个名为 console.time(‘labelName’) 的重要函数，它接收一个标记名做为参数，而后开启计时器。另外一个重要函数是 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

 

上面两行代码给咱们展现了计时器开始和结束的间隔时间。

咱们能够改进它来计算代码块的执行时间。

举个例子，若是我想知道一个循环的执行时间。我能够这样作：

 

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. 将变量里的值排列成表格

 

好比咱们有一个下面这样的对象数组：

ar 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’)) 会检查与选择器匹配的元素，并切换 Chrome 开发者工具到元素标签页。举个例子，inspect($(‘#firstName’)) 检查 ID 为「firstName」的元素，inspect($(‘a’)[3]) 检查 DOM 中第 4 个锚点元素。

• $0、$一、$2 等等能帮助你取到最近检查的元素。好比，$0 给你返回上次检查的 DOM 元素，$1 返回上上次检查的 DOM 元素。

 

8. 列举元素的属性

 

你能够在控制台中作如下事情来列举一个元素的全部属性。

dir($(‘selector’)) 返回一个对象和与其 DOM 元素关联的全部属性。你能够展开它查看细节。

 

9. 检索最近一个结果的值

 

你能够把控制台当作计算器。一旦你这么作，你可能须要在计算中使用上一次的计算结果。下面是如何从内存中取到上一次计算的结果。

 $_

就像下面这样：

 

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 JavaScript 控制台的几个例子。我但愿这些小贴士能让你的生活更美好。

 

 

via igeekbar.com