Browser Add Ons
From CSS Discuss
Using any browser, press (Shift-Ctrl-A) and Optool will give you the choice of opening the current page in any of the browsers installed on your windows system, whether they are running or not, including multiple IE. Makes checking HTML/CSS on different browsers a snap and doesn't disrupt your workflow. It also has many more features related to browsing rather than web development. Highly recommended.
Mozilla / Firefox
Based on Tidy, HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page. Classifies errors in 3 categories:
- errors: HTML errors that Tidy cannot fix or understand.
- warnings: HTML errors that Tidy can fix automatically
- (optional) accessibility warnings: HTML warnings for the 3 priority levels defined in W3c WAI
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. Current tools include converting form POSTs to GETs, hiding images, outlining block level elements, disabling styles, measuring with rulers, and many more. Priceless!
The Firebug extension adds a console with many features. You can edit CSS and HTML, see rulers and highlighting for selected elements, and get an interactive box model diagram for any element on a page.
With the Color Zilla extension you can get a color reading from any point in your browser (Eyedropper) and paste it into your CSS, or program of choice. A built-in palette browser (Color Picker) allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. Another great feature is DOM spying: outlines a hovered element in the browser and displays its DOM hierarchy in the status bar. It is fully customizable and has several other features such as zoom, etc.
IE View is a simple extension (for Microsoft Windows systems), which allows the current page or a selected link to be opened in Internet Explorer (instead of Firefox).
Opera View is another simple extension (for Microsoft Windows systems), which allows the current page or a selected link to be opened in Opera (instead of Firefox).
Web Accessibility Toolbar
Don't let the "accessibility" in the name fool you. This toolbar gives you easy access to an impressive collection of tools. Just to mention a few: HTML and CSS validation, modify CSS rules "live", see what rules are applied to the element under your mouse, disable CSS, see element properties and list used colors.
IE DOM Explorer [MS] (IE Developer Toolbar)
Firefox View is a simple (Firefox/Mozilla) extension which allows the current page or a selected link to be opened in Firefox (instead of IE).
Mouseover DOM Inspector
The Mouseover DOM Inspector, or MODI for short, is a Favelet (aka Bookmarklet) that allows you to view and manipulate the DOM of a web page simply by mousing around the document.