0

I am looking for a way/solution so I can see what javascript function of being called IN BROWSER, while I am on a website.

I imagine it similar to Firebug (and may even be possible to DO in Firebug, but I havent stumbled upon it yet/easily)

Where the 'plug-in' is running/started (like Firebug).. and if I click/hover (interact) with the page and that element has any sort of javascript or jQuery functions it calls, is bound to, executes... I'd like to know:

  • the event
  • the function name
  • function details/code

I have read some old tutorials about Chrome (but wasnt the same in current browsers).. I saw mention of it being done in Firebug, but not sure to currently navigate to the panels to easily see the above desired data.

For my better understanding and terminology use.. is this 'debugging' or 'profiling'?

And how can I do what I described above? (Firebug? different plug-in?)

  • I am currently trying to debug some local web dev stuff.. that is using Bootstrap.js.. and I want to follow along on what JS functions are being called.
whispers
  • 962
  • 1
  • 22
  • 48
  • 1
    Personally I use the debug/developer mode of browsers, no 3rd party plugins. – tibetty Aug 15 '17 at 01:58
  • @tibetty please explain how I can achieve the above behavior in Firefox. – whispers Aug 15 '17 at 02:02
  • https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#event-listeners – Bergi Aug 15 '17 at 02:04
  • https://developer.mozilla.org/en-US/docs/Tools/Debugger – tibetty Aug 15 '17 at 02:05
  • @Bergi Is there nothing for Firefox? – whispers Aug 15 '17 at 02:05
  • @tibetty Setting a breakpoint would mean I have to KNOW the function name......yes? (kind of the opposite I'm looking for) – whispers Aug 15 '17 at 02:08
  • @whispers It's basically the same for FF. I just had the link to the Chrome devtools docs at hand. – Bergi Aug 15 '17 at 02:09
  • @Bergi Wouldnt you need to know the function name? I'm looking for something like a STYLE inspector or something. (but for JS) You click on a 'button/link' if it has some JS or is bound to some functions (jQuery...etc).. then it should display the function name in some window and the function itself. I dont know the function name the set a breakpoint on it. (maybe I missed something?) – whispers Aug 15 '17 at 02:11
  • Precaution: @whispers if you want to debug uglified/minified script, it will be fairly difficult. Basically you need rely heavily on stepping in/over and event triggers but not simple breakpoints. – tibetty Aug 15 '17 at 02:13
  • @tibetty I just want to see a function name/code when I click on a button/link that has (let say) an onclick event on it? I just want to see what function is being called. LIke if an externally loaded .js script is being used.. I'd like to see what js function being called when I click/hover (whatever) over an element on the stage that has some JS add/bound to it. Maybe there just isnt anything for what I'm looking to do/for? – whispers Aug 15 '17 at 02:16
  • @whispers No, you just set the breakpoint by element and event name, then you can debug what happens when you trigger it. If you're looking to find the attached event listeners, see [here](https://stackoverflow.com/q/446892/1048572) (but notice that jQuery is ugly, keeping its own data structures) – Bergi Aug 15 '17 at 02:25

1 Answers1

0

Apparently there is an EventBug Plugin for Firebug that seems to do what you want.

Micah Hunsberger
  • 236
  • 1
  • 10
  • Thanks I saw that.. but it looked pretty old. (and I think its included by default now).. That being said.. I dont think it works the same way any more. It was NOT showing me the jQuery/JS function that is called when I click on an element on my page. – whispers Aug 16 '17 at 20:39