CODEWITHSUNDEEP
javascriptdebugging
Southsouth
Southsouth

Reputation: 2695

What is a good Javascript debugging tool?

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

Upvotes: 17

Views: 21594

Answers (16)

jtbandes
jtbandes

Reputation: 118651

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

Upvotes: 24

Vijayanand
Vijayanand

Reputation: 1

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

Upvotes: 0

gavenkoa
gavenkoa

Reputation: 48713

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

Upvotes: 0

user_v
user_v

Reputation: 10114

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.

Upvotes: 0

JeanHuguesRobert
JeanHuguesRobert

Reputation: 736

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

Upvotes: 1

wen
wen

Reputation: 691

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.

Upvotes: 0

JulianR
JulianR

Reputation: 16513

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.

Upvotes: 2

Stefan Kendall
Stefan Kendall

Reputation: 67802

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

Upvotes: 2

David Robbins
David Robbins

Reputation: 10046

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

Upvotes: 0

ddrace
ddrace

Reputation: 717

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.

Upvotes: 1

Aditya
Aditya

Reputation: 117

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

Upvotes: 1

Douwe Maan
Douwe Maan

Reputation: 6878

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.

Upvotes: 40

Anton
Anton

Reputation: 3220

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.

Upvotes: 1

Ryan Lynch
Ryan Lynch

Reputation: 7776

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.

Upvotes: 15

erikkallen
erikkallen

Reputation: 34391

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

Upvotes: 2

Ben Shelock
Ben Shelock

Reputation: 20965

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

Upvotes: 1

Related Questions