转载翻译自: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中找出更多隐藏的特性和功能。
感谢观看!