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

Question

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?

Answer 1

For me, the best starting point is in Chrome developer tools. You can:

1. Choose an element in the elements tab
2. On the right-hand side of the elements tree, click the "Event Listeners" tab.
3. Find the event you want to debug (like click )
4. 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.
5. Do the click, and you'll hit your breakpoint, allowing you to step through the code, add watch variables, etc.