Web Designer Tools For Firefox

Mozilla has definitely seen better days during its time, I'm of course relating to the recent issues it had with it's CEO, and how that opened up the transparency of the company. In my eyes, it's all media stuff, and it doesn't affect me as much.

I'm here to enjoy this browser, just a few days ago, a new version was released to the public. It was the version 29.0 of the Mozilla Firefox web browser, which brought in a couple of changes and security fixes. You can read the release notes for more information.

In 2006, when I began my web journey, Chrome didn't exist at the time, and everyone was using Firefox as their primary web browser, with the exception of some using the IE, and Opera. These days, Chrome is dominating the market, while Firefox is trying to stay as open as possible, something that appeals to developers all around the World.

I have used plenty of Firefox addons over the years, to know which ones the community likes and which ones it dislikes. The problem with the default addon directory on the Mozilla website is quite simple, many of the addons in the web developer category are actually addons for webmasters.

And, while I don't disagree that webmasters are web developers, it would be much nicer if their sections were more narrow and specific. But, that's part of the reason I'm here, to sort that problem out. Here are my 15 favorite Firefox addons for making web development, a bit less of a pain.

1. Firebug

It's basically what Chrome DevTools is to Chrome, 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. ColorZilla

ColorZilla is one of the tools that is also listed in my post about background pattern generators, it 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.

7. iMacros

It can do just about everything, when it comes to automating a task. If you're developing from the browser a lot, it can take away the strain of having to type the same thing over and over again. Just make a macro, and it's done. It's also great for scraping and gathering together data, things which might require separate scripting otherwise.

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!

8. ColorfulTabs

I find this addon invaluable. At first, you realize it might have potential, but once you start using it, it becomes something of an essential tool that needs to be added to your daily workflow. No longer do you need to worry about switching to the wrong tabs, or quitting the wrong page. Assign specific colors to specific types of pages, and watch how it unfolds in a much easier and efficient workflow.

9. 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.

10. Live HTTP Headers

HTTP Headers can tell you about a page more than you initially would think. Back in the day, it used to be a very famous addon that script kiddies and web hackers alike would use to manipulate poorly written scripts. Good old spam days. You never know when you might need to grab some header information, definitely hold on to this addon.

11. 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.

You can try to rely on online photo editors, but that is going to prove to be just as painful. This will get things done quickly, and without the loss of quality.

12. 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. Many different uses for this, developers should know.

13. JSONView

I first became aware of this when I began learning Laravel, and I've tried to stick with it, ever since. It will transform any JSON (array's) output in the browser, in a modern/readable manner. It's nothing major, but it kind of makes things seem a little more easier.

14. HackBar

It's not a tool for hackers to cream over. It's a simple pentesting tool for developers who'd like to check their own code on frequent basis. It provides simple tools for checking XSS, SQL, decoding information and plenty more. If you're keen on learning web security, this tool might come in handy. But, there is more reading to be done, than there is playing with this too.

I find it useful for checking both clients websites, and my own. You never know, right?

15. BuiltWith

The last tool on our list of the top Firefox addons for web developers, is going to be 'Built With'. I suppose you already guessed what it does. It will add an extra button to the toolbar, which – after clicked – will try and display the software of the particular site you're viewing. It can prove to be both a time-saver, and an eye opener.

Mozilla Firefox Addons for Web Developers

I really hope that many of these tools were new to you, but if they were not, you're doing a great job with staying up to date. It was definitely fun putting these together, even remembering some of the old memories that these tools had created.

If you're a Firefox user, do you agree with the tools that have been put in this list, and would you add any more? Leave your suggestions in the comment box, the community is definitely going to hear you out.

Web Designer Tools For Firefox

Source: https://codecondo.com/top-15-mozilla-firefox-addons-web-developers/

Posted by: culbertsoncrin1958.blogspot.com

Share this post