Some Recommended Tools
I now recommend Firebug (see below) rather than Venkman.
Tidy HTML Validator
There are several HTML validation routines around. I happen to like this one because it’s not overly pedantic about tiny details, and it gives a neat concise explanation of the reasons why it thinks your HTML is incorrect.
It comes as a Firefox extension, and puts a little green tick on the status bar when it considers your code to be valid, so you don’t have to keep remembering to send your page to an external validator whenever you change something, you just watch to see if the green tick turns into a yellow triangle or a red cross.
The Windows version is here. There are Linux, MacOSX and FreeBSD versions here.
An indispensable Firefox Extension for general web development.
Download the Firefox version here.
It’s part of the O’Reilly series of Definitive Guides, which are all excellent resources for their respective topics.
And it’s all free.
MS Visual Web Developer Express
Some people have recommended this Microsoft tool. I can’t comment since my computer falls short of the system requirements in almost every category, so I’ve not tried it.
Provides a facility within MSIE that mimics Firebug.
It’s still in beta, and performs very erratically on my machine, and interferes with the behaviour of Google Maps, but it’s an awful lot better than nothing.
Requires Microsoft Script Debugger.
I’ve not tried this out yet.
Embeds a copy of Internet Explorer inside a Mozilla/Firefox tab.
I think there are only versions for Windows.
This is a great tool for web developers, since you can develop your code in Firefox. Then, with a single click of the ieTab icon, you can see what sort of mess MSIE makes of it, and still be in a Firefox environment.
Unlike Web Developer, Firebug works on the dynamic version of the page, so, for example, you can look at the way the html elements that contain the map change as you make calls to the API.
To get the best out of Firebug, you need to install the Firefox DOM Inspector. The DOM Inspector isn’t an extension, it’s an optional component of Firefox. To install the DOM Inspector you need to re-install Firefox and choose the “Custom Setup” option instead of “Standard”.
There seem to occasionally be severe conflicts between Venkman and Firebug, when Venkman tries to handle errors that are thrown by the Firebug code. I’ve ended up uninstalling Firebug for now, because I’ve already invested a lot of time learning Venkman. If you’re starting out from scratch, I’d suggest learning Firebug rather than Venkman plus Web Developer.
View your page in Google Chrome, right-click on an element and select “Inspect Element”.
This gives you:
- A detailed view of the dynamic HTML and styles, including the details of what’s going on inside the map structure.
Useful for addressing performance issues. Provides standard performance tests for your web page.
Paste the URL of your page into pagetest.patrickmeenan.com:8080/
I recommend this rather than using the resources information from Firebug or Google Chrome because they give results that are distorted by the fact that connectivity to your own server may well be perceived as being much faster than other people will see it. The tests are performed with MSIE, which has performance issues which may need to be addressed which Firefox and Chrome don’t exhibit. You get the option to perform the tests over three different line speeds.