Chrome开发者工具还有这些功能，你知道吗？
前言
原文是来自于freeCodeCamp网站的一篇博客
原文链接：https://medium.freecodecamp.org/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329
原文作者：Swagat Kumar Swain
Chrome开发者工具的功能十分强大，其中包括了元素调试、网络监控、安全检查功能。本篇文章要重点讲的是JavaScript控制。
我最早写代码的时候，也就是在JS控制台里输出一些服务器返回的内容，或者一些变量的值。但是后来通过一些深入的学习和了解，我发现Chrome的JS控制台原来还有这么多神奇的功能。
选取DOM元素
如果你使用过jQuery的话，一定对$('.className') 或者 $('#id') 这种选择器不会陌生。但其实jQuery的选择器和原生JS的document.querySelector('')的使用方法是一样的。
在Chrome控制台里，你可以通过两个$符号来替代jQuery和querySelector两个方法，它的语法和上面两位是一样的的。
一秒钟让Chrome变成所见即所得的编辑器
你可能经常会困惑你到底能不能直接在浏览器里更改网页的文本内容。答案是肯定的，你可以只通过一行简单的指令把Chrome变成所见即所得的编辑器，直接在网页上随心所欲地删改文字。
你所要做的只是在控制台上输入一行代码即可：
代码生效后，你可以像下面一样编辑网页
获取某个DOM元素绑定的事件
在调试的时候，你肯定需要知道某个元素上面绑定了什么触发事件。Chrome的开发者控制台可以让你很轻松地找到它们。
getEventListeners($('selector')) 方法以数组对象的格式返回某个元素绑定的所有事件。你可以在控制台里展开对象查看详细的内容。
如果你想选中其中的某个时间，可以通过下面的方法来访问：
这里的eventName表示某种事件类型，例如：
监测事件
当你需要监视某个DOM触发的事件时，也可以用到控制台。例如下面这些方法：
●monitorEvents($('selector')) 会监测某个元素上绑定的所有事件，一旦该元素的某个事件被触发就会在控制台里显示出来。
●monitorEvents($('selector'),'eventName') 可以监听某个元素上绑定的具体事件。第二个参数代表事件类型的名称。例如 monitorEvents($('#firstName'),'click') 只监测ID为firstName的元素上的click事件。
●monitorEvents($('selector'),
['eventName1','eventName3',….]) 同上。可以同时检测具体指定的多个事件类型。
●unmonitorEvents($('selector')) 用来停止对某个元素的事件监测。
用计时器来获取某段代码块的运行时间
通过 console.time('labelName') 来设定一个计时器，其中的 labelName 是计时器的名称。
通过console.timeEnd('labelName') 方法来停止并输出某个计时器的时间。例如：
控制台输出了testTime代码块的运行消耗时间。
以表格的形式输出数组
假设我们这样的一个数组：
要是你直接在控制台里输入数组的名称，Chrome会以文本的形式返回一个数组对象。但你完全可以通过console.table(variableName) 方法来以表格的形式输出每个元素的值。例如下图：
通过控制台方法来检查元素
你可以直接在控制台里输入下面的方法来检查元素
●inspect($('selector')) 会检查所有匹配选择器的DOM元素，并返回所有选择器选择的DOM对象。例如inspect($('#firstName')) 选择所有ID是 firstName 的元素，inspect($('a')[3]) 检查并返回页面上第四个 p元素。
●$0, $1, $2等等会返回你最近检查过的几个元素，例如 $0 会返回你最后检查的元素，$1 则返回倒数第二个。
列出某个元素的所有属性
你也可以通过控制台列出某个元素的所有属性：
dir($('selector')) 会返回匹配选择器的DOM元素的所有属性，你可以展开输出的结果查看详细内容
检索到最后一个结果的值
Chrome的控制台通过全局变量——$_ 来缓存最后一次计算结果的值
看下面的例子：
清空控制台输出
当你想清空控制台中所有内容时，你只需要执行clear()方法即可
Chrome开发者工具的功能非常强大，本篇文章只是揭露了冰山一角，希望能够帮助开拓你的事业。
如果你觉得这篇文章有用的话，请你转发给其他有可能需要的人。
较真的前端
前端技术分享交流。
最新前端笔试题。
前端开发工作职位发布。