Web development
Raiting:
7

Firefox extensions for web development on all occasions


Firefox is very popular among web developers because of its extensibility through various plug-ins and add-ons that were written by independent developers. The extension idea allowed solving a lot of various tasks directly in the browser without resorting to external tools.

Undoubtedly, you will find the familiar extensions in this list, but a lot of useful extensions always remain aside. So get ready to install a couple more extensions! :)

Built-in developer tools in Firefox


Fist we would like to mention the tools already built into Firefox. This article introduces a collection of development tools in Firefox Aurora 10 that could be found in any modern browser.

Mozilla has tried many approaches and solutions during the interface designing of these tools. Consequently, they got a nice interface that anyone can try by installing Firefox Aurora (Have you installed it yet?)

image

You will find below a big list of extensions, which is going to be useful for any web developer.

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. Some of the following extensions are based on Firebug; therefore we will get back to this extension.

In any case, Firebug is quite picky about the memory, so do not forget to disable it (or do not enable it) on websites that you do not use.

Standard Firefox extensions for web developers


Mozilla Firefox is becoming more and more powerful tool in these days. Using right add-ons it will start to become a tool, You cannot live without as web-developer! Each of these plug-ins can make certain things easier for web-developers. And that is the reason, why we looked over many pages to get this overview. If you are using the extensions that are not mentioned here, write in the comments!

Accessibility Evaluation Toolbar
It is a set of tools that supports web developers and people with disabilities in accessing and testing web resources for accessibility features.

All in One Sidebar
It is a sidebar control, inspired by Opera's. It lets quickly switch between sidebars, view dialog windows such as downloads, extensions, and more in the sidebar, or view source code or websites in the sidebar. It provides also enhancements for many built-in and extension features and some extra features.

Cache Status
Cleaning and setting the cache in different parts of Firefox.

CacheToggle
It disables (and optionally clears) the browser cache with the flick of a switch.

Colorzilla
It is an add-on that assists web developers and graphic designers with color (RGB 0-255, RGB 0% -100%, HSL, or hex-colors) related tasks - both basic and advanced.

Console ²
It replaces the JavaScript Console with what could be the next generation Error Console. If you for some reason do not like Firebug, then this extension will be extremely useful.

CSS Reloader
It is a browser extension that allows reloading all the CSS of any website using F9 key without having to reload the page itself.

DOM Inspector
It is a web developer tool and its main purpose is to inspect and edit the DOM tree of HTML and XML-based documents. Also it works with XUL.

Firefogg
It enables client side encoding of videos to the OGG theora format. It additionally supports a chunk upload system for arbitrary large files to upload more reliably over POST.

FireFTP
It is a full-featured cross-platform FTP client for Mozilla Firefox in the form of an add-on. It supports FTP, FTPS, and SFTP servers.

FireUnit
It provides a simple JavaScript API for doing simple test logging and viewing within a new tab of Firebug.

FoxGuide
It is a firefox extension that displays horizontal and vertical guides. Guides will appear as thin lines that float over the webpage.

FoxyProxy Standard
It is an advanced proxy management tool that completely replaces Firefox's limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc.

GreaseMonkey
It is a Firefox extension that allows customizing web pages look and function using JavaScript. It has a huge repository of scripts nawww.userscripts.org.

HTML Validator
It adds validation of HTML within the browser to display the number of errors in the icon.

HttpFox
It is an HTTP analyzer addon for Firefox.

iMacros for Firefox
It automates Firefox and records and replays repetitious work. If you love the Firefox web browser, but are tired of repetitive tasks like visiting the same sites every days, filling out forms, and remembering passwords, then iMacros for Firefox is the solution you have been dreaming of!

