Tutsflow

15 WordPress Firefox Plugins Useful For Web Developers

Firefox open-source browser made by Mozilla. A few years back it was the primary genuine contender for the Internet Explorer and the main sign that its imposing business model could be broken.

At this point, the browser landscape is a great deal more broadened and Internet clients can choose between various browsers.

For that reason, it’s safe to say that many WordPress users and website admins are using the orange fox for their browsing and site administration needs. To make their life a little easier, in this article, we will look at the best Firefox plugins, tools and extensions for increasing the productivity of WordPress users.

Your WordPress Sites with These Firefox Extensions

Firefox has produced a bunch of truly useful plugins and extensions for WordPress users. The ones in this article based on web development categories.

WordPress Development

First, we will look at some useful tools for WordPress development. The following Firefox extensions will help code wranglers, CSS heroes and Javascript aficianados to go about their business quicker and easier.

1. Web Developer

This extension adds various tools for web developers to the browser. You can view source code, display the order of div elements inside a page as well as CSS classes and ids.

In addition to that, you can also disable all styles, modify cookies and more. I mainly use it to display the size of my browser window to determine breakpoints for responsive design. Highly recommended.

2. Firefox Developer Tools

Firefox itself contains a number of useful development tools. You can find them in the menu under Developer. Alternatively you can also press Ctrl+Shift+I. This will open the bottom-screen console.

Follow tools for debugging, editing and analyzing your website. Among others, you can:

  • Monitor site performance
  • Execute and debug PHP and JS
  • Inspect and modify HTML and CSS
  • Edit style sheets on the fly
  • Select colors from the viewed page
  • Inspect cookies

3. Firebug

Firebug has similar to Firefox developer tools. It allows you to edit, monitor and debug HTML, CSS, and JS in any web page. I use it pretty much every day. Firebug was an eye-opener for me.

The difference between Firebug and the Firefox tool set used to be much bigger. I am just so used to Firebug that I’m sticking with it. The choice is up to you.

4. FireFTP

Mostly use a dedicated FTP client for accessing our servers such as FileZilla, FireFTP makes exactly that possible by offering an FTP interface inside Firefox. Other features include directory comparison, SSL encryption, remote editing and drag and drop.

5. HTML Validator

The HTML validation tool is connected to the W3C API. After activation, it will display the number of HTML issues on your page in the browser bar.

6. ColorZilla

ColorZilla handy tool is of great help. You can zoom onto any element, pick its color with an eyedropper tool, copy it in hex, RGB or any other form and paste it wherever you like. Also offers a color picker and gradient generator.

7. Javascript Deobfuscator

JavaScript DE obfuscator extension is a must have for JS developers. It allows you to display and log JavaScript executed on any site, even if obfuscated or created on the fly.

8. Wappalyzer

This Wappalyzer plugin will tell you whether a site is using Google Analytics, Optimizable, Joomla, jQuery, WordPress, Google Fonts, Apache, PHP and other software. A great tool to learn more about the web and spy on the competition.

When you looking at a website, do you ever find yourself wondering how it was built? For Example, what software is running in the background? Now you can find out quite easily.

9. User Agent Switcher

User Agent Switcher extension was written by the same guy who does the Web Developer extension, so you know you have quality on your hands. You can see your site as an iPhone or Internet Explorer user or even the way a search spider would see it.

10. IE Tav V2

In Internet Explorer there is now a shortcut. This extension opens any page with IE inside a Firefox browser tab! Consequently you can test your site in Microsoft’s browser without having to use it.

In the worst case scenario, you will have to test your new site on all kinds of different setups, devices and browsers.

11. Empty Cache Button

When refreshed the browser and they were nowhere to be seen? Then, after frantically searching for a mistake you finally discovered that it was merely the old site version in the browser cache?

Now, here is an option to clear your cache at the touch of a button. And then clear memory, disk, offline data and favicons in a second. Plus, optional automatic cache cleaning.

12. WordPress Toolbar

WordPress Toolbar add-on provides you with an additional toolbar when logged into a WordPress site. From there you can access any part of the site from the frontend without clicking through the WordPress menu.

And it doesn’t work if you are running your site from a subdirectory. In my case, it was also hidden by the actual WordPress toolbar.

13. WordPress Code Reference

The WordPress Code Reference Firefox plugin does the same as the one before, but for the new WordPress code reference. And that way you can search for functions, hooks, classes and methods in no time.

14. WordPress Codex

This WordPress Codex is the bible for all developers. And you can add it directly to the search engine options inside Firefox for quick reference.

15. MeasureIt

This Measurelt little tool allows you to draw a ruler across the browser window and figure out the dimensions of any element on your web page. And simple to use and really helpful.

I hope 15 tools will help you improve your personal workflow and make your life a little bit easier. Let us know your experience in the comments.

Share the Post:

Featured WordPress Plugins

PatternsWP

WordPress Block Patterns Library

Deals & Coupons

Unbounce Coupon

Save 20% off first 3 months

Cloudways Coupon

Save 20% off first 1 months