今天早上，在FreeCodeCamp公众号中看到了一篇关于Chrome自带开发者工具的文章。以前自己也只是知道一点点最简单的功能，看完觉得特别有用，记录一下。
选取DOM元素
jQuery中，我们一般用 ('tagName')、 ('.class')、$('#id')等选择器选取DOM元素，它们都相当于原生js的document.querySelector()方法。返回的第一个匹配选择规则的DOM元素。
在Chrome的控制台里，你可以通过 $$('tagName') 或者 $$('.className')， 即两个$$符号来选择所有匹配规则的DOM元素。返回的结果是一个数组，然后可以通过数组的方法来访问其中的单个元素。
比如：$$('className') 会返回给你所有包含 className 类属性的元素，之后你可以通过 $$('className')[0] 和$$('className')[1] 来访问其中的某个元素。
直接在浏览器里更改网页的文本内容
以前，我也是右键审查元素，然后编辑源代码。但是现在，只需要在控制台中输入document.body.contentEditable = true, 就可以直接在网页中编辑文本内容。
获取某个DOM元素绑定的事件
通过getEventListeners($('selector')) 方法以数组对象的格式返回某个元素绑定的所有事件。你可以在控 制台里展开对象查看详细的内容。
选择其中的某个事件，可以通过下面的方法来访问：getEventListeners($('selector')).eventName[0].listener ，这里的 eventName 表示某种事件类型。比如： getEventListeners($('#firstName')).click[0].listener会返回ID为firstName元素绑定的click事件。
监测事件
monitorEvents($('selector')) 会监测某个元素上绑定的所有事件，一旦该元素的某个事件被触发就会在控制台里显示出来。
monitorEvents($('selector'),'eventName') 可以监听某个元素上绑定的具体事件。第二个参数代表事件类型的名称。例如 monitorEvents($('#firstName'),'click') 只监测ID为firstName的元素上的click事件。
monitorEvents($('selector'),['eventName1','eventName3',….]) 同上。可以同时检测具体指定的多个事件类型。
unmonitorEvents($('selector')) 用来停止对某个元素的事件监测。
用计时器来获取某段代码块的运行时间
通过 console.time('labelName') 来设定一个计时器，其中的 labelName是计时器的名称。通过console.timeEnd('labelName')方法来停止并输出某个计时器的时间。
结合上述两种方法，可以计算代码块运行时间。
以表格的形式输出数组
直接在控制台里输入数组的名称，Chrome会以文本的形式返回一个数组对象。但你完全可以通过console.table(variableName) 方法来以表格的形式输出每个元素的值。variableName是数组名。
通过控制台方法来检查元素
inspect($('selector')) 会检查所有匹配选择器的DOM元素，并返回所有选择器选择的DOM对象。例如inspect($('#firstName'))选择所有ID是 firstName 的元素，inspect($$('p')[3]) 检查并返回页面上第四个p元素。
$0, $1, $2等等会返回你最近检查过的几个元素，例如$1会返回你最后检查的元素，$2则返回倒数第二个。
列出某个元素的所有属性
dir($('selector'))会返回匹配选择器的DOM元素的所有属性，你可以展开输出的结果查看详细内容。
获取最后计算结果的值
在Chrome控制台里进行计算时，可以通过$_来获取最后的计算结果值。