Track events using Chrome javascript debugger

Question

I don't have a specific use case here, but occasionally I have been either helping out someone on SO or seen a cool javascript effect on a website and been curious about the code that drives it. However, the event that drives the code may not be immediately obvious. If I can't find the event handler then it can be really hard to find the js responsible for the effects I am interested in. Is there a quick way in the debugger to identify the events attached to an element and to drop a break point in when it fires?

So for example an event may exist on a structure something like so

<div>
  <ul>
     <li><span><img /></span></li>
  </ul>
</div>

Now I don't know if the event is bound to the img, span, li, ul or div itself. Chrome has the Event Listeners area, but I feel like it doesn't always contain events. Anything you guys do that allows you to quickly find the event and drop a break point into it?

Solution 1

yes there is!

find the element that is being reloaded and right click, choose inspect from context menu, then right click the html of the element (in the bottom firebugish pane), in the context menu there are options to:

• break on subtree modifications
• break on attributes modifications
• break on node removal

Article on awesome new dev features in chrome: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

Solution 2

If you have access to the .js, just add "debugger;" on its own line. Whenever Chrome (or FF) hits that, it'll trigger the debugger and let you walk through. Esp useful if you have some general idea which code will trigger the event. See http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/ for more.