Firefox Extensions Mike Takahashi Office of Instructional Development

Firefox Extensions If you’re using IE…have you used Firefox? As a web designer/developer, Firefox extensions will make your life a lot easier There are hundreds of great extensions you can get all for FREE! Which extensions should I get?

Web Developer Extension A must have for all web designers/developers. Allows real-time editing of CSS. You make a change to the CSS, it updates the page. Now reloading or saving. Validation Tools Cookie Management, etc.

View Formatted Source “View formatted source gives you a well-rendered view of the page's source. More important, when you hover over an opening tag, it shows you the CSS that gets used for that tag. And with multiple css files it shows them in the order in which they're used.” Note: On a PC, you must have Firefox’s web developer tools installed for this to work correctly. Without this, you will get a message saying you must install the DOM Inspector. Download the latest version of Firefox and install. When prompted, select “Custom Install” and then select “Web Developer Tools”.

View Source Chart “Creates a Colorful Chart of a Webpage's Rendered Source Code” Like View Formatted Source, except you don’t get the CSS feedback.

X-Ray “When applied to a page it can help you see how the document was constructed without having to go back and forth between the source code and the page in your browser. Is that list made of li, dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what's beneath the surface of the page.”

ColorZilla An eyedropper tool for color selection and testing. Similar to Mac’s DigitalColor Meter (located in Applications > Utilities)

Firebug FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including an error console, command line, and a variety of fun inspectors. Safari has a similar tool called Web Inspector

Web Inspector - WebKit for Mac Not for Firefox, but worth mentioning! A tool for web developers to view DOM and CSS elements/attributes on a web page. Right-click anywhere on the page and select “Inspect Element”

IE Tab Embedding Internet Explorer in tabs of Firefox.

Stand Alone Browsers Testing with IE 5.1, 5.5 etc. Allows for separate installs of various versions of IE on the same machine