9

What is the best way to debug Javascript code using any tool..i.e. i want to know when a button is clicked, what all JS code gets executed...

I wanted to test in Firefox and Safari..Already tried Firebug, but want to know if there is any better way..

Also more importantly i want to know "how" exactly to debug the code?

Also is it possible to print the complete JS code that gets called when I say press a button?

1
  • I use firebox for Firefox, Chrome ...I use development tool ("F12") for IE. For Safari, if it works on Firefox .... there are great chances that it is going to work on Safari....You can also rely on frameworks that will remove the diversity of browsers to debug (ie jquery etc) May 30, 2011 at 17:22

5 Answers 5

3

I always use the integrated web inspector tool from Google Chrome (you know, right-click, Inspect element). It works quite well for me, and has all the functions I need.

3
  • Seconded, while there are still areas where firebug is ahead (network tab ...), chrome's javascript debugger is really an awesome piece of software to work with. May 30, 2011 at 17:23
  • Also Chrome's debugger is much more user-friendly in my opinion. Apparently there's also a FireBug Lite for Google Chrome: getfirebug.com/releases/lite/chrome
    – RobinJ
    May 30, 2011 at 17:26
  • I was wondering the same as the original poster but the Dev Tools in Edge and Chrome (the same exact thing as far as I can see) don't show any JavaScript that may have been triggered by a button press. They'll show network traffic on pages if you're navigating a site, any JS errors to the console, but I'd like to see what's being triggered when a certain event happens but I don't see where that can be done.
    – clamum
    Aug 19, 2021 at 15:39
2

This post, using FireFox's FireBug and jQuery, might help you detect and capture all of the events bound to a button so you can tell what JS code is run when the button is clicked:

How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

0

Chrome Developer Console + Firefox Firebug of course (and Firebug Lite in IE), but also check out Visual Event, a bookmarklet that show you a highly visual overview of events attached to elements of your page.

0

Well, I think that the best method is using Visual Studio and hooking it with Internet Explorer. As many others have pointed out, the browser built-in tools are great, but visual studio lets you debug javascript code and edit it with same application. The downside is that you must use Internet Explorer, but personally I don't find it to be such a big problem.

1
  • 2
    Internet Explorer is ALWAYS a problem :P May 4, 2016 at 2:28
-1

Chrome Developer Console + Firefox Firebug

Not the answer you're looking for? Browse other questions tagged or ask your own question.