Efficient Web Development with Mozilla Firefox® Extensions
April 22nd, 2007 by Michael Petrov
Firefox has been known for the past few years to be the choice of browser for a large number of web developers. It is known for its superior standard compliance when rendering HTML and CSS code as well as convinient navigation of multiple pages using tabs (which were already part of Firefox/Mozilla 3 years before IE7 has integrated them). In the future we will be posting a number of Firefox techniques to make life easier for developing web applications with PHP and FileMaker - however, this article will focus on a number of useful and easy to use extensions.
Where to Get Firefox?
Just go to http://www.getfirefox.com and download a copy, it is free and cross platform - versions are available for Windows, Mac, and Linux.
Make Debugging Easier - Web Developer Extension
The Web Developer Extension offers a vast array of features to debug HTML pages as you are working on them. Below are the features I use most often:
- Outline -> Outline Block Level Elements to see issues with widths of elements visually
- CSS -> View Style Information to select elements on a the page and see the CSS rules on it (and get a quick outline of the block as well)
- Outline -> Outline Tables -> Table Cells to figure out small table sizing issues for clean borderless tables
- Tools -> Validate HTML to validate the HTML for most compatibility with many browsers and general standard compliance
- CSS -> Disable Styles -> All Styles to see how the page looks like for search engines and non-visual browsers (such as screen readers for blind users)
View What Objects Your Pages Load
View Dependencies is a small extension that adds a list of all the loaded items (and ones that failed loading). It appears as an extra tab on the page info screen (CTRL-I, or right click on page and select View Page Info). In the past we have helped a few users isolate issues with “non secure items on secure pages” which produce warnings in major browsers due to images linked using http://domain.com/image.jpg on https://domain.com/secure.htm - View Dependancies shows full paths and you can quickly see where “http://” was used instead of the safer “https://”.
Make Important Websites Stick Around
Sticky tabs allows you to keep a number of tabs always open with websites that you use throughout the day and do not want to accidentally close. My current listing of sticky tabs:
Gmail, Newshutch, Google Docs, Google Calendar.
Easy FTP within your Browser
FireFTP is an invaluable cross platform FTP client for us, allowing a very quick way to connect and upload files to any web server. It saves site authentication information within the Firefox settings, which can be helpful for synchronizing multiple computers with the same sites using one of the Firefox preference synchronizers such as app1 or app2.
Advanced JavaScript Debugging
Firebug allows setting break points, viewing JavaScript variables, and even has the View Dependencies functionality (with load times for each items). If you are starting to play with AJAX (just like this blog will in future tutorials), do not even attempt to figure out show stopping JavaScript errors without Firebug. Describing in detail the functionality of Firebug goes beyond the scope of this article and will likely warrant its own post in the future.
Want to discover more extensions?
https://addons.mozilla.org/firefox/ has a categorized directory with thousands of extensions.
Please post in the comments below about the Firefox extensions that you use to make web development fun and efficient!
Mozilla Firefox® is a registered trademark of the Mozilla Foundation