From CSS Discuss

Contents 1 All Browsers 1.1 Optool 2 Mozilla / Firefox 2.1 DOM Inspector 2.2 HTML Validator 2.3 Web Developer 2.4 Firebug 2.5 Color Zilla 2.6 IE View 2.7 Opera View 3 Internet Explorer 3.1 Web Accessibility Toolbar 3.2 IE DOM Explorer [MS] (IE Developer Toolbar) 3.3 Firefox View 4 Cross-browser 4.1 Mouseover DOM Inspector

All Browsers

Optool

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

DOM Inspector

The DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document. You can use it to examine CSS including the cascade order for any element.

Debugging CSS with the DOM Inspector (Jon Hicks)

HTML Validator

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

Web Developer

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!

Firebug

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.

Color Zilla

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

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

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).

Internet Explorer

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)

beta.

Firefox View

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).

Cross-browser

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.