I am using "Event Listeners" to check the event attached to my DOM object. However, when the event is attached using jQuery, all I see is jquery-1.8.3.min.js, is there any ways to work this around?
Asked
Active
Viewed 3,185 times
2 Answers
5
Add jQuery and Chrome extensions to the framework blackbox in developer tools settings.
Chrome Developer Tools > Settings (F1) > General > Manage framework blackboxing...
Check the Blackbox content scripts to disable breaking points on Chrome extensions, and add /.*jquery.*\.js$ to the URI patterns that should be blackboxed.
Now in the Sources tab in the developer tools open Event Listener Breakpoints list on the right, and check the event you want to break the script at, this will stop the script execution on the script you've written to attach the event using jQuery.
Another quick way to blackbox a library is by right clicking its name in the Call Stack in the Sources tab. It will show up when you add an event listener break point.
MMSs
- 455
- 6
- 19
2
When you use jQuery to attach event handlers, then a jQuery function is the one that is actually attached as the event handler (it then calls your event handler function when the event occurs). So, if you look in a generic debugger, that's what it is going to tell you and that's what you see.
To the debugger, jQuery is just javascript and it's showing you what javascript has attached the event handler. There is no way to make the debugger show you something different for jQuery event handlers.
The jQuery library itself has ways to programmatically query what jQuery event handlers are attached to a given object. How to do this varies by jQuery version, but you see generally how it works here: Can I find events bound on an element with jQuery?
