console 控制台一些用法

2019-04-29 本文已影响0人 McDu

1. 选择 DOM 元素
Chrome 控制台可以直接像使用 jQuery 一样，用 $ 符选择元素：如 $('.class') 、$('#id') 等。

2. 将浏览器转换为编辑器

document.body.contentEditable = true

可编辑文本

3. 查找与DOM中的元素关联的事件

getEventListeners($(‘selector’))

返回一个对象数组，其中包含绑定到该元素的所有事件。
要找到特定事件的侦听器：

getEventListeners($(‘selector’)).eventName[0].listener

4. 监控事件

monitorEvents($(‘selector’)) 将监视与选择器的元素关联的所有事件，然后在它们被触发时将它们打印到控制台。例如，monitore($(#firstName)) 将打印 ID 为 firstName 元素的所有事件。
monitorEvents($(‘selector’),’eventName’) 将打印与元素绑定的特定事件。你可以将事件名称作为参数传递给函数。这将仅记录绑定到特定元素的特定事件。例如，monitorEvents($(‘#firstName’),’click’) 将打印绑定到ID为'firstName' 的元素的所有 click 事件。
monitore($(selector)，[eventName1, eventName3'， .]) 将根据需求记录多个事件。与其传递单个事件名作为参数，不如传递包含所有事件的字符串数组。例如 monitore($(#firstName)，[click, focus]) 将记录与 ID firstName元素绑定的 click 事件和 focus 事件。
unmonitorevent ($(selector)) :这将停止监视和打印控制台中的事件。