As a constant fiddler of web layouts, I try my best to create a consistent workspace from which to test and retest pages. Being limited to Windows, my main concern is cross browser compatibility and consistency in Firefox, Internet Explorer, and Opera.
Firefox users are undoubtedly aware of the robust Web Developer Toolbar extension. The extension is one that I use on a daily basis. From the live CSS / HTML editor to the DOM Inspector, WebDev has helped me creating consistent layouts in Firefox, IE, and Opera.
Wishing for some consistency as far as inline web development tools, I stumbled upon the following geared towards Internet Explorer and Opera:
Web Developer Toolbar & Menu [for Opera] & Internet Explorer Developer Toolbar. Both toolbars offer development tools including a W3C validation, DOM inspector, outlining of specific elements, and CSS manipulation to name a few features. One noticeable feature found in the IE toolbar which is missing from the Firefox counterpart is the ability to measure elements.
Fortunately, Firefox users are privy to a slew of additional tools [in the form of browser extensions] to add to their arsenal. I’ve listed extensions which I believe to be beneficial for any web developer; extensions which I utilize on a daily basis for design and general browsing:
- Firefox’s built in DOM Inspector - Upon installing Firefox there is an additional option to include the Developer Tools.
- Aardvark - Highlights HTML and CSS elements on hover with a red outline box. Recommended tip: Rather than peeking at the entire source for a page, use this extension to highlight specific elements or parent elements then view source.
- Colorzilla - Adds a color eye dropper to your status bar for quick color sampling.
- MeasureIt - Adds a ruler to your browser window for precise pixel measurements.
- Web Developer Toolbar - More tools than the average web developer can shake a leg at.
- LinkChecker - Validate links throughout your page.
Is there anything else worth implementing into the work flow?
robbie
May 11th, 2006
Quote
Isn’t the Aardvark extension about the same as the ‘display element information’ in the ‘Web developer toolbar’?
Thanks for the Opera and IE toolbar links been looking for those!
Derek
May 11th, 2006
Quote
[quote comment="1403"]Isn’t the Aardvark extension about the same as the ‘display element information’ in the ‘Web developer toolbar’?[/quote]
Almost. The Aardvark extension expands on the feature by allowing users to click ‘V’ to view the source code for that specific element.
dani
Apr 28th, 2008
Quote
old post..
colour contrast analyser for fx