Firefox extensions for web-development

I’m an extensive Firefox user and over time I used lots of extensions, at some point being swarmed to more than 50. After the last cleanup I’m using only a few and here are the ones that are especially helpful in web-development:

Web Developer

https://addons.mozilla.org/en-US/firefox/addon/web-developer/. Also has a Chrome port

Why install: to get nearly complete control over what’s inside browser window

Web developer panel

Most useful here is erase cookies:
Web developer - Erase cookies

Clear browser cache (also you can disable cache entirely from another menu):

Web developer - Clear cache

Measure distance:

Web developer - Display ruler

Check how responsive your site is simultaneously in several resolutions

Web developer - Responsive View

And it has even some very interesting use-cases

Web developer - Change Form Method

The only thing really missing here is the color picker, but there are plenty of extensions for that.

BTW such a toolbar was initially a killer-feature of Maxthon browser and I believe was stolen from there.

Lazarus: Form Recovery

https://addons.mozilla.org/en-US/firefox/addon/lazarus-form-recovery/ . Also has a Chrome port.

When to install: after you spent 10 minutes filling out some web form, clicked “Submit” and got “Connection to the server lost” message.

Anger

Lazarus: Form recovery

Another good reason to install it when you are testing something like a customer registration form. You fill it out once and then you quickly restore the data. In this case I recovered my address:

Lazarus: Form recovery

A side-note – it only restores the form values but does not fire up any attached onclick/onchange events.

Open With

https://addons.mozilla.org/en-US/firefox/addon/open-with/ . Chrome port – nope, Chrome is too awesome to even think you need another browser.

Why install: Let’s check how the site works in a different browser.

Open With

There are several plugins with the similar functions including well-known IE Tab. I like this one because it has a nice panel and automatically detects installed browsers. What it does is simply running the other browser’s executable file passing the current url as parameter.

Open With panel

Besides, you can add more browsers e.g portable ones with older versions

React Developer Tools

https://addons.mozilla.org/en-US/firefox/addon/react-devtools/

helps debugging if you are working with React

React Developer Tools

SuperDrag

https://addons.mozilla.org/en-US/firefox/addon/super-drag/

Why install: Because life is too short to hold Ctrl. Also there is an alternative experimental extension called Quickdrag, I’ll use the screenshots from the last one since they are quite similar.

It has two main features:

1) drag a link to some free spot to open it in background tab

Quickdrag link

2) Drag the text to some free spot to search it / open the URL written in plain text.

Quickdrag text

All-in-One Gestures

https://addons.mozilla.org/en-US/firefox/addon/all-in-one-gestures/

Not something directly related to web development, but useful nonetheless.

One reason to install it is its easy gesture to close the tab

All-in-One Gestures - Close tab

Another one is – zooming the image:

All-in-One Gestures - Zoom image

Link Alert

https://addons.mozilla.org/en-US/firefox/addon/link-alert/ also as a Chrome port.

Link Alert settings

Shows an icon near your cursor for different kind of links. For instance for link that will be opened in a new window or that will lead you out of HTTPS site.

Happy web development!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.