What is a good Javascript debugging tool?

Question

Haven't touch javascript for 3 years. Just got a javascript project and wanted to know any new ways or tools emerged these years to debug javascript? I used alert 3 years ago.

I am using IE

• Nosredna: Is there a reason you're using only one browser?
• Douwe Maan: If you're working on a JS project, I suggest you stop using IE. It's bad in so many ways. Just use Firefox / Chrome / Safari, and test in IE later.
• Ryan Lynch: If save debugging in IE until after you've written your code, you are more than likely going to waste a decent amount of time debugging and rewriting. My practice is to develop Javascript from a standpoint of continuous integration. Any time you make a major change to your code you should test it completely, so you can fix problems as they come instead of waiting for the bill.
• Nosredna: I agree. IE is a pain enough to support that you really want to know when things break in it.
• Ryan Lynch: Seriously, check out www.quirksmode.org , having a good understanding of cross browser issues saves you time debugging cross browser issues by spending less time creating them.

Answer 1

Use the Firebug extension for Firefox, or the built-in Web Inspector in any WebKit browser (Chrome or Safari). In IE8, you can use the built-in Developer ToolS.

• Douwe Maan: Firebug is Firefox-only, but I remember something called Developer Toolbar for IE. Haven't really used IE in a while, though...
• Jamie Dixon: Firebug lite is a great tool for debugging in IE.
• Matt: You can use Firebug Lite, which works in IE getfirebug.com/lite/ie.html Also, if you're using IE8 (and maybe 7), you can press F12 to get a pretty decent debugger.
• Nosredna: Firebug Lite is cool. But I don't think you can set breakpoints in it, can you?
• Douwe Maan: Fb Lite is handy too, yeah. It isn't nearly as powerful as Fb Full, though.

Answer 2

For IE (which I don't suggest using), the latest version (IE8) includes developer tools.

IE8 developer tools

For Firefox, there's an extension called Firebug that has DOM manipulation, a JS console, and more.

firebug DOM inspector firebug JS debugger

WebKit (used in Safari and Chrome) has a built-in Web Inspector that includes a JS debugger, along with a DOM outline and manipulation tools, and a JS console.

webkit DOM inspector webkit JS debugger webkit network profiler webkit resource info

• Southsouth: it is a nice tool. is it for IE?
• jtbandes: No, it's built into browsers that use the WebKit rendering engine (Safari and Chrome). I would suggest using one of those browsers or Firefox instead of IE.
• Ryan Lynch: Your code is still going to be run in IE by users, so if you haven't debugged it in IE then you haven't completely debugged your code.
• jtbandes: True, but you don't have to use IE's debugging tools if you don't need to. Often you can just make it work in IE using whatever tools you want.
• jtbandes: I'm more trying to suggest avoiding IE for daily use than for debugging purposes.

Answer 3

You really need a crossbrowser toolkit. Here's mine:

• Gecko (Firefox) : Firebug
• Opera : Dragonfly
• WebKit (Safari / Chrome) : Web Inspector
• IE : Microsoft script debugger

EDIT:

IE 8 added some developer tools, but I haven't used them to any great extent.

EDIT:

If you haven't done JS development in a while I recommend saving yourself a lot of time debugging cross browser issues by browsing the compatibility tables on Peter-Paul Koch's excellent quirksmode site.

• Nosredna: The IE8 built-in stuff is very nice. I've also used that Express Studio stuff from Microsoft. Great debugging, but it wanted me to make IE my default browser. ::shudder::
• Ryan Lynch: So you are stuck with Microsoft Script Debugger or Visual Studio if you have it. Keep in mind that your code is going to be run in various environments though, so debugging isn't as simple as checking the code in your browser of choice. Check out the link I added to quirksmode too. It will save you a lot of time in the debugger.
• Nosredna: I use IETester (mostly) to make sure my code runs on IE6, IE7, and IE8. You really should make sure to run on all of those, if you're going to support IE.
• Ryan Lynch: A quick look at browser statistics ( w3schools.com/browsers/browsers_stats.asp ) gives you a pretty good reason to make sure that your page works in IE. Just because its a PITA from a development standpoint doesn't mean you can ignore it.

Answer 4

I think a Visual Studio / IE8 combo is excellent. Beats Firebug for JavaScript debugging, IMO (and you, of course, use a framework like jQuery to handle crossbrowser issues).

Answer 5

If you need IE7 debugging, use IE8 in compatibility view with developer tools.

Answer 6

If you use Visual Studio, I highly recommend debugging with IE, despite what others say. When you hit a debugger statement in IE and you have debugging enabled, you'll get a pop-up to start debugging in Visual Studio.

I don't like Firebug anymore, I don't know where it went wrong, but it's become highly unreliable (ignoring debugger statements) and really can't compete with VS as far as debugging is concerned.

Answer 7

Dreamweaver as I write it and Firebug for more indepth debugging. alert()s are pretty useful too.

• Douwe Maan: Every use of alert() can be replaced by console.log() ;-) And Dreamweaver should be sent straight back to hell, imo.
• Ben Shelock: @DouweM: What exactly don't you like about dreamweaver? We all know that WYSIWYG editors are useless but the rest of the program is very useful. Now what else is wrong with it?
• Douwe Maan: Well, I have kinda come to hate all WYSIWYG editors... Nothing 'personal' too Dreamweaver, I just like doing everything using just text better.
• Nosredna: Doesn't console.log cause a hang in IE? :-)

