25 Comments
- biffjo, on 10/12/2007, -0/+12Firefox has a nice little Javascript console. Most bugs can be squashed there.
- soogy, on 10/12/2007, -0/+4I'm no Firefox zealot, but their JavaScript console is AMAZING. It (usually) helps find any errors in JS code, so you don't have to run around the code manually to find a ghost. I don't think you ever need anything more than the FF console. If you do, you need to learn more JavaScript.
Of course, it's best when combined with the developer toolbar. - jiminoc, on 10/12/2007, -0/+4the only real way to "Debug" javascript is with Venkman on firefox or Visual Studilo when working with IE. Without these tools you're still just using glorified alert statements.
- seanmc303, on 10/12/2007, -0/+3That's nice, but there is no better JavaScript debugger than the Venkman debugger for Firefox.
http://www.mozilla.org/projects/venkman/ - NewNole2001, on 10/12/2007, -0/+3turn on script debugging in IE, and the VS.NET debugger should be used automatically
- jinexile, on 10/12/2007, -0/+2The Console2 extension makes the JS Console much more powerful than the default one. The only time you can get stuck with buggy JS and it doesn't report anything is when you mistype a variable, Firefox won't report a problem (technically there isn't one as far as it is concerned,) and nothing happens, makes it a little hard to track down the issue if you don't know what's happening.
- bpapa, on 10/12/2007, -0/+2I'm interested to see what he says about Venkman. It's a great tool but I Don't think it works forme more then say 75% of the time.
- Kitsune818, on 10/12/2007, -0/+1Heh, forgot a ";"... guess it's harder than I thought :-)
- MrMuskrat, on 10/12/2007, -1/+2FireBug is pretty nice too and getting better all the time.
http://www.joehewitt.com/software/firebug/ - tablatronix, on 10/12/2007, -0/+1what i want to know is how do you debug document.write ? write it to a textfield ?
- cakefart, on 10/12/2007, -0/+1The article mentions that the Mozilla debugger will be covered in the next installment of the series:
"Next time, we'll look at using at using Venkman, a heavy-duty JavaScript debugger."
(Which does kick tail, but as others have mentioned, the M$ debugger is excellent as well.) - bede, on 10/12/2007, -0/+1I use the Venkman Javascript Debugger extention in Firefox for heavyweight debugging, but mostly find that the console is enough to find out what's going on. I also sometimes debug (other people's) CSS in the JS console.
- mephitix, on 10/12/2007, -0/+1Venkman is alright... I use it, but it's definitely got some bugs of its own..heh. I don't like being not able to close it after you open it. Hopefully they'll fix that.
- echobucket, on 10/12/2007, -0/+1Javascript debugging isn't complete on Firefox without Firebug. http://www.joehewitt.com/software/firebug/
The XMLHttpRequest viewing is worth it's weight in gold.
Also, for IE debugging, the Microsoft Script Debugger is a must have:
http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en - arizonagroove, on 10/12/2007, -0/+1I often find it helpful to have the value of a variable displayed on the page I'm working on especially if the value of tthe variable is being altered by a function. I wrote this function to help me:
function debug(s) {
if (!document.getElementById('debug')) {
var d=document.createElement("div");d.id="debug";d.style.position="absolute";d.style.top="0px";d.style.left="0px";d.style.color="red";d.style.background="grey";d.style.Zindex="999";
document.getElementsByTagName("body")[0].appendChild(d);
}
if (!s) s="yo";
document.getElementById("debug").innerHTML+=s+"";
}
chuck that in your code and use with
debug(variablename)
If you're using protoype you can make a cleaner version of that function. - Kitsune818, on 10/12/2007, -0/+1"There is one particular problem with using alert() for debugging purposes, and that is that you get one alert box per message. If you use it in a loop, you'll have to hit the Return key repeatedly to dismiss the messages, and it can get to the point where you have to force quit your browser because it's taking too long to get through all the alert boxes. "
Ummm...
var foo="First part/n"
while(!end) {
foo+="Other parts that need to be done once per loop/n";
}
foo+="Last parts that might need calculation post loop";
alert(foo);
Is that really so hard? - CoolHanLuke, on 10/12/2007, -1/+1I may be a noob programmer, but Visual Studio / Visual Basic for Applications, has a remarkable debugger. Break-points, watches, intellisense, and pre-compile syntax checks make coding in VB a breeze. If there is a similar editor for Java / Javascript, let me know!
Ok. VB programming jokes commence... now. - ghinch, on 10/12/2007, -2/+2web monkey?!? you still exist? *head explodes*
in all seriousness, this is a good article for people new to javascript, any veteran knows how challenging writing code that works in it is. - natehop, on 10/12/2007, -0/+0The problem here is that there aren't really any good cross browser JavaScript tools. I mean the execution path may be different in IE than FF. For example, handling of timeouts and intervals amidst other function calls. What we need are good tools that allow us to quickly and easily see the differences in browser execution of the same code.
One tool that I use daily for this is jsTracer. http://jstracer.sourceforge.net/
jsTracer is a simple to use cross browser JavaScript tracing and logging tool. One very nice feature is that you can collect stack information on the functions you are tracing which helps to narrow down the potential problem spots, allowing you to focus your tracing and debugging efforts where you need it.
Of course I'm biased because I wrote the tool, primarily out of frustration that there wasn't something already available for me to use that met my needs. - willcode4beer, on 10/12/2007, -0/+0Looks like someone beat me to an even better (read simpler) solution.
function setCssClass(node,className){
node.setAttribute("class",className,0);
node.setAttribute("className",className,0);
} - jull1234, on 10/12/2007, -1/+1This article is crap. Its like explaining the printf function as "basic debugging in C" I was hoping for something a bit more useful.
- willcode4beer, on 10/12/2007, -0/+0Kind of unrelated to debugging but, his method for setting the class attribute on new nodes was a bit overkill. Instead of the loop he could have just done:
function setAttribute(node,name,value){
var att = node.getAttributeNode(name);
if(att){
att.value = value;
}else{
node.setAttribute(name,value);
}
}
just my $0.02 - probablycorey, on 10/12/2007, -0/+0Lumberjack http://gleepglop.com/javascripts/logger/ is so much better than the logger they mention in the article. Since the hardest bugs to find/fix occur on IE FireBug doesn't cut it, but Lumberjack works on IE and firefox.
- BrainiakZ, on 10/12/2007, -4/+1I'll give it a digg just because I read it, but it really did not give me any good information. There are some good pointers for newbie’s, but overall anyone that develops in JavaScript already knows all those things.
- bubbles2112, on 10/12/2007, -8/+0that's a good article right there.


What is Digg?
Browsing Digg on your phone just got easier with our enhancements to the