Search Engine List
In the upper-right corner of the Firefox browser, is a search box most likely set to search Google. However, the icon is a drop-down list of various search engines you can quickly search from this box. If you go to Mycroft Project you can download additional search engines for that list. (You can also remove them by clicking the drop down icon and selecting 'Manage Search Engines').
Some of the search engines I find valuable as a web developer are Godaddy.com, Alexa, and some of the various forums I frequent such as Linux Questions and Ubuntu Forums. It's a nice way to be able to search your references from a single location.
DOM Inspector
The DOM Inspector allows you to view the Document Object Model structure of the page in a hierarchical tree and view information about each of the nodes. As you click a node in the DOM Inspector, the element in the page is highlighted so you can easily track down layout issues and CSS problems.
The DOM Inspector is accessed through the 'Tools' > 'DOM Inspector' menu. If you do not have this, then the DOM Inspector isn't installed by default for your version of firefox. You'll have to find the appropriate package for your distribution. In ubuntu, the package is firefox-dom-inspector and can be installed by issuing the command:
sudo aptitude install firefox-dom-inspector
Error Console
The error console allows you to view real-time javascript errors and bad CSS declarations. This is a VERY handy little feature. You can open the Error Console in Firefox by selecting the 'Tools' > 'Error Console' menu. Once opened, you'll probably want to hit 'Clear' and then refresh the page you're checking for javascript and CSS errors.
HTML Validator Plugin
The HTML Validator plugin is, in my opinion, the easiest way to keep your code valid HTML. The plugin has the option of 2 different parses. I choose the SGML parser as it gives me tighter control and an exact match to the W3C's HTML validator.
In addition to validating your code and showing you if there are errors or warnings in the icon at the lower corner of the screen, it also gives you details in the view-source screen and includes a Tidy cleanup feature to automatically clean up your code and get it validated.
Web Developer Add-on
The Web Developer add-on is another must-have for web developers. This Firefox toolbar has a whole slew of features including quick icons to the Error Console, the ability to modify and clear cookies and cache, and a ton more. Check out the website for a full list of features. This one is a life-saver.
View Source Chart
The View Source Chart add-on is great for trying to figure out problems with older or complicated messy code. You can easily find nesting errors in your HTML. It shows a graphical representation of the nesting of each of the HTML elements as boxes within boxes.
