Profiling executed JavaScript path [duplicate] - javascript

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.

Related

set breakpoint to html element?

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

How to get event listener of element set through Jquery in chrome dev tool?

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.

debugging javascript events to make popovers work

I have a page with a lot of Javascript on it. Included is the popular Twitter bootstrap's popover widget which is not working. Specifically if I hover over the icon that should launch the "popover". I know the HTML/JS is correct as it's exactly the same as this working jsfiddle: simple working example.
Here's the HTML inline:
<span id="container">
<i id="common-actions-info"
class="icon-info-sign"
rel="popover"
data-trigger='hover'
data-delay={show:10,hide:500}
data-placement="right"
data-title="Common Actions"
data-content="A list of actions that you have been using frequently. Choosing any of these actions will open up a new quick entry form to add another of these items."></i>
​
And then I connect the popover javascript with:
$("[rel=popover]").popover();​
In my more complicated "real environment" I can run
$("[rel=popover]").popover('show/hide')
commands and that works but it's just not getting the signal to display it when I hover over the icon. Anyway, I think the problem is that some other JS is catching the hover events and not triggering the display of the popover.
Is there a good way to use Chrome's debugger to watch DOM events and track down what's happening here?
UPDATE:
I've been looking at the "Event Listeners" in the Elements tab of Chrome Developer Tools. Although I'm still a little bit overwhelmed with the tree of information it provides I have discerned an important pattern: on pages where the "popover" plugin works you will find a "mouseover" and "mouseout" event listener on the widgets that I guess are responsible for toggle the display of the widget on and off. In a page where it doesn't work these events don't exist (so far what I've seen is that there is no listeners at all).
Does anyone have any idea:
what could be conflicting with Bootstraps listeners being setup?
how might I troubleshooting this without loosing any more hair on the top of head?
You can use Chrome/Firefox plugin called Firebug.
Install it, open it, go to DOM tab and refresh your page. It will show you detailed overview of DOM actions, function executions .... everything.
Take a look at this page: https://getfirebug.com/dom. It will give you a basic functionality of Firebug DOM explorer.
This is also a good tutorial: http://www.softwareishard.com/blog/firebug/firebug-tip-log-dom-events/
EDIT :
There's a way you can trap a event. It is not a best solution but it will help you in case some other plugin/framework took control over needed container:
Lets say you are binding a click event to i#common-actions-info
$('i#common-actions-info').click(function() { console.log('clicked!') });
You can then use this code to watch what events are bind to i#common-actions-info:
var clickEvents = $('i#common-actions-info').data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
console.log(handlerObj.handler) // will print "function() { console.log('clicked!') }"
})

How can I find what onChange function an Element has?

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

javascript debugging - is there a way to tell what functions are being executed?

I'm examining someone else's code and I'm trying to find out what functions are executing when I take certain actions. Is there a way in firebug to do this? (or any other way).
In this particular case I'm trying to find out what happens when I click the 'next' and 'previous' buttons in the editor found at http://trirand.com/blog/jqgrid/jqgrid.html, "Live Data Manipulation >> Navigator" (then clicking the pencil, then the arrows at the bottom).
I've tried grabbing the item I'm clicking and looking at its properties in the console by doing this:
>>> obj = $('#nData')
>>> console.log(obj)
but there doesn't seem to be a handler for click.
What would be wonderful if if there's a way to see what functions are called when I perform an action.
FireQuery may be of some use to you. It hooks into Firebug and displays additional meta-data on all DOM elements which have been modified by JQuery.
You can use Firebug's "Break on next" (the pause looking button in the toolbar)
Then you can the step buttons to move around. Set it to use that, and then click whichever button you want to check the action for.
Since my description probably sucks, check this out.
Edit: This sounds like what you want:
It's primary goal is breaking the Javascript execution at required place in the code that is unknown to the developer beforehand. The typical example, probably well known to most web developers is: "Where in the hell is the code, which is executed if I click this button?".
In firebug, in the Script tab, put a breakpoint in the line you want to inspect. In the right, there is a "Stack" tab where you can see the current stack trace!

Categories

Resources