Develop Reference

What is the fastest way to find a listener for debugging javascript in a browser?

Background:
I often find myself in the position of debugging a piece of Java script on a web page in an unfamiliar codebase, and often one that has seen many developers and coding approaches. Sometimes I do not even what technologies might be in use, eg. angular etc.
The first time I need to address the Java script is when a specific behaviour is unexpected (ie. it has gone wrong.)
Question:
What tool provides the fastest route to identifying the entry point of the code that is causing the problem?
Example:
I have an html element on a page lets say a button. When that button is clicked I expect to see an http request at the server. There are many ways the element can be associated with its Java script listener. eg JQuery, thrid party plugins such as knockout etc, in house scripts, and so on.
Using developer tools I can start debugging this in the browser but only if I already know the entry point to put a breakpoint on.
Is there a faster method to find the entry point than doing regular expressions searches on the pages code based on intuition and guess work to find what might be attached to that particular element?

For me, the best starting point is in Chrome developer tools. You can:
Choose an element in the elements tab
On the right-hand side of the elements tree, click the "Event Listeners" tab.
Find the event you want to debug (like click)
Click the hyperlink to bring up the code for event listeners, and set breakpoints. Sometimes you have to click the "format code" button (looks like { }) to get the code on multiple lines so that the breakpoint is manageable.
Do the click, and you'll hit your breakpoint, allowing you to step through the code, add watch variables, etc.

Profiling executed JavaScript path [duplicate]

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.

how to track javascript code which dynamically adds styling (css) to elements? [duplicate]

Somehow somewhere in my code one of the elements on the page gets a style attribute which I don't expect it to get. Namely, it gets style="position:fixed". I can see this happening in HTML tab in Firebug, but can't find it in the code. The application is fairly big and I can't simply look through all of the code to find the place, besides, several third-party libraries are being used (jQuery is one of them).
So, my question is, is it possible to somehow catch this style being changed and get the trace?

In Google Chrome, right click on an element in the page and select "Inspect Element." The Developer Tools window or pane will open with that element selected in the source view. You can then right click the selected tag and choose "Break on Attributes Modifications."

Well, after a couple of hours of googling and experimenting, it seems that the best one can do it setup a MutationEvent handler (Firefox supports them) like this:
var node_modified = function(evt) {
if(evt.attrName == 'style') {
alert('Style is changing from ' + evt.prevValue + ' to ' + evt.newValue);
}
}
var test_close = document.getElementById('test_close');
test_close.addEventListener('DOMAttrModified', node_modified, false);
An then set up some kind of logging throughout your code and see when this event gets triggered. Unfortunately, you can't just set up a breakpoint in the mutation event handler and see the stack trace, because event handler's stack trace has no information about the place in the code, where the event got triggered. Kind of logical, but I think that with some hacking this feature can be implemented in Firebug.
Thank you for your time!

In Firebug's HTML inspector you can right click on a node and there is an option to interrupt on attribute change.
Breakpoints persist through page reloads and you can also browse the call stack.

Sounds like you really need a debugger. Firebug has one built in, otherwise you can give Venkman a try, which I find a bit more cumbersome but perhaps is more effective..
Good luck! :)

How do I find what Javascript is running on certain events?

I'll pick Chrome for this example, but I'm open to a solution from any browser.
Use Case:
I have an update button on my website that is used to update item quantities in a shopping cart. I'd like to allow a user to enter a 0 and click update in order to remove the item. Trouble is, there is some listener in some js function that is denying the ability to enter a 0 and click update (after clicking update the old quantity remains).
My question is, what developer tool can I use to find which js function is running during that event? I don't think that Chrome's inspector does this, and I'm not very familiar with Firebug, but I couldn't find the functionality there either.
I feel that I should be able to inspect js firings just like I do css stylings. Is anyone aware of a tool I may use?

I've had to debug some particularly nasty unseen-cause Javascript issues at my job. Knowing the full depth of developer tools like Chrome's is definitely helpful. It undeniably takes some creativity to find places that might be causing the issue, but a few tips:
Tracking down event listeners
Under Chrome's Elements view, try Inspect-ing an element (right-click, Inspect); then, on the right side of the developer view, scroll down to Event Listeners. Here you can view what code files have hooked up an event. Often, this will just point you to a middle-framework from the really devious code you're looking for, but sometimes it will point you in the right direction.
Trapping a DOM modification
Many of the unwanted effects I see are because of something changing some value or attribute on the page that I don't want. Anytime this happens, you can right-click on the element (under the Elements view) and say "Break on..." and the specific scenario you're looking for. When Chrome then hits a breakpoint, you can then look downward in the Stack Trace until you find something recognizable that shouldn't be called.
EDIT after reaching ten votes!
Trapping a JS object modification
If the change you're interested in is code-internal, not in the UI, things get trickier. What's meant by this scenario is that you know somewhere in the code, something incredibly annoying like the following is happening.
company.data.myObject.parameter = undefined;
In this situation, you know myObject is still the same object, but it's being modified, perhaps unintentionally. For that, I often insert the following bit of code, sometimes just through the developer console at some point before said modification happens.
Object.defineProperty(company.data.myObject, 'parameter', {
set: (val) => {
debugger;
}
});
This includes an arrow function - you're only using this for debugging and Chrome supports it, so might as well save keystrokes. What this will do is freeze your debugger as soon as some line of code attempts to modify myObject's "parameter" property. You don't necessarily have to have a global reference to the variable if you can run this line of code from a previous breakpoint that will have the given object in the locals.
Otherwise, if all I'm starting out with is the HTML code, and I want to tie that to Javascript code, I'll often just look for identifying features like "id" elements, and search all JS files in my development directory for it. Normally, I can reach it pretty fast.

Open your page in Firefox with Firebug enabled.
Go to console tab in firebug and click profiling
enter 0 in the textbox and click the button.
Stop profiling.
You will be able to see all the javascript functions which have executed due to your actions. You can view them one by one to figure out which method has caused the mischief.

Go to you code. If you are using jQuery there is going to be a function that will be called with the class or id of that particular update button. Or, if you are using Javascript, there is going to be a function called inside the
<input type="button" name="update" onclick="update()">
These are the two ways to look for the function that is being called; there is no software that I know

Download Firebug for Mozilla Firefox, open it, click on Net and refresh your website. Than, you can see which files are loaded on the page.
If you want to check on errors and what goes wrong with an explanation, than click on console and refresh the page once again. You will see the errors and on which line it goes wrong.
Note: in your console, you can say hold or stop, so that the js file stops loading. And you can edit the script by clicking on script in Firebug. Debugging is simple, as it says on their official page https://getfirebug.com/javascript

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!