Firefox, the web developer's debugging tool of choice
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 Firebug, an addon to 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.
Ads by Google
Posted by ellen at May 11, 2006 07:39 PM 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.
Internet Explorer
Since IE never works quite the same as other browsers, you will find you need to debug in that environment also. Unfortunately it is not nearly as well set up for that as Firefox. If you have Microsoft Office, pop the install discs back in the drive and install the Microsoft Script Editor (use custom install and install it individually). Then you will need to go to Tools->Internet Options...->Advanced->Disable Script Debugging (Internet Explorer) Tools->Internet Options...->Advanced->Disable Script Debugging (Other) and UNCHECK those options. When you run into a javascript error, an alert will pop up asking if you want to debug. It is much more cumbersome than Firebug and much less informative, but better than nothing! If you are running IE 7 and above, there are Developer Toolbar addons that will help you debug CSS and layout issues. Web development bookmarkletsA 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.
Desktop Applications:
Dreamweaver does a basic job of checking for errors in your HTML syntax. Use the "highlight invalid code" command under Code View options. You can also validate to various Web standards using the "check page" command in the File menu.
This is where Adobe 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.
