1. 選擇 DOM 元素
Chrome 控制臺(tái)可以直接像使用 jQuery 一樣,用 $ 符選擇元素:如 $('.class') 、$('#id') 等。
2. 將瀏覽器轉(zhuǎn)換為編輯器
document.body.contentEditable = true
可編輯文本
3. 查找與DOM中的元素關(guān)聯(lián)的事件
getEventListeners($(‘selector’))
返回一個(gè)對(duì)象數(shù)組,其中包含綁定到該元素的所有事件。
要找到特定事件的偵聽(tīng)器:
getEventListeners($(‘selector’)).eventName[0].listener
4. 監(jiān)控事件
-
monitorEvents($(‘selector’))將監(jiān)視與選擇器的元素關(guān)聯(lián)的所有事件,然后在它們被觸發(fā)時(shí)將它們打印到控制臺(tái)。例如,monitore($(#firstName))將打印 ID 為firstName元素的所有事件。 -
monitorEvents($(‘selector’),’eventName’)將打印與元素綁定的特定事件。 你可以將事件名稱(chēng)作為參數(shù)傳遞給函數(shù)。 這將僅記錄綁定到特定元素的特定事件。 例如,monitorEvents($(‘#firstName’),’click’)將打印綁定到ID為'firstName'的元素的所有click事件。 -
monitore($(selector),[eventName1, eventName3', .])將根據(jù)需求記錄多個(gè)事件。與其傳遞單個(gè)事件名作為參數(shù),不如傳遞包含所有事件的字符串?dāng)?shù)組。例如monitore($(#firstName),[click, focus])將記錄與 IDfirstName元素綁定的click事件和focus事件。 -
unmonitorevent ($(selector)):這將停止監(jiān)視和打印控制臺(tái)中的事件。