Whether you are a designer, a developer, coder or a blogger, when it comes to designing or developing for the web, you just can’t live without browser extensions. There are so many tools available – from tinkering with CSS codes, choosing color pallets, debugging HTML source, analyzing loading times; the list is endless.
While some of the above functions can be achieved using a dedicated HTML editor like Dreamweaver or Microsoft FrontPage, but why use another program when the same purpose can be achieved without spending time on learning to use a heavyweight designing tool ?
Here is a recommended list of Firefox add-ons for anyone interested in web design or development:
Firebug is by far the best add-on for debugging the HTML source of websites, changing CSS parameters and previewing the changes in real time. The extension also allows you to delete specific HTML parts from the webpage under inspection and you can preview the changes right away.
To get started, all you have to do is hit the little “Inspect” button at the far left and choose a web element from the page . The CSS property of that element will be shown on the right panel, now just modify the attributes and you can preview the output in real time.
Firebug is also available as a Google Chrome extension which can be found here.
This is again a useful add-on which adds a huge number of useful features in a sleek toolbar, as shown below
Using the toolbar, you can tweak the following aspects of any webpage:
- Cookies: From the “Cookies” dropdown you can disable external cookies or site specific sessions and test the behavior of the website.
- CSS: This is the most useful thing – handling external as well as internal CSS files with the touch of a button. Just hit the “CSS” dropdown and you can manage all external CSS files called, inline CSS elements, view Style information or add a custom stylesheet. Saves a lot of time, when you want to disable an entire stylesheet and recreate a theme from scratch.
- Images: Another very useful button on the toolbar is “Images” which allows you to disable all images on the webpage, copy all the image source paths, check for broken image links or hide specific images.
- Information: The “Information” button allows you to view the page information, display tab index, table depth, anchor information, color information and much more data about the webpage you are analyzing.
There are other useful buttons as well which includes verifying the CSS validation, checking the outline, browser compatibility – it’s all packed up in the toolbar you can’t afford to miss.
Fireshot is the best add-on for handling or manipulating images on any webpage. Apart from capturing screenshots, the add-on can perform a whole bunch of operations related with embedded images:
- Capture active region or the full page and save it in your computer.
- Capture a region or the full page and open it with your default image editing program.
- Upload a screenshot of the active region to an FTP server or send it as an email attachment.
So when you are done tweaking a webpage with Firebug or any other debugging tool, you may want to save the output as an image file or send it to someone else. In such situations, Fireshot is a really handy tool to save a screenshot or download the processed design on your computer.
To use Fireshot, simply right click on any webpage and choose Fireshot -> Action, as shown below:
If you need help in finding the hex code of specific colors on any design, use ColorZilla. Once the add-on is installed, just click the small “Eyedropper icon” at the left bottom of the Firefox status bar, as shown below:
This will open a simple crosshair which you can use to know the hex code of any color on a webpage. There are other tools as well e.g Eyedropper, Palette browser ; you can copy the hex link directly to your Windows clipboard and use it on your CSS stylesheet.
Apart from selecting colors, you can also use ColorZilla to zoom in to a portion of a webpage. This is very useful when you want to accurately determine the hex code of borders, navigationsl units and so on. Here is an example:
ColorSuckr lets you extract all the colors from any image and build a color pallet using those colors. After the add-on is installed, right click on any image to extract the hex codes of the major colors used on the image and generate a unique color pallette using the ColorSuckr website.
This is very useful when you want to design a new element in your website’s theme and looking for a matching color pallette which dwells with the current design of your website.
This is not a must have add-on but can be useful when you want to draw gridlines over a design and want to measure the position of certain elements by pixel width. Grids can be saved for future use and you can measure the width of any row or column, as seen in the following illustration:
Note: a similar add-on - Measure it solves the same purpose, but comes with an additional pixel ruler which can be used to measure the width or height of a web element.
Another useful add-on down the list is FireFTP which allows you to manage FTP accounts and transfer files to your website directly from the browser. You can add multiple websites in FireFTP and upload files from your computer to any of your website’s directory.
This is highly recommended because when you are designing something, you need less number of open applications to work with. Works much the same way as other FTP programs like Filezilla and you can also import/export FTP settings on other computers.
Which Firefox extensions do you use or recommend? Please share your views in the comments.