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
+32
A:
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
2009-11-15 23:10:55
Does Firebug work for IE?
Southsouth
2009-11-15 23:20:30
Firebug is Firefox-only, but I remember something called Developer Toolbar for IE. Haven't really used IE in a while, though...
Douwe Maan
2009-11-15 23:21:50
Firebug lite is a great tool for debugging in IE.
Jamie Dixon
2009-11-15 23:23:32
You can use Firebug Lite, which works in IE http://getfirebug.com/lite/ie.html Also, if you're using IE8 (and maybe 7), you can press F12 to get a pretty decent debugger.
Matt
2009-11-15 23:23:35
Firebug Lite is cool. But I don't think you can set breakpoints in it, can you?
Nosredna
2009-11-15 23:26:19
Fb Lite is handy too, yeah. It isn't nearly as powerful as Fb Full, though.
Douwe Maan
2009-11-15 23:28:15
FireBug Lite can react very badly if your website is not well structured. It can popup not below the website, like in the middle :P for IE use the IE8 Dev Tool.
Daok
2009-11-16 16:16:47
+1
A:
Dreamweaver as I write it and Firebug for more indepth debugging. alert()s are pretty useful too.
Ben Shelock
2009-11-15 23:11:34
Every use of `alert()` can be replaced by `console.log()` ;-)And Dreamweaver should be sent straight back to hell, imo.
Douwe Maan
2009-11-15 23:14:12
@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
2009-11-15 23:15:26
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
2009-11-15 23:17:06
+20
A:
For IE (which I don't suggest using), the latest version (IE8) includes developer tools.
For Firefox, there's an extension called Firebug that has DOM manipulation, a JS console, and more.
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.
jtbandes
2009-11-15 23:13: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
2009-11-15 23:27:27
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
2009-11-15 23:38:00
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
2009-11-15 23:47:32
I'm more trying to suggest avoiding IE for daily use than for debugging purposes.
jtbandes
2009-11-15 23:49:44
+10
A:
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.
Ryan Lynch
2009-11-15 23:14:28
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
2009-11-15 23:27:44
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
2009-11-15 23:33:22
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
2009-11-15 23:39:35
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
2009-11-15 23:42:41
+2
A:
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
2009-11-15 23:23:36
+1
A:
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:
- 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.
- 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.
antonm
2009-11-15 23:26:54
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
2009-11-15 23:40:16
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/
antonm
2009-11-15 23:58:17
+1
A:
Firebug for FireFox and AJAX Dynatrace for IE http://ajax.dynatrace.com/pages/
Aditya
2009-11-16 01:13:24
+1
A:
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
2009-11-16 01:27:23
A:
Aptana is a great dev platform that allows you to debug both FireFox and IE.
David Robbins
2009-11-16 01:34:05
+2
A:
If you need IE7 debugging, use IE8 in compatibility view with developer tools.
Stefan Kendall
2009-11-16 01:36:02
+1
A:
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
2009-11-16 01:52:34
A:
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.
logoin
2010-06-16 17:25:25
A:
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
2010-09-17 22:45:16