8/12/2019 How Do I View Events Fired on an Element in Chrome Web
Developer
1/2
5/23/2014 javascr ipt - How do I view events fired on an element
in Chrome Web Developer? - Stack Over flow
http://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-web-developer
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 scytaleOct 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 expandtree
Clickon 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.
PhillipKreggFeb 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 GibbonsMay 14 at 13:11
You could use monitorEventsfunction.
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)
llamerrApr 2 at 11:09
Stack Overflow is a question and answer site for professional
and enthusiast programmers. It's 100% free, noregistration
required.
How do I view events fired on an element in Chrome Web
Developer?
sign up log in tour help careers 2.0
http://stackexchange.com/http://www.sprymedia.co.uk/article/Visual+Event+2http://stackoverflow.com/users/473285/scytalehttp://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjI5MTEsImNoIjoxMTc4LCJjciI6NTkxOCwiZGkiOiI5MzZmMzc5M2IwYWE0NWY1YjNiMmVkNDAwMTcyYzA1NSIsImRtIjoxLCJmYyI6MTAxODMsImZsIjo3NDcyLCJrdyI6ImphdmFzY3JpcHQsZ29vZ2xlLWNocm9tZS1kZXZ0b29scyIsIm53IjoyMiwicGMiOjAsInByIjoxNjA0LCJydCI6MSwic3QiOjgyNzcsInVrIjoidWUxLTIxMmI5OTRlNGZhMzQzMjNiYzYwZTdlNjFlZmEwMTcwIiwiem4iOjQzLCJ0cyI6MTQwMDg1MjY0NzQ2NywidXIiOiJodHRwOi8vY2FyZWVycy5zdGFja292ZXJmbG93LmNvbS8ifQ&s=_e1gYtAL0uOCy8D38F428bVVxtAhttp://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjI5MTEsImNoIjoxMTc4LCJjciI6NTkxOCwiZGkiOiI5MzZmMzc5M2IwYWE0NWY1YjNiMmVkNDAwMTcyYzA1NSIsImRtIjoxLCJmYyI6MTAxODMsImZsIjo3NDcyLCJrdyI6ImphdmFzY3JpcHQsZ29vZ2xlLWNocm9tZS1kZXZ0b29scyIsIm53IjoyMiwicGMiOjAsInByIjoxNjA0LCJydCI6MSwic3QiOjgyNzcsInVrIjoidWUxLTIxMmI5OTRlNGZhMzQzMjNiYzYwZTdlNjFlZmEwMTcwIiwiem4iOjQzLCJ0cyI6MTQwMDg1MjY0NzQ2NywidXIiOiJodHRwOi8vY2FyZWVycy5zdGFja292ZXJmbG93LmNvbS8ifQ&s=_e1gYtAL0uOCy8D38F428bVVxtAhttp://stackoverflow.com/http://stackoverflow.com/http://stackoverflow.com/http://stackoverflow.com/http://stackexchange.com/https://stackoverflow.com/users/signup?returnurl=http%3a%2f%2fstackoverflow.com%2fquestions%2f10213703%2fhow-do-i-view-events-fired-on-an-element-in-chrome-web-developerhttps://stackoverflow.com/users/login?returnurl=http%3a%2f%2fstackoverflow.com%2fquestions%2f10213703%2fhow-do-i-view-events-fired-on-an-element-in-chrome-web-developerhttp://stackoverflow.com/tourhttp://careers.stackoverflow.com/http://stackexchange.com/http://stackexchange.com/http://stackexchange.com/http://stackexchange.com/http://stackexchange.com/http://stackexchange.com/http://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjI5MTEsImNoIjoxMTc4LCJjciI6NTkxOSwiZGkiOiI5N2EwNDIzNGIxMGM0ZDY0YjJiMzBmNWE5MjhhNmZmZiIsImRtIjoxLCJmYyI6MTAxODQsImZsIjo3NDcyLCJrdyI6ImphdmFzY3JpcHQsZ29vZ2xlLWNocm9tZS1kZXZ0b29scyIsIm53IjoyMiwicGMiOjAsInByIjoxNjA0LCJydCI6MSwic3QiOjgyNzcsInVrIjoidWUxLTIxMmI5OTRlNGZhMzQzMjNiYzYwZTdlNjFlZmEwMTcwIiwiem4iOjQ0LCJ0cyI6MTQwMDg1MjY0NzQ3MCwidXIiOiJodHRwOi8vY2FyZWVycy5zdGFja292ZXJmbG93LmNvbS8ifQ&s=8UZOxLJVqGBIKJIFn-7OGXmdBushttp://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjI5MTEsImNoIjoxMTc4LCJjciI6NTkxOCwiZGkiOiI5MzZmMzc5M2IwYWE0NWY1YjNiMmVkNDAwMTcyYzA1NSIsImRtIjoxLCJmYyI6MTAxODMsImZsIjo3NDcyLCJrdyI6ImphdmFzY3JpcHQsZ29vZ2xlLWNocm9tZS1kZXZ0b29scyIsIm53IjoyMiwicGMiOjAsInByIjoxNjA0LCJydCI6MSwic3QiOjgyNzcsInVrIjoidWUxLTIxMmI5OTRlNGZhMzQzMjNiYzYwZTdlNjFlZmEwMTcwIiwiem4iOjQzLCJ0cyI6MTQwMDg1MjY0NzQ2NywidXIiOiJodHRwOi8vY2FyZWVycy5zdGFja292ZXJmbG93LmNvbS8ifQ&s=_e1gYtAL0uOCy8D38F428bVVxtAhttp://careers.stackoverflow.com/http://stackoverflow.com/tourhttps://stackoverflow.com/users/login?returnurl=http%3a%2f%2fstackoverflow.com%2fquestions%2f10213703%2fhow-do-i-view-events-fired-on-an-element-in-chrome-web-developerhttps://stackoverflow.com/users/signup?returnurl=http%3a%2f%2fstackoverflow.com%2fquestions%2f10213703%2fhow-do-i-view-events-fired-on-an-element-in-chrome-web-developerhttp://stackexchange.com/http://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-web-developerhttp://stackoverflow.com/users/319375/llamerrhttp://www.briangrinstead.com/blog/chrome-developer-tools-monitoreventshttp://stackoverflow.com/users/404280/wendy-lisa-gibbonshttp://stackoverflow.com/users/875342/phillipkregghttp://stackoverflow.com/posts/10213800/revisionshttp://stackoverflow.com/users/473285/scytalehttp://www.sprymedia.co.uk/article/Visual+Event+2http://stackoverflow.com/questions/tagged/google-chrome-devtoolshttp://stackoverflow.com/questions/tagged/javascripthttp://stackoverflow.com/users/350384/mariusz-pawelskihttp://stackoverflow.com/users/350384/mariusz-pawelskihttp://stackoverflow.com/users/17803/matthttp://stackoverflow.com/users/17803/matthttp://stackoverflow.com/users/603986/charliehttp://stackoverflow.com/users/603986/charliehttp://stackoverflow.com/users/1276460/john-hoffmanhttp://stackoverflow.com/users/1276460/john-hoffmanhttp://stackoverflow.com/abouthttp://stackoverflow.com/
8/12/2019 How Do I View Events Fired on an Element in Chrome Web
Developer
2/2
5/23/2014 javascr ipt - How do I view events fired on an element
in Chrome Web Developer? - Stack Over flow
http://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-web-developer
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($){
varThingName="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 Eventis a nice little bookmarklet that you can use to
view an element's event handlers. On onlinedemo 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.
http://stackoverflow.com/questions/askhttp://sprymedia.co.uk/VisualEvent/demo/http://www.sprymedia.co.uk/article/Visual+Event+2http://stackoverflow.com/questions/tagged/google-chrome-devtoolshttp://stackoverflow.com/questions/tagged/javascripthttp://stackoverflow.com/users/2022780/arwanhttp://stackoverflow.com/users/2022780/arwanhttp://stackoverflow.com/users/454615/airtonixhttp://stackoverflow.com/users/454615/airtonix
