5/23/2014 javascript - How do I view events fired on an element in Chrome Web Developer?

- Stack Overflow
http://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-web-developer 1/2
Take the 2-minute tour
John Hoffman
1,289 3 14 32
4 Answers
Charlie
3,137 7 26 78
Matt
14.4k 14 68 103
Mariusz Pawelski
773 1 12 26
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?
javascript google-chrome-devtools
asked Apr 18 '12 at 16:23
This bookmarklet can be helpful: sprymedia.co.uk/article/Visual+Event+2 scytale Oct 10 '12 at 12:11
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)
edited Dec 11 '12 at 20:35 answered Apr 18 '12 at 16:29
5 This is the kind of info that changes lives people. PhillipKregg Feb 13 at 20:00
this solution is a problem if it is mouse events you are after, as the breakpoint kills the flow
Wendy Lisa Gibbons May 14 at 13:11
You could use monitorEvents function.
answered Apr 10 '13 at 10:50
this answer is a lot better and does exactly what was asked (maybe that feature was not available in 2012)
llamerr Apr 2 at 11:09
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
registration required.
How do I view events fired on an element in Chrome Web Developer?
sign up

log in

tour

help

careers 2.0

add comment
add comment
add comment
5/23/2014 javascript - How do I view events fired on an element in Chrome Web Developer? - Stack Overflow
http://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-web-developer 2/2
airtonix
960 10 15
arwan
20 3
This won't show custom events like those your script might create if it's a jquery plugin. for example :
jQuery(function($){
var ThingName="Something";
$("body a").live('click', function(Event){
var $this = $(Event.target);
$this.trigger(ThingName + ":custom-event-one");
});
$.on(ThingName + ":custom-event-one", function(Event){
console.log(ThingName, "Fired Custom Event: 1", Event);
})
});
The Event Panel under Scripts in chrome developer tools will not show you "Something:custom-event-
one"
answered Jul 15 '12 at 23:42
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.
answered Mar 21 at 20:12
Not the answer you're looking for? Browse other questions tagged javascript
google-chrome-devtools or ask your own question.
add comment
add comment
add comment