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?

user295691 · Accepted Answer · 2015-08-25 19:59:20Z

41

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/

edited Aug 25, 2015 at 19:59

user295691

7,2681 gold badge28 silver badges37 bronze badges

answered Aug 14, 2011 at 3:02

Matthew

13.4k6 gold badges44 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

cbmeeks Over a year ago

+1 AWESOME. Don't you hate when you've used a tool for years only to be schooled on it? lol.

ack Over a year ago

Though I see that asker has accepted this answer, when I first read the question, my impression was that he was looking for something like "Log Events" in Firebug, which logs events to the console even for elements which don't have handlers explicitly attached using JS (including elements whose child elements do have them). I haven't found anything like that for Chrome, and the Firebug Lite Chrome extension doesn't have it either. Does anyone know an alternative?

Scott Smith Over a year ago

The link to that article is dead now. Got another?

godblessstrawberry Over a year ago

@ScottSmith its back

unicorn Over a year ago

but what to do if all the action run on page load? when I refresh I loose the breakpoint

BrianFreud · Accepted Answer · 2012-01-22 06:23:48Z

7

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.

answered Jan 22, 2012 at 6:23

BrianFreud

7,6046 gold badges37 silver badges51 bronze badges

Comments

Alex Shilman · Accepted Answer · 2013-12-14 19:53:07Z

0

Right click on the element in chrome dev tools, and click on 'break on' , then you would see multiple selections such as sub tree modifications. Or you could also go to chrome//:tracing

edited Dec 14, 2013 at 19:53

answered Dec 14, 2013 at 4:24

Alex Shilman

1,5471 gold badge11 silver badges15 bronze badges

Collectives™ on Stack Overflow

Track events using Chrome javascript debugger

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related