8/12/2019 How to Debug Javascript, jQuery
1/3
5/23/2014 How to debug Javascr ipt/jQuery event bindings wi th
Fi reBug (or simi lar tool) - Stack Over flow
http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool
Take the 2-minute tour
aksu
3,430 5 10 29
Jaanus
7,967 6 40 72
16Answers
I need to debug a web application that uses jQuery to do some
fairly complex and messy DOM
manipulation. At one point, some of the events that were bound
to particular elements, are not fired and
simply stop working.
If I had a capability to edit the application source, I would
drill down and add a bunch of Firebug
console.log() statements and comment/uncomment pieces of code to
try to pinpoint the problem.But let's assume I cannot edit the
application code and need to work entirely in Firefox using Firebug
or
similar tools.
Firebug is very good at letting me navigate and manipulate the
DOM. So far, though, I have not been
able to figure out how to do event debugging with Firebug.
Specifically, I just want to see a list of event
handlers bound to a particular element at a given time (usi ng
Firebug Javascript breakpoints to trace the
changes). But either Firebug does not have the capability to see
bound events, or I'm too dumb to find it.
:-)
Any recommendations or ideas? Ideally, I would just like to see
and edit events bound to elements,
similarly to how I can edit DOM today.
javascript jquery dom javascript-events event-handling
edited Jan 22 at 15:36 asked Feb 20 '09 at 19:42
See How to find event listeners on a DOM node.
In a nutshell, assuming at some point an event handler is
attached to your element (eg):
$('#foo').click(function() { console.log('clicked!') });
You inspect it like so:
jQuery 1.3.x
varclickEvents
=$('#foo').data("events").click;jQuery.each(clickEvents,function(key,value){
console.log(value)// prints "function() { console.log('clicked!')
}"})
jQuery 1.4.x
varclickEvents
=$('#foo').data("events").click;jQuery.each(clickEvents,function(key,handlerObj){
console.log(handlerObj.handler)// prints "function() {
console.log('clicked})
See jQuery.fn.data (where jQuery stores your handler
internally).
jQuery 1.8.x
varclickEvents =$._data($('#foo')[0],"events").click;
Stack Overflow is a question and answer site for professional
and enthusiast programmers. It's 100% free, noregistration
required.
How to debug Javascript/jQuery event bindings with FireBug (or
similar tool)
sign up log in tour help careers 2.0
http://stackexchange.com/http://stackexchange.com/http://stackexchange.com/https://stackoverflow.com/users/signup?returnurl=http%3a%2f%2fstackoverflow.com%2fquestions%2f570960%2fhow-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-toolhttps://stackoverflow.com/users/login?returnurl=http%3a%2f%2fstackoverflow.com%2fquestions%2f570960%2fhow-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-toolhttp://stackexchange.com/http://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjg0NywiY2giOjExNzgsImNyIjo1OTE2LCJkaSI6IjZkNjk3ZTEwZjFhZjRmMDBiM2UzMjMwZDY5NzdjNGQzIiwiZG0iOjEsImZjIjo4ODAyLCJmbCI6MjQ0NCwia3ciOiJqYXZhc2NyaXB0LGpxdWVyeSxkb20samF2YXNjcmlwdC1ldmVudHMsZXZlbnQtaGFuZGxpbmciLCJudyI6MjIsInBjIjowLCJwciI6MTU2OCwicnQiOjEsInN0Ijo4Mjc3LCJ1ayI6InVlMS0yMTJiOTk0ZTRmYTM0MzIzYmM2MGU3ZTYxZWZhMDE3MCIsInpuIjo0MywidHMiOjE0MDA4NTI1ODM0MzUsInVyIjoiaHR0cDovL2NhcmVlcnMuc3RhY2tvdmVyZmxvdy5jb20vIn0&s=ABGxBYIiJ1kOOoU-PRlpXGizuTwhttp://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjg0NywiY2giOjExNzgsImNyIjo1OTE2LCJkaSI6IjZkNjk3ZTEwZjFhZjRmMDBiM2UzMjMwZDY5NzdjNGQzIiwiZG0iOjEsImZjIjo4ODAyLCJmbCI6MjQ0NCwia3ciOiJqYXZhc2NyaXB0LGpxdWVyeSxkb20samF2YXNjcmlwdC1ldmVudHMsZXZlbnQtaGFuZGxpbmciLCJudyI6MjIsInBjIjowLCJwciI6MTU2OCwicnQiOjEsInN0Ijo4Mjc3LCJ1ayI6InVlMS0yMTJiOTk0ZTRmYTM0MzIzYmM2MGU3ZTYxZWZhMDE3MCIsInpuIjo0MywidHMiOjE0MDA4NTI1ODM0MzUsInVyIjoiaHR0cDovL2NhcmVlcnMuc3RhY2tvdmVyZmxvdy5jb20vIn0&s=ABGxBYIiJ1kOOoU-PRlpXGizuTwhttp://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjg0NywiY2giOjExNzgsImNyIjo1OTE2LCJkaSI6IjZkNjk3ZTEwZjFhZjRmMDBiM2UzMjMwZDY5NzdjNGQzIiwiZG0iOjEsImZjIjo4ODAyLCJmbCI6MjQ0NCwia3ciOiJqYXZhc2NyaXB0LGpxdWVyeSxkb20samF2YXNjcmlwdC1ldmVudHMsZXZlbnQtaGFuZGxpbmciLCJudyI6MjIsInBjIjowLCJwciI6MTU2OCwicnQiOjEsInN0Ijo4Mjc3LCJ1ayI6InVlMS0yMTJiOTk0ZTRmYTM0MzIzYmM2MGU3ZTYxZWZhMDE3MCIsInpuIjo0MywidHMiOjE0MDA4NTI1ODM0MzUsInVyIjoiaHR0cDovL2NhcmVlcnMuc3RhY2tvdmVyZmxvdy5jb20vIn0&s=ABGxBYIiJ1kOOoU-PRlpXGizuTwhttp://stackoverflow.com/http://stackexchange.com/http://stackexchange.com/http://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjg0NywiY2giOjExNzgsImNyIjo1OTE2LCJkaSI6IjZkNjk3ZTEwZjFhZjRmMDBiM2UzMjMwZDY5NzdjNGQzIiwiZG0iOjEsImZjIjo4ODAyLCJmbCI6MjQ0NCwia3ciOiJqYXZhc2NyaXB0LGpxdWVyeSxkb20samF2YXNjcmlwdC1ldmVudHMsZXZlbnQtaGFuZGxpbmciLCJudyI6MjIsInBjIjowLCJwciI6MTU2OCwicnQiOjEsInN0Ijo4Mjc3LCJ1ayI6InVlMS0yMTJiOTk0ZTRmYTM0MzIzYmM2MGU3ZTYxZWZhMDE3MCIsInpuIjo0MywidHMiOjE0MDA4NTI1ODM0MzUsInVyIjoiaHR0cDovL2NhcmVlcnMuc3RhY2tvdmVyZmxvdy5jb20vIn0&s=ABGxBYIiJ1kOOoU-PRlpXGizuTwhttp://careers.stackoverflow.com/http://stackoverflow.com/tourhttps://stackoverflow.com/users/login?returnurl=http%3a%2f%2fstackoverflow.com%2fquestions%2f570960%2fhow-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-toolhttps://stackoverflow.com/users/signup?returnurl=http%3a%2f%2fstackoverflow.com%2fquestions%2f570960%2fhow-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-toolhttp://stackexchange.com/http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-toolhttp://docs.jquery.com/Core/data#namehttp://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node/447106#447106http://stackoverflow.com/posts/570960/revisionshttp://stackoverflow.com/questions/tagged/event-handlinghttp://stackoverflow.com/questions/tagged/javascript-eventshttp://stackoverflow.com/questions/tagged/domhttp://stackoverflow.com/questions/tagged/jqueryhttp://stackoverflow.com/questions/tagged/javascripthttp://stackoverflow.com/users/49951/jaanushttp://stackoverflow.com/users/49951/jaanushttp://stackoverflow.com/users/2691847/aksuhttp://stackoverflow.com/users/2691847/aksuhttp://stackoverflow.com/abouthttp://stackoverflow.com/
8/12/2019 How to Debug Javascript, jQuery
2/3
5/23/2014 How to debug Javascr ipt/jQuery event bindings wi th
Fi reBug (or simi lar tool) - Stack Over flow
http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug
-or-similar-tool
SystemParadox
1,712 13 21
Crescent Fresh
51.6k 13 100 120
Matthew Crumley
45.1k 13 54 90
Jan Odvarko
651 5 2
Query.eac c c Even s, unc on ey, an
erOconsole.log(handlerObj.handler)// prints "function() {
console.log('clicked
})
edited Feb 1 '13 at 11:36 answered Feb 20 '09 at 20:21
190 alert() is bad bad bad for debugging. It's a horrorshow for
asynchronous events and trecherous in
animation or mouseevent stuff. console.log() always gives more
information, it's formatted nicely and
its non-modal. Always use console.log, die alert die. Paul
IrishDec 20 '10 at 0:09
3 How would this look like for jQuery 1.6? GezimSep 15 '11 at
14:05
12 FYI: This will not display events that weren't attached with
jQuery Juan MendesOct 7 '11 at 18:39
6 Totally agree about console.log(), however it should be hedged
with something like if
(window.console) in case it gets left in the code (much easier
to do than with alert()) and breaks IE.
thepeerJan 24 '12 at 16:46
10 @thepeer Personally I prefer to do a check for the console at
the start of the file, and if it doesn't exist
create a dummy object. AndrewFeb 4 '12 at 13:15
show 5more comments
There's a nice bookmarklet called Visual Eventthat can show you
all the events attached to an element.
It has color-coded highlights for different types of events
(mouse, keyboard, etc.). When you hover over
them, it shows the body of the event handler, how it was
attached, and the file/line number (on WebKit
and Opera). You can also trigger the event manually.
It can't find every event because there's no standard way to
look up what event handlers are attached to
an element, but it works with popular libraries like jQuery,
Prototype, MooTools, YUI, etc.
edited Aug 10 '12 at 13:35 answered Feb 20 '09 at 19:52
Thanks! This is almost there, but for some (more problematic)
elements, it shows the handler is just { returnfalse; } even if a
handler actually exists. Jaanus Feb 20 '09 at 20:35
1 This bookmarklet seems to have stopped working and their
website is down :-(. It seems that the
bookmarklet calls a Javascript file that was on their site
CasebashJul 18 '10 at 23:19
4 @Casebash: It's working again. Matthew CrumleyJul 21 '10 at
3:22
4 Note that since this runs in content JavaScript, it gets it s
data by querying JavaScript libraries. So it will only
show events added with a supported library (which includes
jQuery). Matthew FlaschenSep 25 '11 at 4:57
When I tried to use Visual Event on my page, I got a JavaScript
error somewhere in their script , and then
nothing happened. Results my vary, but this didn't work for me.
JoshOct 27 '11 at 18:05
show 4more comments
The Eventbug extension has been released yesterday, see:
http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/
Honza
answered Oct 30 '09 at 12:05
Integrates great in Firebug. Thanks for the suggest ion!
HuskySep 29 '10 at 9:11
Jan thank you! No, really! LiutaurasFeb 11 '11 at 16:48
+1 This answer should get more votes, to vie for top position.
It provides a Firebug way to solve the issue,
which (like the author seems to prefer) is the reason I got to
this page. user66001Jan 24 at 18:33
This seems like an interest ing feature. Is it gone? I can't
find how to install Eventbug. I've been to the link given
above, but I don't understand how to download/install this addon
into Firebug. Thanks. Chris22Mar 7 at
http://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6NCwiY20iOjg0NywiY2giOjExNzgsImNyIjo1OTIzLCJkaSI6ImFmNGRmMTUwNjhhNzQwZmI4Y2Q4MTcwMTBlMzEzNzI3IiwiZG0iOjEsImZjIjo4ODA5LCJmbCI6MjQ0NCwia3ciOiJqYXZhc2NyaXB0LGpxdWVyeSxkb20samF2YXNjcmlwdC1ldmVudHMsZXZlbnQtaGFuZGxpbmciLCJudyI6MjIsInBjIjowLCJwciI6MTU2OCwicnQiOjEsInN0Ijo4Mjc3LCJ1ayI6InVlMS0yMTJiOTk0ZTRmYTM0MzIzYmM2MGU3ZTYxZWZhMDE3MCIsInpuIjo0NCwidHMiOjE0MDA4NTI1ODM0MzcsInVyIjoiaHR0cDovL2NhcmVlcnMuc3RhY2tvdmVyZmxvdy5jb20vIn0&s=IL4JTF4l2I3nHik4SGVgAKmiYnYhttp://stackoverflow.com/users/773202/chris22http://stackoverflow.com/users/1126551/user66001http://stackoverflow.com/users/134246/liutaurashttp://stackoverflow.com/users/152809/huskyhttp://www.softwareishard.com/blog/firebug/eventbug-alpha-released/http://stackoverflow.com/users/127175/joshhttp://stackoverflow.com/users/47773/matthew-flaschenhttp://stackoverflow.com/users/2214/matthew-crumleyhttp://stackoverflow.com/users/165495/casebashhttp://stackoverflow.com/users/49951/jaanushttp://stackoverflow.com/posts/570996/revisionshttp://www.sprymedia.co.uk/article/Visual+Event+2http://stackoverflow.com/users/261017/andrewhttp://stackoverflow.com/users/79527/thepeerhttp://stackoverflow.com/users/227299/juan-mendeshttp://stackoverflow.com/users/32495/gezimhttp://stackoverflow.com/users/89484/paul-irishhttp://stackoverflow.com/posts/571087/revisionshttp://stackoverflow.com/users/199624/jan-odvarkohttp://stackoverflow.com/users/199624/jan-odvarkohttp://stackoverflow.com/users/2214/matthew-crumleyhttp://stackoverflow.com/users/2214/matthew-crumleyhttp://stackoverflow.com/users/45433/crescent-freshhttp://stackoverflow.com/users/45433/crescent-freshhttp://stackoverflow.com/users/737896/systemparadoxhttp://stackoverflow.com/users/737896/systemparadox
