Top 5 Firefox Extensions for Webmasters

This extension by Chris Pederick will easily put Firefox into overdrive by endowing it with a dashboard of over 50 options providing all kinds of highly useful information and various handy tools for analyzing web pages. This is immensely useful for webmasters who are in the midst of designing, redesigning or debugging their web pages.

Features include visually outlining any HTML element, editing CSS files with real-time preview results, disabling Javascript, hiding images, finding images with no alt attributes, validating source code, displaying a virtual ruler you can use to measure web page elements and much, much more.

This extension is an absolute MUST-HAVE and is the first one I run to install after updating Firefox. The creator of this extension is also very conscientious about keeping it compatible with the latest release of Firefox so you never have to wait for this baby to 'catch up'.

 

NOTES:

• To put a Web Developer button in the Firefox Navigation toolbar to allow you to easily toggle it on and off:
  
  
  1. Right-click on the Navigation toolbar and then click on Customize.
  2. Drag and drop the 'Web Developer' button to the Navigation toolbar.
• You can also toggle the Web Developer toolbar on and off by clicking View » Toolbars » Web Developer Toolbar.
• Most of the functions are pretty straightforward and self-explanatory. In fact, it is way beyond the scope of this web page to describe them all in detail. Just check them out and see what happens. :)

Here's another absolute must-have web page inspector which —with all due respect— isn't quite as intuitive or easy to use as Web Developer but I've personally found it indispensable for debugging Javascripts. This extension will help you quickly and easily zero in on Javascript errors and will tell you exactly what went wrong (as opposed to the vague, snippy Javascript error messages issued by Internet Explorer, e.g., 'Object expected'). Quite frankly, I don't know what I'd do without this extension (probably spend a lot of time weeping over my keyboard).

NOTES:

• After installation, Firebug will display as a little gray bug icon in the top right corner of Firefox. To enable Javascript debugging, simply go to the website you wish to enable debugging on and then click on the gray Firebug which will open the Firebug console. (Click again to close the console.) The icon will turn orange indicating that Firebug is active for this site. To make sure you have Javascript debugging enabled, you can click on the dropdown arrow beside 'Console' and then click to check Show Javascript Errors. The console can then be minimized by clicking on the red Minimize Firebug button at the far right of the Console toolbar.
• With Javascript debugging enabled (see above), Firebug will notify you when the current page contains Javascript errors by displaying a red circled 'X' in the bottom right corner of Firefox followed by the number of errors. To view the error messages, click on the number of errors notification to open the Firebug console. The error messages will be listed in the console along with which web document contains the errors, which lines of code in that document are producing the errors and the respective line numbers.

When you signup with a web host, you'll typically be given access to a 'control panel' which usually contains a somewhat clunky user interface called File Manager which you can use to upload files to your website online. However, a much preferred method of uploading files to your website is to use an FTP program which is a software that specializes in managing processes in the File Transfer Protocol (or in layman's terms, specializes in uploading/downloading files on the internet).

FireFTP is an excellent free FTP program that installs easily as a Firefox extension. After installing you can start it up by clicking on Tools » Web Developer » FireFTP which will then present you with a fully functional and fully featured FTP program running right in your web browser.

Among other standard FTP program features, FireFTP allows you to create and save multiple FTP accounts for your various websites, establish default startup directories and, best of all, has a fantastic 'Keep directories in sync while navigating' feature that allows you to synchronize the display of your online website directories with the offine version of your website stored on your hard drive (or vice-versa). This means that in the FireFTP user interface, whenever you change directories in the offline panel (left), the online panel (right) will automatically change to the same directory. I love this feature as it eliminates the possibility of uploading web pages to the wrong directory. (By the way, you do have an offline version of your website stored on your hard drive, right?)

NOTES:

• How to Create an an FTP Account — After installing and starting up FireFTP, you'll have to create an FTP account in the FireFTP program in order to access your web page files online. (This assumes that you already have a webhosting account.) To create an FTP account in FireFTP, you'll need three pieces of information:
  
  
  1. Your username
  2. Your password
  3. Your hostname (This could be either an IP address that looks something like this: 12.456.89.00 or a readable hostname that looks something like servername.hostname.com)
  
  Your web host should immediately provide you with all these essential details when you sign up. Now with this information in hand, follow these steps to create an account in FireFTP:
  
  
  1. Click on the dropdown menu in the top left of FireFTP and select Create an account...
  2. In the Account Name box, type in whatever name you wish to call this account (the name of your website, for example).
  3. In the Host box, type in the hostname provided to you by your web host (see above).
  4. In the Login box, type in your username provided to you by your web host.
  5. In the Password box, type in the password provided to you by your web host.
  6. Click OK to apply the settings and create your account.
  
  With an FTP account created, just click on the Connect button to access a directory listing of your web page files online which will appear on the right side of the FireFTP interface. You can then use the panel on the left side to navigate to your web page files offline. Select a file by clicking on it and then click on the 'Upload' arrow between the two panels to upload the file to your website.
  
  
  

• How to copy a color from a web page — After installing, you'll see a little rainbow icon at the top right of Firefox. Clicking on this icon will display a color picker square and a pointer which you can move around anywhere on the current web page to display the color directly below the cursor. When you find the color you want, left-click to copy the hexadecimal color code of your selected color to the Windows clipboard. Then just return to your web editor and paste the color code in.
• How to analyze a web page's color scheme — Click on the dropdown menu beside the rainbow icon in the top right and click on Website Analyzer.

• After installing, a little plume icon will appear in the top right of the Firefox browser next to the address bar. To take a screenshot, click on this icon and then click-and-drag anywhere on your computer screen to draw a resizable area to create a screenshot from. Afterward, a toolbar will appear below your screenshot giving you various options of what to do with it, e.g., copy to clipboard, edit online, print, save, etc.