Firefox Extensions for Web Development for All Occasions

Historically, Firefox is widely popular among web developers because of its extensibility through the connection of all sorts of plug-ins and add-ons written by third-party developers. The idea of ​​allocating functionality in extensions made it possible to solve a lot of various tasks directly in the browser, without resorting to external tools.



Of course, in this list you will surely find familiar extensions, but a huge reservoir of useful extensions is always left out. So get ready to install a couple more extensions! :)

Embedded development tools in Firefox

Before starting the list it would be wrong not to mention the tools already built into Firefox. Here we are talking about the very development tools in Firefox Aurora 10 and the functionality that can be found in any modern browser today.

')

When developing the interface of these tools, many approaches and solutions have been tried. The result was a pretty nice interface that anyone can try by installing Firefox Aurora (hmm, have you set it yet?)







Well, under the cut you will find a huge list of extensions, which will certainly be useful for any web developer.

Firebug

This extension is zero in the list of extensions. Firebug has set the standard in development tools in all browsers. Typically used for live CSS and HTML editing, JavaScript debugging and page load optimization. Some of the extensions below are based on Firebug, so we’ll return to this extension.



Just in case, I remind you that Firebug is quite memory demanding, so do not forget to turn it off (or just not turn it on) on sites you don’t work with.

Standard Firefox Extensions for Web Developers

Over the years, many extensions have been developed to take full advantage of Firefox. Some of them are popular, others you will probably see for the first time. If you are using an extension not mentioned here, write in the comments!

Accessibility Evaluation Toolbar

A set of tools for testing web pages according to various criteria.

All in One Sidebar

The left panel, on which you can throw links, downloads, extensions, history of visits, etc. Something like the Opera browser panel.

Cache Status

Clearing and adjusting the cache in different places in Firefox.

Cachetogle

Turn off (and / or clear) the browser cache with one button.

Colorzilla

Multifunctional pipette, gradient generator and something else. Works with colors in RGB 0-255, RGB 0% -100%, HSL or hex colors.

Console²

Console² replaces the built-in JavaScript console with a new generation console. If for some reason you are not satisfied with Firebug, then this extension will be extremely useful.

CSS Reloader

One key F9 allows you to reload the CSS files without updating the page itself.

DOM Inspector

Classic two-paneled DOM tree editor. Also works with XUL.

Firefogg

Provides an API for transcoding video and audio files to OGG format when uploading directly to Firefox.

Fireftp

A full-fledged cross-platform FTP / SFTP client directly in the browser will be useful for those who like to upload and edit files on an FTP server.

Fireunit

Extension for unit testing javascript. No additional comments needed.

Foxguide

Horizontal and vertical floating rulers to align the interface elements relative to each other.

FoxyProxy Standard

The FoxyProxy extension completely replaces the built-in mechanism for working with proxy servers. More functional extension than its counterparts: SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc.

Greasemonkey

Customizing pages with javascript. It has a huge script repository at www.userscripts.org .

HTML Validator

Validation of HTML inside the browser with the display of the number of errors in the icon.

HttpFox

HTTP analyzer extension for Firefox.

iMacros for Firefox

Automates Firefox. Allows you to record and then play repetitive actions. If you use Firefox and do the routine work of filling out forms or crawling pages every day, then this extension is just what you dreamed of!

Jenkins Build Monitor

Monitoring Jenkins builds ( http://jenkins-ci.org ) and displaying build progress in the Firefox status bar.

JQuery extension

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

JSONovich!

Beautifully formats JSON code for easier reading in the browser.

Jsonview

Another browser for JSON documents.

Jsview

Opens new js / css files from external sites in the new window, if any.

Link Widgets

Adds buttons to the first, last, next, and previous pages, making it easier to navigate through related page sequences (for example, web comics, forums, or technical specifications, for example, HTML 5).

Live HTTP Headers

View HTTP page headers when the page loads.

LiveReload

The LiveReload extension automatically refreshes the page when the file on the hard disk changes.

MeasureIt

A tool for measuring distances in pixels on the pages.

Modify headers

Add, edit, and filter strings in HTTP request headers at the time of sending. Used in particular when developing for mobile devices, testing HTTP and checking security.

NoScript

The best browser protection tool! Even if you are not going to disable JavaScript everywhere, the extension will protect you from most types of XSS and clickjacking.

PageSpeed

Project from Google, giving recommendations for improving the performance of the website.

PixelZoomer

PixelZoomer takes a screenshot of the page for further analysis. It can increase up to 3200%, measure the distance or remove the color value using a pipette.

Pixlr grabber

Extension for the online image editor pixlr.com/editor . It is useful if you need to take a finished image or take a screenshot of the page, and then change it (wipe personal data, add signatures, etc.).

Poster

A tool for performing HTTP requests and viewing their results. Convenient for testing interaction with web services.

Quickjava

Quickly enable or disable Java, Javascript, Flash, Silverlight, images, CSS and proxy from the status bar and / or the top bar.

Regular Expressions Tester

A regular expression test tool with backlit matches.

Remove Cookie (s) for Site

Very simple extension to clear cookies from the site. Hides in the menu by the right mouse button.

SQLite Manager

Graphical interface for managing SQLite databases.

Selenium IDE buttons

Just buttons to open Selenium IDE. Naturally, Selenium IDE itself must be installed to work: http://seleniumhq.org/projects/ide/

SEOQuake SEO

Seoquake will help optimize your site for search engines and social networks.

ShowIP

Shows the IP address (s) of the current page in the status bar. Also on the right click displays the host name, information from hois, netcraft, etc. There you can also copy the IP address.

Stylish

Change style tables for sites. Stylish, like GreaseMonkey, has a large repository of themes for Google, YouTube, Tumblr and other sites.

Tamper data

Extension for viewing and modifying HTTP / HTTPS headers and POST parameters.

Total validator

Simultaneous verification of a page by several validators. It works with external and internal sites, as well as simply with local pages.

User Agent Switcher

User Agent Switch. A couple of clicks - and sites consider you a mobile device or search engine.

Web Developer

Dashboard for web development. Contains rich functionality that does not intersect with Firebug.

Firebug Extensions

Firebug on its development path also decided to get extensions for all occasions. That's what came out of it:

Acebug

Syntax highlighting and autocompletion when typing in Firebug editor using Ace editor.

Code Coverage v2 for Firebug 0.1

Displays Javascript code coverage in Firebug window.

CSS Usage

An extension that indicates which CSS rules are actually used.

Firecookie

Firecookie extension adds Firebug's Cookies tab.

Firefinder

Finds HTML elements matching a CSS selector or XPath expression.

Firephp

Logging from PHP to the Firebug panel by a simple call to a special method in PHP.

Firequery

Firebug plugin for jQuery development.

Inline code finder

The Inline Code Finder extension finds sections in HTML code with embedded scripts, styles, and “javascript: ...” links.

Firerainbow

Syntax highlighting for javascript.

NetExport

The NetExport extension allows you to export all collected information from the Net panel to the HTTP Archive (HAR) format based on JSON.

Pixel perfect

The extension Pixel Perfect allows you to impose a ready-made layout on the page being developed.

Yslow

YSlow analyzes pages and gives tips on how to optimize their speed according to Yahoo rules.



More Firebug extensions are available on the Firebug Extensions page.



What other extensions do you use when developing?