How do I view events fired on an element in Chrome DevTools?

 

I have a customizable form element on a page from a library. I want to see what javascript events are fired when I interact with it because I am trying to find out which event handler to use.

How do I do that using Chrome Web Developer?

  • Hit F12 to open Dev Tools
  • Click the Sources tab
  • On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
  • Click on the events you want to listen for.
  • Interact with the target element, if they fire you will get a break point in the debugger

    • Similarly, you can right click on the target element -> select "inspect element" Scroll down on the right side of the dev frame, at the bottom is 'event listeners'. Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)

    You can use monitorEvents function.

    Just inspect your element ( right mouse click → Inspect on visible element or go to Elements tab in Chrome Developer Tools and select wanted element) then go to Console tab and write: 

    monitorEvents($0)

    Now when you move mouse over this element, focus or click it, the name of the fired event will be displayed with its data.

    To stop getting this data just write this to console: 

    unmonitorEvents($0)

    $0 is just the last DOM element selected by Chrome Developer Tools. You can pass any other DOM object there (for example result of getElementById or querySelector ).

    You can also specify event "type" as second parameter to narrow monitored events to some predefined set. For example: 

    monitorEvents(document.body, 'mouse')

    List of this available types is here.

    I made a small gif that illustrates how this feature works:

    使用monitorEvents函数

    Visual Event is a nice little bookmarklet that you can use to view an element's event handlers. On online demo can be viewed here.

    链接地址: http://www.djcxy.com/p/83430.html

    上一篇: 如何在Firefox / Firebug中美化Javascript和CSS？

    下一篇: 如何查看在Chrome DevTools中的元素上触发的事件？