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?

copenndthagen
  • 49,230
  • 102
  • 290
  • 442
  • 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) – VirtualTroll May 30 '11 at 17:22

5 Answers5

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.

RobinJ
  • 5,022
  • 7
  • 32
  • 61
  • 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. – Lepidosteus May 30 '11 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: http://getfirebug.com/releases/lite/chrome/ – RobinJ May 30 '11 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 '21 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)

Community
  • 1
  • 1
thaddeusmt
  • 15,410
  • 9
  • 67
  • 67
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.

fvu
  • 32,488
  • 6
  • 61
  • 79
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.

Gleno
  • 16,621
  • 12
  • 64
  • 85
-1

Chrome Developer Console + Firefox Firebug

Mikhail Nikalyukin
  • 11,867
  • 1
  • 46
  • 70