Digg

Discover the best of the web!
Learn more about Digg by taking the tour.

Simple JavaScript Debugging

webmonkey.com — Writers edit, architects redraw, and programmers debug. Development environments are usually nice enough to give programmers a bunch of tools to help determine where their program's going wrong. But with JavaScript, your development environment is a web browser, and things aren't quite so hospitable.

Bury

wayjer 2 years 75 days ago, made popular 2 years 74 days ago

536 diggs
digg it

bubbles2112, on 10/12/2007, -8/+0that's a good article right there.
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.
- 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.
- 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.)
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.
- 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.
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.
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.
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/
- MrMuskrat, on 10/12/2007, -1/+2FireBug is pretty nice too and getting better all the time.
  
  http://www.joehewitt.com/software/firebug/
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.
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.
- NewNole2001, on 10/12/2007, -0/+3turn on script debugging in IE, and the VS.NET debugger should be used automatically
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?
- Kitsune818, on 10/12/2007, -0/+1Heh, forgot a ";"... guess it's harder than I thought :-)
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.
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.
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
tablatronix, on 10/12/2007, -0/+1what i want to know is how do you debug document.write ? write it to a textfield ?
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.
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
- 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);
  }
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.
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.
Login or register to add a comment

Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.

Simple JavaScript Debugging

Login or register to add a comment