Chrome 开发者控制台中，你可能意想不到的功能

正文

请到「今天看啥」查看全文

这将展示与特定事件相关联的监听器。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

请到「今天看啥」查看全文