TheDesignspace
Debugging and troubleshooting HTML and javascript


May 11, 2006
CSS | Dreamweaver | GoLive | Javascript | Web Building

I've picked up quite a collection of debugging tools for javascript and HTML.

For pure HTML syntax checking, Dreamweaver does a basic job of checking for errors, using the "highlight invalid code" command under Code View options. You can also validate to various standards using the "check page" command in the File menu.

This is where GoLive comes in: it has a very detailed error checking utility: use the "Check Syntax" command in the Edit menu to see just about everything you could ever want to know. GoLive also has a great Javascript development environment and javascript debugging utility.I hope Adobe keeps maintaining GoLive, it has a lot of features Dreamweaver doesn't have.

The best browser to use to check javascript errors is Firefox, hands down. Other browsers have some error reporting, but none give you anywhere near the detailed information as Firefox. The extensions available allow you to snoop into every aspect of your page, and into the communication between page and server.


You will need to get several Firefox extensions:

Firebug
Firebug is the one extension I can't live without. It shows errors in javascript, css, allows you to inspect the HTML source, computed style, events, etc.

View Source Chart
Creates a Colorful Chart of a Webpage's Rendered Source Code Displays Source in its Altered State After the DOM has been Manipulated by JavaScript

JSView
Easily view the source code of external js files.

Hypertext DOM Browser
Hypertext DOM browser for Web developers and Firefox developers (and JavaScript calculator). You traverse DOM tree just like a normal Web site. It can display and set DOM properties and call DOM functions. Type "content" to show the properties of the content window, "content.document" to show properties of the HTML document in the calling window.

Savegenpage
See exactly what HTML code your javascript is generating. Incredibly useful for generated menus and the like.

Web development bookmarklets
A fantastic selection of debugging scripts that allow you to click within a page, and see various items, like all the Javascript variables and their properties available on the page, or all the classes used in the document.

Posted by ellen at May 11, 2006 07:39 PM | TrackBack

 Comments
 Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Recommended Reading