转载翻译自：https://blog.bitsrc.io/10-chrome-console-utility-apis-you-probably-never-used-14a0b64f1bd6
作者的标题中写的是10条，但是正文有12条。
以下为正文：
10个你可能会错过的Chrome中Console的实用功能。
Console工具是Chrome dev-tool中最常用也是最有用的工具之一。它提供了一些功能用于在我们的页面中拓展一些额外的功能，帮助我们调试、分析和监控网页。
1. monitor
用来监听一个函数，可以知道此函数什么时候被调用。
function traceFunc (arg) { }
mointor(traceFunc)
traceFunc方法做为参数被传递给了monitor。现在无论何时调用了traceFunc，monitor都会告诉我们该方法被调用了。
traceFunc(90);
function traceFunc was called with arguments: 90
2. unmonitor
用于删除被monitor监听的方法，解除对traceFunc方法的监听我们可以这样做：
unmonitor(traceFunc)
当我们调用traceFunc方法，我们不会有任何的结果：
traceFunc(90)
3. monitorEvents
用法如下：
monitorEvents(object, [,events])
此方法用来监听和打印输出触发在元素上的事件。
<button id="button">Button</button>
现在我们在Console中输入如下代码：
monitorEvents(button, 'click')
当这个按钮被点击时，monitorEvents会监听到并将点击事件打印输出到Console中，表示这个按钮被点击了。
我们同样也可以监听一个对象上的不同事件。
monitorEvents(button, ['click', 'mouseover'])
它将会监听按钮中的click和mouseover事件，当我们将鼠标移到按钮上时会看到Console打印了此事件，同理，点击这个按钮也是如此。
我们也可以监听一个对象上的通用事件：
monitorEvents(button, ['click', 'mouse'])
mouse是鼠标事件的通用事件：
- mouseover
- mouseout
因此会监听上边所说的绑定到按钮上的事件，使得当点击事件或任何鼠标事件发生在按钮上时，Console会打印相应的日志
此外，键盘的key Events将会打印任何关于key Events事件，比如keyup、keydown等等。
4. unmonitorEvents
此方法做了monitorEvents相反的事情，它将解除通过monitorEvents设置的对对象的监听。
monitorEvents(button, 'click')
给按钮添加点击监听事件，点击按钮时Console会打印相应的事件。
执行unmonitorEvents(button, 'click')将会解除对按钮的监听。现在点击按钮，Console不会有结果打印。
5. $_
此方法用于执行Console历史记录中最后的表达式。
如果我们在Console中输入2+2：
我们将会得到答案4，这是表达式求值的结果。
接下来，我们又输入3 * 2：
Console会给我们返回结果6。
我们执行了两条表达式，其中3 * 2是最后执行的。现在在Console中输入并执行$_，我们会得到6这个结果。
6. copy
这个功能会复制数据至剪切板。
在Console中输入copy('nnamdi')，这将复制字符串nnamdi至剪切板。去浏览器的URL地址栏中右键粘贴，你将会看到nnamdi粘贴到了你的地址栏里。
7. clear
此方法会清空Console历史记录。
输入如下表达式：
> 2 + 2
4
> 3 * 2
6
Console的执行历史记录为(2+2)4和(3*2)6。在Console中输入clear()将会清空历史记录。
8. keys(object)
就像Object.keys一样，此方法会以数组的形式返回一个对象中的所有key值。
9. values(object)
就像Object.values一样，此方法会以数组的形式返回一个对象中的所有value值。
10. getEventListeners(object)
这个方法会返回注册在对象上的事件。举例来说，如果我们在一个按钮上注册了click、mouseover、mouseout事件，这个方法会返回一个事件名称做为key的对象。该返回对象的value为数组，包含了对应事件的监听函数。
我们有一代码块：
<button id="button" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button</button>
<script>
function clickHandler() {
}
function mousedownHandler() {
}
function mouseoverHandler() {
}
</script>
这个按钮有三个事件，包括click、mouseover、mouseout，对应的监听事件为clickHandler、mousedownHandler、mouseoverHandler。
执行getEventListeners(button)，会得到如下的结果：
如图所示，返回的对象中的属性值为注册在按钮上的click、mousedown、mouseover事件名。属性值为数组，包含了一些对象。展开这些对象，我们会看到注册在按钮上的监听器函数。
11. $(elementName, [,node])
此方法会返回指定的第一个元素。
我们有如下代码块：
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
我们有四个按钮：button1, button2, button3, button4。要选择第一个按钮，执行如下命令：
$('button')
可以看到button1被返回了，因为它是document中的第一个按钮。我们可以使用返回的DOM的属性和方法。
这里，我们使用button1的DOM节点引用来获取它的id：
我们也可以获取指定的DOM节点的第一个元素：
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>
按钮2、3、4被嵌套在div节点中，我们可以选择div节点中的第一个button，只需要这样做：
$('button', document.querySelector('div'))
可以看到，Console打印了button2，因为它是div中的第一个按钮元素。
12. $$(element,[,node]) Double dollar
此方法的作用跟上面的单$一样，但是它会返回所有指定的元素。
使用如下代码块：
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
执行$$('button')会得到一个数组，包含了所有的button节点。
我们也可以同样得到给定的DOM节点中的所有元素：
<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>
Button2, 3, 4被嵌套在div中，要全部选择它们，执行如下语句：
$$('button', document.querySelector('div'))
我们会得到button2, 3, 4。
这里还有一些。。。
- table
- debug
- undebug
- $x()
- dir
- dirxml
- profile() profileEnd()
- inspect
- $0~$X
总结
这些方法在调试或监控页面上的某些内容会非常有用，它们会是你的第三只眼。
随着Chrome新版本的发布，会有更多的新特性新功能会被加入到Console tab中。我上面的列表中还有一些其它的功能，我力劝你花一些时间在你的Console中找出更多隐藏的特性和功能。
感谢观看！