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. 将变量里的值排列成表格
　　比如我们有一个下面这样的对象数组：
　　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’)) 会检查与选择器匹配的元素，并切换 Chrome 开发者工具到元素标签页。举个例子，inspect($(‘#firstName’)) 检查 ID 为「firstName」的元素，inspect($(‘a’)[3]) 检查 DOM 中第 4 个锚点元素。
　　$0、$1、$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 控制台的几个例子。我希望这些小贴士能让你的生活更美好。

唐武宗灭亻弗

这么强,支持楼主，佩服

xxj4201

没人回帖。。。我来个吧

hui1070

呵呵，低调，低调！

何幸_

我了个去，顶了

kingwinne

LZ帖子不给力，勉强给回复下吧

nw1969n

呵呵，低调，低调！

夜·月痕

LZ帖子不给力，勉强给回复下吧

zhangbin33334

楼下的接上。。。。

wt4815603

是爷们的娘们的都帮顶！大力支持