Answer 8

As others have pointed out, most javascript debugging tools come as part of a browser because they are tightly integrated with the Javascript engine itself. This is probably a good thing because you will want to debug each browser separately if you run into a browser-specific quirk.

In the Internet Explorer world, you have two options:

1. As Ryan Lynch pointed out, the Microsoft Script Debugger is a separate debugging environment that talks with IE. If you have Visual Studio Web Developer Edition, the tool should already be available to you. You can attach directly to IE from within VS.
2. Recommended: Use a debugger that runs in the browser. IE8 has Developer Tools built-in (press F12) or download the Web Development Helper for earlier versions. Both provide a good light-weight environment right inside IE. They also help to debug CSS layout and other aspects of a website.

• Ryan Lynch: The IE developer toolbar is a different product than the developer tools in IE 8. The Toolbar ( bit.ly/2WXQKX ) gives you some DOM introspection, which is useful along with a script debugger, but doesn't include a script debugger.
• Anton: My apologies, you are correct. I confused the Web Developer Toolbar with [Web Development Helper][1] which does provide script debugging for earlier IE browsers. [1] projects.nikhilk.net/WebDevHelper

Answer 9

Firebug for FireFox and AJAX Dynatrace for IE http://ajax.dynatrace.com/pages/

• Nosredna: Dynatrace? That's a new one for me. Is it a debugger?

Answer 10

I realize I'm answering a question you didn't ask, but have you tried jQuery? It's a javascript library that abstracts a lot of the DOM manipulation stuff for you so you don't have to worry so much about cross-browser compatibility issues. There are other similar libraries out there, but I believe jQuery has the biggest following at the moment. http://jquery.com/

I use Firebug in Firefox every day. In addition to debugging Javascript (and by extension, jQuery or any other js library), it's a great for CSS debugging.

Answer 11

real programmers use printf() traces for debugging (kidding).

var de =true, bug =console.log||alert||(de=false)
de&&bug( "Enjoy!")

When not in debug mode, just do de=false. Minimal performance penalty

Answer 12

Aptana is a great dev platform that allows you to debug both FireFox and IE.

Answer 13

I use Javascript Debugger plugin to debug errors that are not easy to figure out in firebug. You can set up break points and step through problem area to see variable values..etc. It's a very useful tool.

Answer 14

I use firebug most of the time with the following firebug plugins.

• FireRainbow, FireRainbow enables javascript syntax highlighting for Firebug. This is really cool. Saves a lot of time.

• FirePHP,FirePHP enables you to log to your Firebug Console using a simple PHP method call.

• Widerbug , can leverage wide screens for js debugging/development. Obsolete now as it is supported in Firebug 1.9 right out of the box.

Answer 15

I argue to use build-in browser debugger for performance reason. Firefox and Chrome one are good enough.

They allow browse DOM, show dynamically generated sources, show network activity, profile JS, etc.

But don't miss printf-approach with:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

and:

console.log("%s", new Error().stack);

Answer 16

LINE BY LINE JAVASCRIPT DEBUGGING

To get following set of features try any of the below mentioned two methods.

Features:

1. Set and Pause at breakpoints.
2. Step into
3. Step out
4. Step over
5. Watch values at breakpoints pause
6. Toggle breakpoints
7. Continue from paused breakpoints
8. and many more...

Method 1:

9. Google Chrome> Inspect> Sources Tab
10. For detailed help

Method 2:

11. Mozilla Firefox> Inspect Element(Q)> Debugger Tab
12. For detailed help