25 Useful Firefox Add-ons for Web-developers and designers - Knowledge | RwebGroup


Firefox is a popular web browser from Mozilla. Popularity of Firefox is not only because it’s a good web browser, it also supports add-ons to enhance the functionality. Mozilla has a website add-on section that has thousands of useful add-ons in different categories. Some of these add-ons are useful for web designers and web developers.

In this brief post, I'm listing a few popular and interesting Firefox add-ons that are useful for web designers and web developers.

Firebug

  • Firebug will enable you to play around with the HTML and CSS elements of the pages in real-time. You will get a JavaScript debugging tool implemented in your browser, that will blow the socks off from anything else that’s out there. Get analysis of specific parts of a site, or grab some additional Firebug plugins to extend the functionality.

Web Developer

  • This is probably my most favorite Firefox addon, as far as web development goes. It has got nearly a million users, and after installing it, you get a custom navigation bar added to your browser – within which you’ll find dozens of incredibly useful web development tools.
  • You can manage CSS, forms, HTML, measure the length of pages and specific parts, live edit the pages, and so much more. A must have.

Flagfox

  • At first it might seem like an addon that provides only the information of a country where the specific website is hosted, but it’s actually much more than that. After clicking the flag icon next to the URL of any given website, you get access to a settings dropdown, from which you can do things like ping, whois, translate, virus scan, etc, etc,.
  • It’s quite useful for those who’re into the security parts of web development, making it easier to learn about a website straight away.

 

User Agent Switcher

  • It’s known that some sites require a specific user agent in order to be accessed, there are also the occasional website that allows anonymous viewing based on a specific browser (search engines, in most cases), so this tool does come in handy from time to time. You can specify your own, or select from a list of pre-configured ones.

Ghostery

  • Do you ever wonder how many 3rd party websites are able to track your information online, on any given website? I’m sure you do, especially after all the Edward Snowden thing exploded. Ghostery allows you to see which sites and trackers are collecting data about you, on any given page. You can learn, and you can also block any of the sites that you don’t want to be tracking you.

ColorZilla

  • ColorZilla is one of the tools that will give you access to manipulating the colors of any webpage. You can select any given text (even zoom-in), and have the addon give you a color code for it. It’s pretty sleek, and can prove to be of good use in many situations.

JavaScript Debugger

  • You might not need the scope that Firebug can provide, so this JavaScript debugger is a great alternative to those developers who do a lot of coding from within the browser.

iMacros

  • iMacros was designed to automate the most repetitious tasks on the web. If there’s an activity you have to do repeatedly, just record it in iMacros. The next time you need to do it, the entire macro will run at the click of a button! With iMacros, you can quickly and easily fill out web forms, remember passwords, create a webmail notifier, download information from other sites, scrape the Web (get data from multiple sites), and more. You can keep the macros on your computer for your own use, or share them with others by embedding them on your homepage, blog, company Intranet or any social bookmarking service. The uses are limited only by your imagination!

Awesome Screenshot Plus

 

  • All of the snapshots in this page, and this blog, have been taken by this specific addon. It’s out of this World, and it does the job faster and better than any other tool that is currently available. It saves you so much time from having to edit images in a specific editor.

Cookies Manager+

  • Working in the data manipulation business? This addon will be your best buddy. It’s old as Firefox itself, and has a very loyal community behind it. It does exactly what the title says, it allows you to edit your cookies from within the addon itself.

View Source Chart

  • This addon has fulfilled a very subtle desire of most of the designers and developers. We, as web makers, have a penchant for checking the source code of different websites. The creation of this addon has made it possible to go through the source code and view the website, simultaneously.

CSSsir

  • CSSsir is an easy and handy tool which allows you to generate cross-browser code for main CSS- rules in a few clicks. This CSS3 generator will be useful not only for web-masters and designers but also for common users.

Html Validator

  • HTML Validator is a Mozilla Firefox extension that adds HTML validation inside the browser. The number of errors of a HTML page is seen on the form of an icon. Pretty helpful tool for the designers.

Copy HTML

  • Adds a ‘Copy HTML’ context menu item which allows you to copy the HTML for the selected content. Makes it very easy for the designers to integrate things into their websites from their favorite ones.

Other Useful Add-ons :

CSSMate - Firefox extension to edit CSS files.

CSS validator - Check the validity of your webpage using this CSS validator extension.

CSSViewer - See the CSS properties of page elements with this extension.

Codetech - Excellent extension for web page designers, codetech is a web page editor with the look and feel of Dreamweaver.

Add N Edit Cookies - Cookie Editor that allows you add and edit session and saved cookies.

FireShot – Webpage Screenshots: Capture + Annotate

Clear Console - One click to clear your cache, cookies, history, html5/local storage, http logins, all of them or restart your browser with/without notifications

MeasureIt - Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

GridFox – The Grid Layout Firefox Extension

OperaView - Open pages in Opera from Firefox context menus. Very usefull for web developers!

Font Finder - It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

For More Knowledge keep Visiting R-web Knowledge center.


Comments