Resources for Web Development Students @ Robin’s Blog

Firefox is an excellent browser for surfing web sites and testing web pages. If you have not used Firefox you can learn more about it in the tutorial Using Firefox.

One of the great things about Firefox is the ability to customize and extend the browser to suit your needs with extensions.

Extensions are small add-ons that add new functionality to Firefox. They can add anything from a toolbar button to a completely new feature. They allow the browser to be customized to fit the personal needs of each user if they need additional features, while keeping Firefox small to download. source: Mozilla Update Page

Extensions are easy to install. I have created a Flash demo for installing Firefox Extensions (Flash SWF 1,701kb). I would recommend viewing this tutorial in full screen mode by pressing F11.

There are numerous free Firefox extensions designed specifically for web developers. There are extensions validate HTML, XHTML, CSS, and accessibility, to troubleshoot CSS, to measure elements on a page, and to determine colors on a page. Here are a some of my favorites:

1. Web Developer Toolbar – The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. Click View > Toolbars to turn on and off the web developer toolbar.
2. Aardvark – Start Aardvark by right-clicking on the page and choosing “Start Aardvark” from the menu. The extension will run until you leave, refresh, or stop it by pressing “Q” for quit. As you move the mouse over the page, you will see a red rectangle framing each element under the cursor. You will also see a little yellow caption showing the HTML element type and its class or id if they exist. This is a very helpful extension when you’re designing a page with CSS.
3. Firebug – Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. To access this extension click View > Firebug or press F12.
4. HTML Validator – 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 by clicking View > Page Source.
5. X-Ray - Lets you see HTML/XHTML tags on a page without viewing the source code. Once installed, right-click the page and select X-Ray, all tags on the page will be displayed on the web page you are viewing.
6. MeasureIt – Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
7. DevBoi – a handy HTML/XHTML, CSS, JavaScript, and DOM reference. This is very useful when you’re learning HTML/XHTML and CSS. There is even an additional PHP reference. If you find yourself having to lookup CSS properties and XHTML elements and tags frequently you should get this extension. Click View > Sidebar > DevBoi to access the reference.
8. ColorZilla – With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. Colorzilla will appear at the bottom of the browser window in the status bar area.
9. Extended Statusbar – A Statusbar with Speed, Percentage, Time and loaded size. The extended status bar will appear at the bottom of the browser window in the status bar area.
10. LinkChecker – Check webpage links at a glance with simple color coding. Click Tools > Check Page Links to run the extension.
11. FireFTP – FireFTP is a free, secure, cross-platform FTP client. Click Tools > FireFTP to access the extension.
12. Xinha Here – A cool extension for adding a WYSIWYG HTML editor interface to any textarea box on a web page form. Install the extension and restart Firefox. Right-click the textarea box you want to add HTML code to and select Xinha here! from the menu. A new window will open with a WYSIWYG HTML editor that allows you to format your message with HTML code.
13. IE Tab – Right click a link and select View this Page in IE Tab.
14. OperaView Adds View This Page in Opera to the page context menu and item Open Link Target in Opera to the link context menu. So if you would like to quick view page in Opera, just right click somewhere on the page and choose new menu item.
15. Clear Cache Button – Adds a clear cache toolbar button. After installing the extension, find the clear cache button in the toolbar customization panel by right clicking one of the existing toolbars and selecting customize.
16. MR Tech Local Install – The primary goal of this extension is to provide the tools needed to install and manage extensions and themes locally. This isn’t really a web developer tool, but it’s so handy. I found this especially useful for managing extensions. The nicest features for me is the ability to make older extensions compatible with newer versions of Firefox and the ability to install extensions that aren’t compatible with your current version of Firefox. You may need to install this extension if you have compatibility issues or errors installing any of the extensions mentioned above.

These extensions are already installed on the classroom computers. You may not want to install all of these extensions at home, but I would highly recommend that you install the top seven. The web developer toolbar and Aardvark are essential and the other five extensions are extremely useful.

firefox, extensions, browser, tutorial, install, web, developer, design