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?
This question is related to
javascript
google-chrome-devtools
For jQuery (at least version 1.11.2) the following procedure worked for me.
$._data(($0), 'events');
in the 'Console'handler:
value.And it's time to stop re-inventing the wheel and start using vanilla JS events ... :)
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:
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.
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"
Source: Stackoverflow.com