My Top Firefox Plugins for Developers

Published on
9,259 Points
3 Endorsements
Last Modified:

1. Web Developer

This is the daddy of Firefox plug-ins, it lets you do so much and saves so much time. It would take me forever to go through the full list of features but I'll just highlight the main ones that I use in my role as a Technical SEO.
Document Outline - This will show me the logical heading structure on a page. So you'd expect a h1 at the top, then a h2 or h2s inside the h2s should be h3s and so on. If any headings are out of hierarchy it shows them up here.

Display Image Alt - Nice and simple this one just overlays all of the alt attributes on its relative image. handy for finding images that have no alt on them.

Disabling Menu - I use some of the features in here for disabling JavaScript and disabling redirects this is handy for finding spammy pages that have old school meta or JavaScript redirects.

Re-size - Great for web design, this lets you re-size your browser window to any size you select. Good for testing out your site on smaller resolutions.

There is also an option to edit CSS but I prefer the editing facilities in FireBug shown below


2. Firebug

Firebug is amazing for web designers and developers. It can do many things like analysing page load times, which also shows you what elements are slowing you down. HTTP Header responses, show you your DOM information. The main power of this comes in the HTML and CSS tabs, for instance right click on anything and hit Inspect Element will bring up that element in a code window under the web-page. You can now directly edit and manipulate that page to test and make changes. It will not be live for the world to see though just locally for you to modify a page until on-the-fly you get the right look. This is a brilliant feature for web developers as it saves editing saving and refreshing.


3. ShowIP

This is a simple very small plug-in that I miss when it isn't there. It places a small box in the status bar and displays the IP address of the current site. Right clicking on it gives me access to whois and some dnsstuff tools taking you straight to the page with the information about that IP address.

I use it mainly for using an IP: searches to check for sites that exist on that IP address.


4. Server Spy

Another very simple plug in is ServerSpy, all this does is tells me the server type and version that the site has been served up using. Right clicking can give you extended information.

If you want any of these plugins head over to https://addons.mozilla.org/en-US/firefox and tap in the titles I have put above.

Shane Jones
LVL 50

Expert Comment

Web Developer and Firebug are compulsory if you are into web pages.  I'll throw in another one that I found useful.

Measureit - useful for measuring distances across pages.  From the addon

Draw out a ruler to get the pixel width and height of any elements on a webpage.Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
LVL 29

Expert Comment

by:Bernard S.
You might also consider 2 javascript bookmarks that work in all browsers:
- MobilePerf gives a (javascript) access to tools like Firebug Lite and othdr pdrformance measurement tools. See http://www.stevesouders.com/mobileperf/mobileperfbkm.php
- XRay at http://www.westciv.com/xray/ allows easy access to css values of any on-screen element: height, width, etc. (fails with some javascripted pages)

Note that they add no workload to the browsers!

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month