17

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

Ryan Lynch
  • 7,548
  • 1
  • 20
  • 32
Southsouth
  • 2,481
  • 6
  • 29
  • 39
  • Is there a reason you're using only one browser? – Nosredna Nov 15 '09 at 23:30
  • 3
    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. – Douwe Maan Nov 15 '09 at 23:30
  • 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. – Ryan Lynch Nov 15 '09 at 23:49
  • I agree. IE is a pain enough to support that you really want to know when things break in it. – Nosredna Nov 16 '09 at 00:02
  • 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. – Ryan Lynch Nov 16 '09 at 00:07

16 Answers16

40

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
  • 6,770
  • 2
  • 32
  • 34
24

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

jtbandes
  • 104,858
  • 34
  • 217
  • 242
  • it is a nice tool. is it for IE? – Southsouth Nov 15 '09 at 23:26
  • 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. – jtbandes Nov 15 '09 at 23:27
  • 2
    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. – Ryan Lynch Nov 15 '09 at 23:38
  • 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 Nov 15 '09 at 23:47
  • I'm more trying to suggest avoiding IE for daily use than for debugging purposes. – jtbandes Nov 15 '09 at 23:49
15

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

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.

Ryan Lynch
  • 7,548
  • 1
  • 20
  • 32
  • 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:: – Nosredna Nov 15 '09 at 23:27
  • 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. – Ryan Lynch Nov 15 '09 at 23:33
  • 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. – Nosredna Nov 15 '09 at 23:39
  • A quick look at browser statistics ( http://www.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. – Ryan Lynch Nov 15 '09 at 23:42
2

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).

erikkallen
  • 31,744
  • 12
  • 81
  • 116
2

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

Stefan Kendall
  • 61,898
  • 63
  • 233
  • 391
2

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.

JulianR
  • 15,427
  • 3
  • 48
  • 84
1

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

Ben Shelock
  • 17,728
  • 26
  • 88
  • 122
  • 3
    Every use of `alert()` can be replaced by `console.log()` ;-) And Dreamweaver should be sent straight back to hell, imo. – Douwe Maan Nov 15 '09 at 23:14
  • @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? – Ben Shelock Nov 15 '09 at 23:15
  • Well, I have kinda come to hate all WYSIWYG editors... Nothing 'personal' too Dreamweaver, I just like doing everything using just text better. – Douwe Maan Nov 15 '09 at 23:17
  • Doesn't console.log cause a hang in IE? :-) – Nosredna Nov 16 '09 at 01:33
1

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.
Anton
  • 3,040
  • 18
  • 19
  • The IE developer toolbar is a different product than the developer tools in IE 8. The Toolbar ( http://bit.ly/2WXQKX ) gives you some DOM introspection, which is useful along with a script debugger, but doesn't include a script debugger. – Ryan Lynch Nov 15 '09 at 23:40
  • 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] http://projects.nikhilk.net/WebDevHelper/ – Anton Nov 15 '09 at 23:58
1

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

Aditya
  • 117
  • 5
1

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.

ddrace
  • 707
  • 3
  • 12
1

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

JeanHuguesRobert
  • 626
  • 4
  • 10
0

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.

user_v
  • 8,400
  • 4
  • 37
  • 32
0

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

David Robbins
  • 9,964
  • 7
  • 47
  • 81
0

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);
gavenkoa
  • 37,355
  • 13
  • 206
  • 248
0

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.

wen
  • 671
  • 1
  • 7
  • 17
0

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:

  1. Google Chrome > Inspect > Sources Tab
  2. For detailed help

Method 2:

  1. Mozilla Firefox > Inspect Element(Q) > Debugger Tab
  2. For detailed help
Vijayanand
  • 1