Jenkins Build Monitor
Monitor Jenkins (http://jenkins-ci.org) builds and display the status on Firefox status bar.

Extending jQuery
Now, jQuery and jQuery UI are built right into the browser.

JSON!
It nicely formats JSON content in the browser for easy, unobtrusive viewing.

JSONView
It is another viewer of JSON documents in the browser.

JSView
It offers the ability to view the source code of external javascripts.

Link Widgets
It eases navigation within sequences of pages (e.g. Web comics, forums, or technical specifications such as the HTML 5 Recommendation) by providing toolbar buttons for the first, previous, next, and last page.

Live HTTP Headers
It offers the ability to view HTTP headers of a page and while browsing.

LiveReload
It applies CSS/JS changes to Safari or Chrome w/o reloading the page (and autoreloads the page when HTML changes).

MeasureIt
It is a little Firefox extension that enables to draw a ruler across any webpage to check the width or height of an element in pixels.

Modify Headers
It modifies and filters the HTTP request headers sent to web servers. This add-on is particularly useful for Mobile web development, HTTP testing and privacy.

NoScript
The best security you can get in a web browser!
It allows active content to run only from sites you trust, and protect against XSS and Clickjacking attacks.

PageSpeed
It is Google’s product that analyzes the content of a web page, and then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates.

PixelZoomer
It is a Firefox extension for web developers which allows for zooming into websites. The core features are characterized by tools for pixel perfect measuring of
distances and picking colors (HEX codes) with an eye dropper. The viewable area of a web page is being displayed in PixelZoomer through using a screenshot so that the view is based on real pixels.

Pixlr Grabber
It grabs images and screenshots from the Web to share, edit, save or copy. Here is the online image editor pixlr.com / editor /.

Poster
It is a developer tool for interacting with web services and other web resources that lets to make HTTP requests, set the entity body, and content type. It allows interacting with web services and inspects the results.

QuickJava
It allows quick enable and disable of Java, Javascript, Flash, Silverlight, Images, Stylesheets and Proxy from the Statusbar and/or Toolbar without having to open any dialogs.

Regular Expressions Tester
It is a testing tool for regular expressions with color highlighting (including submatches) and helpers for creating expressions.

Remove Cookie (s) for Site
It is a very simple extension to remove all the cookies of currently opened site. It adds an option to the Right Click menu of the page, and a Clear Cookies Button to perform this operation. It displays the status of operation in the status bar.

SQLite Manager
It is a graphical user interface to manage SQLite database.

Buttons Selenium IDE
It is just one simple toolbar button to open Selenium IDE. You need to have installed Selenium IDE: http://seleniumhq.org/projects/ide/.

SeoQuake SEO
Seoquake is a Firefox SEO extension aimed primarily at helping web masters who deal with search engine optimization (SEO), social media optimization (SMO) and internet promotion. Seoquake allows investigating many important SEO parameters.

ShowIP
It shows the IP address of the current page in the status bar. It also allows querying custom services by IP (right mouse button) and hostname (left mouse button), like hois and netcraft. Additionally you can copy the IP address to the clipboard.

Stylish
It is a free Mozilla extension that allows for the manipulation of web pages and XUL application user interfaces through the use of Cascading Style Sheets. These custom user styles are created by the user, or installed from an external archive like userstyles.org for Google, YouTube, Tumblr and many other websites.

Tamper Data
It is an extension to view and modify HTTP / HTTPS-headers and parameters of POST.

Total Validator
It is a Firefox extension which will help to perform multiple validations and takes screen shots. This 5-in-1 validator works with external, internal, or local web pages using the Total Validator service or local copy of the Pro desktop tool.

User Agent Switcher
This extension adds a menu and a toolbar button to switch the user agent of a browser.

Web Developer
The Web Developer extension adds various web developer tools to a browser. The extension is available for Firefox and Chrome, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

Firebug Extensions

They augment or otherwise enhance the Firebug extension. Firebug extensions typically come in the form of Firefox add-ons. Here are some of them:

Acebug
It is a Firefox add-on that integrates with Firebug is a simple Firebug extension that brings some of the awesome features of the Ajax.org Cloud9 Editor (Ace) to Firebug's large command line.

Code Coverage v2 for Firebug 0.1
This Firebug extension is used to report the Javascript code coverage.

CSS Usage
It lets to look at CSS rules and see which ones of them are actually used on the website and which are not.

Firecookie
It is an extension for Firebug that allows viewing, managing and debugging cookies in the browser.

Firefinder
It is an add-on to Firebug, to help find HTML elements matching chosen CSS selector(s) or XPath expression.

FirePHP
It enables to print to the Firebug Console using a simple PHP function call. All data is sent via a set of X-FirePHP-Data response headers.

FireQuery
It adds a collection of jQuery-related enhancements to Firebug. It is recommended for all jQuery developers.

Inline Code Finder
It looks for any of these in a web page: inline JavaScript events, inline style and javascript links.
The idea is to promote separation between content (HTML), presentation (CSS) and interaction (JavaScript), especially the ideas and thinking behind the unobtrusive JavaScript approach.

FireRainbow
It brings Javascript syntax highlighting to Firebug.

NetExport
It is a Firebug extension that allows exporting data from the Net panel.

Pixel Perfect
It is a firebug extension that allows web developers to easily overlay a web composition over top of the developed html.

YSlow
It analyzes web pages and suggests ways to improve their performance based on a set of Yahoo’s rules for high performance web pages.

More Firebug extensions are available at Firebug Extensions webpage.

What extensions do you use for your development?
MeLavi 12 january 2012, 16:52
Vote for this post
Bring it to the Main Page
 

Comments

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute