2

I'm not really sure how to best word this, but let's say I'm on a web page and when I click a certain button, something undesirable happens. Like a whole bunch of content disappears. Is there a way in the Firefox debugging tools where I can insert a watch on that button so when I click it, the debugger will pause the JS execution and show me exactly where in the code it's executing the stuff I don't want?

(note: obviously this is code I did not write, otherwise I'd know where to look to fix the problem)

CaptSaltyJack
  • 15,283
  • 17
  • 70
  • 99
  • possible duplicate of [How do I view events fired on an element in Chrome Web Developer?](http://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-web-developer) – CBroe May 27 '14 at 02:38
  • 1
    Not a dupe, different browsers have different tools. – therealjeffg May 27 '14 at 06:35

2 Answers2

1

Yes, in the debugger there is an events pane, and you can break when a specific event is triggered. The documentation is here:

https://developer.mozilla.org/en-US/docs/Tools/Debugger#events-pane

therealjeffg
  • 5,790
  • 1
  • 23
  • 24
  • I don't think this works as I expect it to. I went to a website that makes something animate when I hover over it with the mouse. So I enabled the debugger and reloaded the page, checked the entire "Mouse" section so it would breakpoint when any of them were triggered. I moused over the item and nothing happened. – CaptSaltyJack Aug 20 '14 at 20:29
  • I guess that depends how the mouseover happens. if I look at a page like [MDN](https://developer.mozilla.org/en-US/Add-ons/SDK) and click on the mouseover event in the event list, I can break in the handling code and then step forward so I eventually see the menu pop up. I can then fiddle around in the inspector to look at the code ( using the inspector's picker doesn;t work well if the debugger is paused, for complicated reasons ). If you're not seeing the mousover event *at all*, I'm not sure what the problem is. – therealjeffg Aug 20 '14 at 23:23
1

Firefox has a good built-in profiler - you can click the start profile, and click it again to end, and see what parts of the code are running the most.

This is really helpful in finding performance problems too.

NoBugs
  • 9,310
  • 13
  • 80
  • 146
  • It always says "no event listeners" on my site, yet I have plenty of listeners (via jQuery). Why does it not list them? – CaptSaltyJack Jun 28 '14 at 02:10
  • 1
    Just start profiler, run the click/hover action that has a listener multiple times - stop profiler, and the listener(s) that ran should be somewhere in the top most-active on the list. – NoBugs Jun 28 '14 at 16:04
  • If you download Firefox Nightly the profiler has a MUCH NICER UI http://note.io/1Azf09q – therealjeffg Aug 20 '14 at 23:25