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
Most useful here is erase cookies:
Clear browser cache (also you can disable cache entirely from another menu):
Measure distance:
Check how responsive your site is simultaneously in several resolutions
And it has even some very interesting use-cases
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.
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:
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.
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.
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
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
2) Drag the text to some free spot to search it / open the URL written in plain 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
Another one is – zooming the image:
Link Alert
https://addons.mozilla.org/en-US/firefox/addon/link-alert/ also as a Chrome port.
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!