I have a page which loads a lot of JavaScript files. Somewhere in the files, an onchange handler is added to an inputfield A.
When a value is added into inputfield A, inputfield B is automatically filled in with another value (depending on the value of A).
The sheer number of files and the names of the inputfields ('code', 'key') make it hard to use grep to find where the onchange is defined.
I've tried using
Opera Dragonfly
Firefox Firebug
Google Chrome Developer Tools
but I can't seem to find out how to get them to show me where I can find the onchange function that gets called.
Anyone got an idea?
you can see the jquery expression in firebug DOM inspector using firequery in firefox
https://addons.mozilla.org/en-us/firefox/addon/firequery/
Chrome has build in developer tools that allow you to inspect an element and see any event listeners attached to it.
Google chrome developer tools really are amazing.
http://code.google.com/chrome/devtools/docs/elements.html
You can use Firebug to set a breakpoint when a particular HTML element has an attribute change:
http://getfirebug.com/doc/breakpoints/demo.html#html
You could try selecting the second element you've described (that gets filled in) and see if that works for you.
Visual Events allows you to inspect the bound events without editing your code:
http://www.sprymedia.co.uk/article/Visual+Event
I had the same issue and I used Google Chrome's dev tool and it helped. Follow the steps below:
Select the event listener breakpoint
Select control checkbox
Select onChange this will pause on the onChange function in your code
Related
I have a page with elements that JavaScript is creating at some point after the page loads and I want to remove them but I cant find the function that creates them.
I wonder if Firefox tools can help me with that? I use Firefox 53.0.3
right click inspect element, search code base for the ID or the class name of the div to see what spawns it. Without knowing if this is jquery, angular, or even the type of element I can not assist you more.
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 am probably wasting my time with this question but here goes.
Chrome and Opera do not handle events in option elements IE and Firefox do.
So I am wondering I some knows a workaround other than using onchange in the select element, as I have tried to work with that event and pull errors of null value.
onchange="side_nav(this.getAttibute('id'))"
The code I am using is simple id change that works sweet in anything but option elements in chrome and opera, This is the function.
function side_nav(id)
{
document.getElementById("selectedS").setAttribute("id","");
id.setAttribute("id","selectedS");
}
Like I said it works with this in the option element but only in IE and FireFox
onclick="side_nav(this)"
The function works sweet in buttons and I suspect every other element also, just not the one I am set up to use.
I suspect I will have rewrite the nav panel to fix the problem, but thought I would ask someone else there thoughts.
This is What I believe is the answer. not well written but addresses the issue with an answer.
This is a response to Chrome bug reporting. The actual post
Fist I must say after further evaluation I believe that this is not as much a bug or defect but is in how the browser handles the select and option elements. As I see this the browser sees the option element/tag more as an attribute of the select element rather than than an individual element. The select element/tag is just a multidimensional array in HTML and the option tags become attributes of the select element which is why events do not fire and is also why it is impossible to style the option element/tag. I see now that this is deep in source code and seems to be split up equally between the top four browsers. I'll put the basic select code that I have been working with but it will be of no help as it is just the norm, and as I said, it's not a bug but program design.
Thanks for the response.
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
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.