for example I have button element, the click event is attached to id in XXX.js file (I don't know the file name) , and I have many .js files. I want to debug the button click but how can I figure out where to set breakpoint if i don't know where button click function is ? is there any way to set breakpoint on element ( I'm using firebug, if it's impossible on firebug and possible for any other add-on please tell)
I'm using EXT sencha to add eventhandlers
Events handled with addEventListener:
Using your browser's developer tools, you can often times inspect an element to see what events are bound to it, and from which source file. For instance, the following example shows a click event bound to my button element:
Events handled with jQuery's $.fn.on:
If you bound the handler using jQuery's $.fn.on method, you can look into its internal $._data collection to determine what events handled for which elements:
I would check out this plugin. That will help you find what file/where the bound event lives. Then you can debug from there. http://www.sprymedia.co.uk/article/Visual+Event+2
If you want to know the js file with the listener, use Chrome dev tool, Inspect Element > On the Event Listeners you will find attached listeners and the file and even highlight the code on clicking. I don't know if this feature is in firebug too
Chrome Development Tools provides an Event Listener, which shows you elements and the attached Js-Events. Not quite sure if it helps you with your specific problem.
Firebug implements the getEventListeners command that returns every event listeners for every events for a node:
http://www.softwareishard.com/blog/planet-mozilla/firebug-tip-geteventlisteners-command/
Also there is the EventBug extension, that offers a UI:
https://getfirebug.com/wiki/index.php/Firebug_Extensions#Eventbug
Related
Lets suppose I've a link on my page:
Click Here
I don't know anything else, but when I click on the link, an alert("bar") is displayed.
So I know that somewhere, some code is getting bound to #foo.
How can I find the code that is binding the alert("bar") to the click event?
I'm looking for a solution with Chrome.
Ps.: The example is fictive, so I'm not looking for solution like: "Use XXXXXX and search the whole project for "alert(\"bar\")". I want a real debugging/tracing solution.
Using Chrome 15.0.865.0 dev. There's an "Event Listeners" section on the Elements panel:
And an "Event Listeners Breakpoints" on the Scripts panel. Use a Mouse -> click breakpoint and then "step into next function call" while keeping an eye on the call stack to see what userland function handles the event. Ideally, you'd replace the minified version of jQuery with an unminified one so that you don't have to step in all the time, and use step over when possible.
You can also use Chrome's inspector to find attached events another way, as follows:
Right click on the element to inspect, or find it in the 'Elements' pane.
Then in the 'Event Listeners' tab/pane, expand the event (eg 'click')
Expand the various sub-nodes to find the one you want, and then look for where the 'handler' sub-node is.
Right click the word 'function', and then click 'Show function definition'
This will take you to where the handler was defined, as demonstrated in the following image, and explained by Paul Irish here: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA
Give it a try to the jQuery Audit extension (https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg), after installing follow these steps:
Inspect the element
On the new 'jQuery Audit' tab expand the Events property
Choose for the Event you need
From the handler property, right click over function and select 'Show function definition'
You will now see the Event binding code
Click on the 'Pretty print' button for a more readable view of the code
(Latest as of 2022) For version Chrome Version Version 99:
Select the element you want to inspect
Choose the Event Listeners tab
Make sure to check the Framework listeners to show the real javascript file instead of the jquery function.
Edit: in lieu of my own answer, this one is quite excellent: How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)
Google Chromes developer tools has a search function built into the scripts section
If you are unfamiliar with this tool: (just in case)
right click anywhere on a page (in chrome)
click 'Inspect Element'
click the 'Scripts' tab
Search bar in the top right
Doing a quick search for the #ID should take you to the binding function eventually.
Ex: searching for #foo would take you to
$('#foo').click(function(){ alert('bar'); })
2018 Update - Might be helpful for future readers:
I am not sure when this was originally introduced in Chrome. But another (easy) way this can be done now in Chrome is via console commands.
For example: (in chrome console type)
getEventListeners($0)
Whereas $0 is the selected element in the DOM.
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
findEventHandlers is a jquery plugin, the raw code is here: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js
Steps
Paste the raw code directely into chrome's console(note:must have jquery loaded already)
Use the following function call: findEventHandlers(eventType, selector);
to find the corresponding's selector specified element's eventType handler.
Example:
findEventHandlers("click", "#clickThis");
Then if any, the available event handler will show bellow, you need to expand to find the handler, right click the function and select show function definition
See: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
For Chrome Version 52.0.2743.116:
In Chrome's Developer Tools, bring up the 'Search' panel by hitting Ctrl+Shift+F.
Type in the name of the element you're trying to find.
Results for binded elements should appear in the panel and state the file they're located in.
I want use Chrome developer tool to add a break point to js function to debug it.
For example, a function "buttonAlert()" is binded to a button.
But I don't know where the code of such function, and I don't know where the code that bind the function to button.
So, how can I use the tool to find out the location of function and binding code?
It is actually possible to see event listeners in chrome.
Go to the elements panel, select the element in question and click on Event Listeners on the right side.
Sadly most of the time when jQuery is in use, you only see the part of the source of jQuery that bound the event, not the one that called jQuery.
I tried to search but not found exact solution.
If a div element has onclick event listener set by jquery than how to get value/function triggered on click in chrome dev tool?
I try in dev tool but it is only showing 'content js min.js:1'.
Please see this image http://myfilestore.tk/net/Capture.PNG?a=so14052013
Looks like what you want is to see the click event handlers registered for an element.
You can use event data to achieve this in the console, though you have to note that it is private method - not documented may get changed in future without any notification
Ex:
var clicks = jQuery._data( jQuery('element')[0] , "events" ).click;
Read this question also
Demo: Fiddle
The jQuery Audit plugin plugin should do the trick. It's not perfect, but it should give you what you want.
Is there anyway I can figure out perhaps using firebug, when I click on a element the name(s)/body(s) of a function which get called.
for an example I want to know what are the Javascript functions that got
triggered when I press tweet button.
Please note that I am not talking about eventLog, breakpoints, or anything that requires to modify the source code.
I found out that visual event is an amazing tool which can help to visualize all the events attached with different elements.
I don't know about Firebug, but in Webkit Inspector, under the Scripts tab, under Breakpoints, then Event Listener Breakpoints, you can select different types of events in a hierarchical structure (Keyboard, Mouse, etc, and under those, each individual event).
When the event is triggered, the debugger will break.
I have a facebook connect button on this site here is the code
<fb:login-button onlogin="javascript:jfbc.login.login_button_click();"
perms="email,publish_stream,user_about_me,user_hometown,user_location,user_birthday,user_religion_politics,user_interests,user_activities,user_website"
size="medium" v="2"><a class="fb_button fb_button_medium">
<span class="fb_button_text"\>Login With Facebook</span></a></fb:login-button>
and i want to trigger this button with a javascript call and doing research i found this jquery that seems that it would do the trick (havent tested though) and i was wondering if there is an equivelent javascript or mootool because jquery is not installed. I can install it if i cant find a solution. Or if anyone has another idea on how to trigger this facebook button
$("fb\:login-button").trigger("click");
There are two ways to "trigger" a listener:
call it directly (e.g. element.onclick())
dispatch an event into the DOM that the listener will respond to
The trouble with the first method is that it doesn't replicate a bubbling event so the listener may not work as intended (e.g. there is no associated event object or bubbling, the listener's this keyword may not be correctly set).
The trouble with the second is that some browsers will not allow programatically dispatched events to do certain things (click on links for example). Also, in some browsers you have to use the W3C dispatchEvent and in others the Microsoft fireEvent.
So unless the listener has been designed specifically to work with one method or the other and is called appropriately, your chances of triggering the listener successfully are quite low.
PS. Some libraries provide their own event system, with custom events and bubbling of otherwise non-bubbling events, but in that case you have to set and trigger the listener using that library, otherwise it will probably not respond to either of the above methods.
You should be able to just invoke the same code that is invoked inline:
jfbc.login.login_button_click();
I suppose it would be something like
document.getElementsByTagName("fb\:login-button")[0].click();
I'm sure that would work very well with a "normal" DOM element that handles the click event; however, I'm not entirely sure it will work in all browsers with the fb:login-button element shimmed into HTML. You'll have to let me know.
Looks like you should be able to do:
document.body.getElementsByTagName("fb\:login-button")[0].click();
It looks like you want a namespaced element selector, so you should use:
document.getElementsByTagNameNS('fb', 'login-button')[0].click();
The : is the namespace separator.
I ran into this tonight, absolutely positioned a new button image over the iframe, and was planning on using pointer-events:none to pass through and click the iframe, but I was looking for a cross-browser solution, here you go.
jQuery('.button_fb_connect').live('click', function(){ FB.login() })
Your simply running the js function FB.login() after clicking your new element, obviously you can use whatever event you want.
Thats in jQuery of course, but thats the function you want, not just a simple click event trigger.