Slashdot Mirror
Seeking Good DHTML Debuggers?
christodd queries: "After years of programming in PHP and C++, I've finally delved into the world of Javascript and DHTML. The biggest hurdle I have come up against is the various web browser DOMs. I find that I spend much time googling for variable names, and guessing which variables do what. My favorite tool is a good debugger, and this is where I'm having problems. There is a commercial product by Netscript due out this quarter for $190.00, and there is a very young open source project at BiteSizeInc, but I have yet to find anything production quality. How does everyone else debug browser DOM issues?"
Mozilla and Firebird come whith a Javascript debugger, and it works.
I'm from Argentina: Tango, Asado, Mate, Gaucho, Maradona, YPF
The Mozilla Document Object Model Inspector is very useful. It comes with Mozilla and Firebird.
http://www.mozilla.org/projects/inspector/
In addition to the Venkman JS debugger mentioned in a previous comment, Mozilla and Mozilla Firebird also include an excellent DOM inspector - very handy for page tweaking, "DHTML" or not.
... there still is hope. Venkman won't run in IE, but you can get something like Venkman:
To debug Javascript in Internet Explorer with more than just a few alert() statements, you need to install the MS Script debugger. It has two versions, one for NT/2000/XP and one for 9x/ME. There is even a KB entry describing how to find the Debugger in the jungle of microsoft.com: KBID 268445.
Just my 2 cents.
Tux2000
Denken hilft.
No, no, NO!
First of all, do not use JavaScript for image rollovers. It's a terrible idea and the person who thought of using JavaScript for image rollovers should be shot. You never put images in webpages where the image is not the content. That's presentational HTML. Instead, follow this example which uses pure CSS. The basic idea is that you use the :hover pseudo-class to change the background property of a hyperlink. That background image can contain all states or it can be separate files. Wrap the inner text with a span tag and specify that span tags within the scope of your anchor tag get a display: none propety. Its so simple, it works without JavaScript, loads faster, cross-browser compatible, and if the user is running a non-graphical browser, it's still accessible. Here's a quick example (where somepic.png contains both roll over states, one at (0, 0) and the other at (0, 20):
Then in your markup, you put this:
Next, you should never rely on JavaScript to do your form validation. That's the most stupid, absurd thing I've ever heard. Leaving input validation in the hands of the client is to trust the user to not attempt to screw up your input. For forms to the useful, they have to be submitted to some kind of server-side logic. That is where the form validation should take place because then the user cannot side-step your input validation.
Yikes. With people like you building websites, no wonder the Web is such a disaster today. Please change professions ASAP or read Designing With Web Standards
Join Tor today!
Since you didn't mention it, everyone should at least let you know it exists: MS Visual Interdev has a script debugger.
It isn't a magically good debugger (like some MS debuggers really are) but it works OK. It also benefits from integration with IE (ie, when Explorer encounters a script error, it can sometimes jump right to the debugger).
It also does the IntelliSense thing (to an extent) allowing you to reference styles and objects without remembering their (often silly) names.
Let's not stir that bag of worms...
If you start throwing out examples, it would be nice to check that those work. You've a mistake there as "width:100;" or "height:20;" mean nothing. You have to define the unit unless the value you're trying to set is zero. Yep, they work in MSIE, but when did that browser knew anything about the standards? The correct format is width: 100px and height: 20px .
After saying that, yes, for simple roll-overs and cascading menus, the CSS is much better choice than javascript. Javascript should be used when the functionality required is much more complex.
_________________________
Spelling and grammar mistakes left as an exercise for the reader.
I've spent several years writing various bits of functionality in JavaScript for clients. It is the worst platform to code for I've seen in some time.
I've tried some of the debuggers, and found them to not be very useful at all.
Sadly, you can't beat 'doing it the old way' using either alerts (useful as they're blocking) or setting up a debug layer (div) to output your debug content to.
It sounds more like you're looking for a reference than anything else. I'd highly recommend the DHTML Definitive Reference. It covers everything, along with good structural tips, like creating a platform independent DHTML API.
For those of you that suggested just using XHTML and CSS.. that tends not to be an option in the real world. You would be amazed at how many Companies use version 4 browsers. And anything on the Mac is just a nightmare.
Hope this helps.
I would recommend diving into the world of Mozilla. They offer a couple of awesome tools for Javascript and DOM debugging. Check out the following: Venkman Javascript Debugger DOM Inspector Mozilla Firebird Specifically with Firebird, after you have it installed, go check out some of the available extensions at texurizer.net/firebird/extensions and download some of the cool extensions like the 'Web Developers Toolbar'. These pieces of software have proved invaluable to my productivity! I have used them to debug javascript, XUL and everything in between. Good luck!
One of the things that saved my sanity when doing a DHTML UI was creating a log window that I could write messages, the contents of JS variables, DOM objects, etc. to. It isn't as good as a real debugger, but it helped out quite a bit. I created a JS class that supported two methods:
// etc
log = new Log();
log.log("blah");
log.dump(someObject);
The first method just prints out the specified message, the second recursively prints all of the attributes an object, since in JS they are really just hashes that you can traverse automatically with a for in in x loop. At least in IE, this let me inspect form elements, etc. as if they were native JS things. The log class could technically be a singleton, but since each instance writes to the same window, it really doesn't matter. I just instantiate a new Log object at the top of each document, and can then enable/disable it at will by typing a javascript:log.enable() command in the address bar.
function Log() {
}
Log.prototype.enabled = false;
Log.prototype.enable = function() {
this.enabled = true;
this.logWindow = window.open("", "Log", "width=80,height=25,resizable,scrollbars=yes");
this.logWindow.document.open("text/plain");
this.logWindow.blur();
}
Log.prototype.disable = function() {
this.enabled = false;
this.logWindow.close();
}
Log.prototype.log = function(msg) {
if (this.enabled) {
this.logWindow.document.writeln(msg);
}
}
Log.prototype.dump = function() {
if (this.enabled) {
}
}
This is detailed in the O'Reilly Rhino Javascript book, which is an excellent resource for JS programming and DHTML.