Web Developer Toolbars and the JavaScript Console
During my recent talks on Ajax in ASP.NET applications, the concern over the movement of code from the server to the client is considerable as developers consider Ajax.
The point I try to make is to keep as much of your logic server-side until you really need to move it to the client. This might mean you fire more requests to the server, but you can change this design decision if you application warrants the ajustment for performance or scalability reasons.
The fact is if you use Ajax methods in your application you will have more JavaScript code no matter how much logic you keep on the server. JavaScript is notoriously difficult to debug and lacks outstanding IDE support like we find for our server-side contemporaries.
There are, however, some tools (or toolbars, rather) that no self-respecting web developer should find themselves without.
For Internet Explorer there is the web developer toolbar. This handy tool will help you parse the DOM, outline HTML elements, provide image reports and more.
Chris Pederick offers the FireFox/Flock/Mozilla web developer toolbar which is feature-rich in its own right. With this little helper on your side you can turn on and off style sheets, run validations and produce markup outlines beyond what the IE counterpart is capable of rendering.
While these tools might be nifty, the best tool is the JavaScript Console baked right in to the FireFox/Mozilla family of browsers for years now. When IE returns a JavaScript error you are never sure if its even reporting the right line number. With the JavaScript Console, you can see the exact character where your script failed.