How to debug event handler

Check into the Firebug Profiler you can use it to see a break down of what's going on without having to manually add in console.log statements. To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You'll then see a detailed report that shows what functions were called and how much time each one took. See http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii, http://stackoverflow.com/questions/267618/understanding-firebug-profiler-output, http://stackoverflow.com/questions/5671794/how-to-view-javascript-function-calls-as-they-occur

Making Unobtrusive JavaScript Practical Again

There ought to be an easy way to find out what event handlers will be executed when I click on an element. If I know this information, I can locate the handlers and set breakpoint (before I start to debug). I wish that Firebug would list all the event handlers associated with an element (in a separate tab) when I inspect the element. Until that day comes, the following link maybe helpful:

http://www.sprymedia.co.uk/article/Visual+Event
http://www.sprymedia.co.uk/article/Visual+Event+2

Eventbug

To be clear, you have a DOM object and you want to know what it does onclick? Have you tried someObject.onclick or someObject.getAttribute("onclick")?

I use Chrome's Developer Tools for this. Check the click box, and then click on the element on the page you want to find the handler for. If you are using jQuery (or similar library), you may have to step through their code before you get to yours. http://stackoverflow.com/questions/10639089/how-do-i-find-out-what-javascript-function-is-being-called-by-an-objects-onclic

In jQuery before 1.8, try using $("#element").data("events")

There is also jQuery extension: listHandlers

$._data(element, "events")
$(selector).data("events")

Visual Event 2: go under the "make it go section" and drag the text link to your bookmark toolbar go to a page that has events and click on the bookmark

WebKit Inspector in Chrome or Safari browsers now does this. It will display the event listeners for a DOM element when you select it in the Elements pane.

Event Bug (extension for Firebug)

The Elements section of Chrome's Developer Tools: select an element and look for "Event Listeners" on the bottom right (similar in Firefox)

I'd just like to add that IE 11 has an event listeners tab in the right-hand pane of the DOM Explorer page in the F12 Developer Tools, which was a pleasant surprise. Right up there with finding out that Chrome has an Event Listeners section at the very bottom of the right-hand pane of the Elements page in the Chrome Dev Tools. They really hid that in a place I would never think to look — under all the CSS, beneath the Metrics, Properties, and DOM Breakpoints sections (most of which I was also unaware existed)

Chrome supports getEventListeners on a node. Reference: https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject

If you have Firebug, you can use console.dir(object or array) to print a nice tree in the console log of any javascript scalar, array, or object. Try: console.dir(clickEvents); or console.dir(window);

https://getfirebug.com/wiki/index.php/GetEventListeners

down vote accepted

This is available in all major browsers in the developer tools (usually press F12 to open). In Chrome, for example, right click on the element, inspect element. Then expand the 'Event Listeners' tab on the righthand side, find 'click' and expand that. It should give you a list of all potential listeners on the click event, including ones that would catch from bubbling up and a link to the function and its position in the file. It can admittedly take a bit of hunting. If the code is minified most developer tools can expand it for you (e.g. the 'pretty print' option in webkit browsers like Chrome or tools 'Format javascript' in IE) or use an external tool, e.g. http://jsbeautifier.org/. http://stackoverflow.com/questions/10649305/determine-what-javascript-function-is-called-when-you-click-an-element

http://www.elijahmanor.com/2011/08/7-chrome-tips-developers-designers-may.html

It is possible to list all event listeners in JavaScript: It's not that hard; you just have to hack the prototype's method of the HTML elements (before adding the listeners).:

function reportIn(e){
    var a = this.lastListenerInfo[this.lastListenerInfo.length-1];
    console.log(a)
}

HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;

HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
    this.realAddEventListener(a,reportIn,c); 
    this.realAddEventListener(a,b,c); 
    if(!this.lastListenerInfo){  this.lastListenerInfo = new Array()};
    this.lastListenerInfo.push({a : a, b : b , c : c});
};

Now every anchor element (a) will have a lastListenerInfo property wich contains all of its listeners. And it even works for removing listeners with anonymous functions

If I have to implement this is Firebug, here are the things that I need to consider:

We have to examine all elements along the hierarchy and look for event handlers that may have been attached to them (not just the element that you are interested in). Furthermore, javascript library may have "event delegation", so we need a way to deal with that. Is it possible to cause javascript to emit the name each function executed (if the function does not have a name, construct a GUID and use this GUID as its name)? When the function name is clicked (in Firebug tab), take me to the definition of the function (pretty-printed).

If there is a way for firebug to log the name of functions (more importantly the name of the file and line number), and if we can cause firebug to persist across page, then we can possibly find all the event handlers associate with an element after we click on it.

The Web Developer extension allows us to log events that happen on an element.

We may need to look up the DOM tree.

Does this work for event delegation? If we use event delegation, can we determine the event handler when we inspect the element?

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License