Firefox - tons of tools for web developers! - Mozilla Hacks

One of the goals of Firefox have always been to make the lives of web developers as easy and productive as possible, by providing tools and a very extensible web browser to enable people to create amazing things. The idea here is to list a lot of the tools and options available to you as web developers using Firefox.

Native developer tools in Firefox

We are working on building a great set of developer tools for you included in Firefox. They are described much more in detail in Developer Tools in Firefox Aurora 10 and there are some very interesting implications for what we can accomplish with them!

We are evaluating and experimenting with a number of user interfaces and code approaches to try and find the most optimal ways to work with code in a page. If you install Firefox Aurora you can try them out right now! Let us know what you think.

A picture of the native Developer Toosl in Firefox Aurora

Also stay tuned to this blog, since we will post updates on progress and features for the native Developer Tools.

Firebug

By far, the most well-known web developer tool in a web browser is the Firebug extension, and without a doubt, for a long time it set the bar for how web developing and debugging should be. Firebug is still a very important tool with lots of powerful features, including a vast number of extensions (see below).

Just something you need to be aware of, though, is with everything that Firebug offers it can be quite heavy when it comes to consuming memory, so use it accordingly.

Firefox extensions for web developers

Over the years, a lot of extensions have been developed to help web developers utilize Firefox to the maximum. Some of the most used and well-known are these ones, but please let us know if we have missed any that helps you!

Accessibility Evaluation Toolbar

Support web developers in testing web resources for accessibility features.

All in One Sidebar

AiOS lets you open various windows as sidebar panels, and quickly switch between them. So it put an end to the window chaos! In addition to bookmarks and history it opens dialogues such as downloads, add-ons and more in the sidebar.

Cache Status

Easy cache status & management from status.

CacheToggle

Disable (and optionally clear) the browser cache with the flick of a switch.

Colorzilla

Advanced Eyedropper, ColorPicker, Gradient Generator and other colorful goodies.

Console²

Console² (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console. From v0.5 includes the Console Filter extension previously available separately from the Console² website.

CSS Reloader

CSS Reloader is an extension that allows you to reload all the CSS of any site without you have to reload the page itself.

DOM Inspector

DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application. The DOM can be navigated using a two-paned window displaying a variety of different views on the document and all nodes within.

Firefogg

Video and audio encoding for Firefox. With Firefogg you can encode most media files to Ogg and WebM. Firefogg also provides an API to integrate encoding into the upload process.

FireFTP

FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers.

FireUnit

JavaScript Unit Testing Extension

FoxGuide

Display horizontal and vertical floating guides, exactly the way you use it in photoshop. Helps improving layout, placing elements in proper grids, laying out elements symmetrically and structure a design.

FoxyProxy Standard

FoxyProxy is an advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc.

Geolocater

Geolocate you where you want.

GreaseMonkey

Customize the way a web page displays or behaves, by using small bits of JavaScript.

HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon.

HttpFox

An HTTP analyzer addon for Firefox.

iMacros for Firefox

Automate Firefox. Record and replay repetitious work. If you love the Firefox web browser, but are tired of repetitive tasks like visiting the same sites every days, filling out forms, and remembering passwords, then iMacros for Firefox is the solution you’ve been dreaming of!

Jenkins Build Monitor

Monitor Jenkins (http://jenkins-ci.org) builds and display the status on Firefox status bar.

jQuery extension

jQuery and jQuery UI embedded in browser.

JSONovich

Pretty-prints JSON content in the browser for easy, unobtrusive viewing.

JSONView

View JSON documents in the browser.

JSView

If the website you are viewing contains any external js/css files, an icon will appear that says “SS”, “JS”, or both. Each individual file can then be viewed by clicking on the filename. The file will be opened in a new window.

Link Widgets

Eases navigation within sequences of pages (e.g. Web comics, forums, or technical specifications such as the HTML 4 Recommendation) by providing toolbar buttons for the first, previous, next, and last page.

Live HTTP Headers

View HTTP headers of a page and while browsing.

LiveReload

LiveReload refreshes a web page when files change.

MeasureIt

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

Modify Headers

Add, modify and filter the HTTP request headers sent to web servers. This addon is particularly useful for Mobile web development, HTTP testing and privacy.

NoScript

The best security you can get in a web browser! Allow active content to run only from sites you trust, and protect yourself against XSS and Clickjacking attacks.

PageSpeed

Page Speed is an open-source project started at Google to help developers optimize their web pages by applying web performance best practices.

Phoenix

An editor with real time syntax highlighting which allows edit, run and test CSS, HTML and JavaScript code. Phoenix will tell you how many CSS and JS files are loaded into a page, how big these are, it will let you edit, pack and de-obfuscate them.

PixelZoomer

PixelZoomer takes a screenshot of the current website and provides various tools for pixel analysis. You can zoom into websites (up to 3200%), measure distances and pick colors with an eye dropper.

Pixlr Grabber

Grabbing screens and pulling images from the web just got a bit easier. With the Pixlr Grabber add-on, you can copy, save, share or even edit your final grabs – including any image or background – with just a right-click.

Poster

A developer tool for interacting with web services and other web resources that lets you make HTTP requests, set the entity body, and content type. This allows you to interact with web services and inspect the results.

QuickJava

Allows quick enable and disable of Java, Javascript, Flash, Silverlight, Images, Stylesheets and Proxy from the Statusbar and/or Toolbar without having to open any dialogs!

Rainbow Color Tools

Color tools for web development. Color picker and eyedropper + saving colors and trying out colors with drag and drop.

Regular Expressions Tester

Testing tool for regular expressions with color highlighting (including submatches) and helpers for creating expressions.

Remove Cookie(s) for Site

A very simple extension to remove all the cookies of currently opened site. It adds an option to the Right Click menu of the page, and a Clear Cookies Button to perform this operation. It displays the status of operation in the status bar.

Screenshot Pimp

Capture, grab, save, download, or copy anything you see in your web browser with only one click! Screenshot pimp is by far the most customizable, and user friendly screenshot toolbar available for both Windows and Mac!

SQLite Manager

Manage any SQLite database on your computer.

Selenium IDE Button

Just one simple toolbar button to open Selenium IDE. You need to have installed Selenium IDE: http://seleniumhq.org/projects/ide/

SeoQuake SEO extension

Seoquake is a Firefox SEO extension aimed primarily at helping web masters who deal with search engine optimization (SEO), social media optimization (SMO) and internet promotion. Seoquake allows to investigate many important SEO parameters.

ShowIP

Show the IP address(es) of the current page in the status bar. It also allows querying custom information services by IP (right click) and hostname (left click), like whois, netcraft, etc. Additionally you can copy the IP address to the clipboard.

Stylish

Restyle the web with Stylish, a user styles manager. Stylish lets you easily install themes and skins for Google, Facebook, YouTube, Orkut, and many, many other sites. You can even customize Firefox and other programs themselves.

Tamper Data

Use tamperdata to view and modify HTTP/HTTPS headers and post parameters.

TAW3

You can have an idea, with a single click, of how accesible web sites are.

Tilt 3D

A WebGL-based 3D visualization of a webpage.

Total Validator

Perform many different validations in one go. This multiple validator works with external, internal, or local web pages using a local copy of the desktop tool obtained from http://www.totalvalidator.com/downloads/extensiontool.html.

TryAgain

TryAgain keeps trying to load a webpage when the server cannot be reached.

User Agent Switcher

The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of a browser.

Wappalyzer

Wappalyzer is a browser add-on that uncovers the technologies used on websites.

Web Developer

The Web Developer extension adds various web developer tools to a browser.

Firebug extensions

There exists a lot of extensions for Firebug for a number of different use cases, and a number of them are listed here:

Acebug

Syntax highlighting for the Firebug command line using Ace. Fuzzy auto completion.

Code Coverage v2 for Firebug 0.1

This Firebug extension is used to report the Javascript code coverage.

CSS Usage

Firebug extension to view which CSS rules are actually used.

Firecookie

Firecookie is an extension for Firebug that makes possible to view and manage cookies in your browser.

Firefinder

Finds HTML elements matching chosen CSS selector(s) or XPath expression.

FirePHP

FirePHP enables you to log to your Firebug Console using a simple PHP method call.

FireQuery

Firebug plugin for jQuery development.

friendly bug

Makes firebug friendlier and easier to use

Inline Code Finder for Firebug

Inline Code Finder is an add-on to Firebug, to be able to find HTML elements with any of these issues: Inline JavaScript events, Inline style, javascript: links.

FireRainbow

Javascript syntax highlighting for Firebug.

NetExport

NetExport is a Firebug extension that allows exporting all collected and computed data from the Net panel. The structure of the created file uses HTTP Archive (HAR) format (based on JSON).

Pixel Perfect

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.

YSlow

YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.

There are even more extensions available for Firebug, available in the Firebug Extensions wiki.

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…

89 comments

pdp

Excuse my shameless plug here but I strongly believe that our extension “Websecurify” should be on the list although it is relatively new. :)

The reason being is because non of the currently listed extensions addresses the security concerns. There are plenty of tools to fix CSS, test HTML and JS but security is usually ignored. Websecurify is perfect in that sense because it provides an automated application testing solution right from inside the browser which can be easily launched and used actively during the development process.

We are only trying to make the world a better place :)

November 28th, 2011 at 02:29
1. Robert Nyman [Mozilla]
  
  Valid point! :-)
  I assume this is the one? https://addons.mozilla.org/en-US/firefox/addon/websecurify/
  
  November 28th, 2011 at 02:36
  1. pdp
    
    Yep. This is the one. :)
    
    November 28th, 2011 at 02:50
2. gni33
  
  been using websecurify for a while now and it’s a great plugin!
  keep up the good work!
  
  November 29th, 2011 at 04:08
  1. Robert Nyman
    
    Good to hear that!
    
    November 29th, 2011 at 05:17
pd

when will you come out and the do right, honest thing: state that you’ve abandoned Firebug?

https://bugzilla.mozilla.org/show_bug.cgi?id=699528#c13

“I am the only one maintaining the entire Firebug project now” – Jan Honza Odvarko

So many of those extensions you are referring to above depend on Firebug which you are not leaving to rot.

How about Mozilla stop the propaganda and start with honesty? Mozilla has always had such a righteous approach to business practices so what has happened to that now?

November 28th, 2011 at 02:30
1. Robert Nyman
  
  This post is about the variety of tools you have available in Firefox as a web developer: native tools, extensions and also Firebug and its extensions.
  
  I fail to see how you deem it appropriate to state this post as not being honest, however, since I set out to list available tools – which is exactly what I do.
  
  When it comes to Firebug and its future, it has been lead both by the community and Mozilla involvement. I am not part of that strategic team and I don’t know the plans for the future of Firebug.
  
  November 28th, 2011 at 02:43
  1. pd
    
    “I fail to see how you deem it appropriate to state this post as not being honest, however, since I set out to list available tools – which is exactly what I do.”
    
    Well, perhaps dishonest is not the best description. Perhaps not telling the whole story is more accurate.
    
    I admit I assumed that anyone writing for hacks.mozilla knew what was going on internally inside Mozilla. You’ve corrected me so thanks for that.
    
    I hope you can see my point of view though. It is very disturbing to read suggestions that the future of Firebug is not certain. It is akin to a carpenter being told that nobody is making hammers and saws anymore!
    
    You made the point yourself that Firebug is – in part – a Mozilla initiative. Now it seems that all Mozilla efforts are going into native tools.
    
    I think my question is a fair one. Someone, if not yourself or your fellow hacks.mozilla authors, then *someone* should clarify Firebug’s future. It’s not unreasonable a request.
    
    November 28th, 2011 at 03:22
    1. Robert Nyman
      
      I do understand that you wonder about the future of Firebug. In my mind, though, it’s not a black and white thing. Yes, we do put time and effort into the native developer tools since we believe that is something we need to do, and we can accomplish things we can’t with Firebug. That doesn’t necessarily mean that Firebug is abandoned. Jan has been one of the main developers for Firebug for many years, and he continues to improve it. I guess the future will tell how it will evolve.
      
      November 28th, 2011 at 04:19
    2. Honza
      
      Just to clarify, while I am the only one *full* time Firebug developer, there are still very healthy and active community around Firebug and the group of existing contributors are providing great help.
      
      Note that one of the Firebug’s goals in the future is to reuse built-in tools/components, which would help reducing the amount of work on Firebug itself as well as help properly design APIs of these built-in components.
      
      Honza
      
      November 28th, 2011 at 09:59
      1. Robert Nyman
        
        Thanks for clarifying on that!
        
        November 28th, 2011 at 12:50
      2. pd
        
        I don’t think Robert you’re whatever will be, will be approach is acceptable so thanks Honza for the update. However there should be more than one full time Firebug developer if Mozilla is serious about supporting developers IMHO.
        
        I guess the most important thing is that Firebug never goes backward or allows it’s functionality to be replaced by inferior code simply because that code is native.
        
        It’s highly amusing that there seems to developers and non-developers who don’t necessarily want native dev tools. I have been along for the Firefox ride since the beginning. I’ve never contributed code, unfortunately, but I like to follow the strategy and direction of the project. In this time I’ve seen so many Firefox / Mozilla people rebut the need to have more functionality built-in to the browser. Now on the developer tools front, it’s the opposite. Crazy.
        
        Long live Firefox, long live high-quality web developer tools!
        
        November 29th, 2011 at 06:22
      3. Robert Nyman
        
        You will always have developers who want native tools and those who won’t. Mozilla wouldn’t be building Native Developer Tools unless a majority wanted them and we believed it was in the best interest for the future.
        
        November 29th, 2011 at 09:08
2. Mike Ratcliffe
  
  We do not intend to drop support for Firebug. It is still an absolutely fantastic tool for web developers and has been copied by all major browsers.
  
  The built in developer tools are designed to co-exist with Firebug and not to kill it. Sure, Honza is the only full time Firebug developer, but there are still a bunch of other contributors.
  
  If I was to speculate about the future of Firebug I would guess that it may make some use of the built in tools e.g. for highlighting elements, but it will be with us for a long time to come.
  
  November 28th, 2011 at 05:40
  1. pd
    
    I hope this is not just a semantics correction reply for the sake of it. However I’d say Firebug is more than fantastic, it’s critical. It’s what a hammer is to a carpenter; a trowel is to a bricklayer; socket wrench to a mechanic … True browsers have *tried* to copy Firebug but in the case of IE, have failed wholeheartedly. I reckon the best way to discuss web developer is BF (before Firebug) and AF (after Firebug). Yet it is far from perfect and could do so much better and so much more. Isn’t it time to be admitting that as amazing as volunteer contributors can be, Mozilla should be committing full time resources to developer tools in general, not just Honza (champion though he is) compared to how many working full time on (native) “Developer Tools”. This is what I object to: reducing the priority given to Firebug. Let’s not forget that it was built initially by one man: all praise to Joe! AFAIK Joe man didn’t have to deal with a whole lot of politics and shuffling of priorities.
    
    Please Mozilla, focus on providing the best developer tools, not merely native tools or tools developed under this or that project/politics/auspices.
    
    November 29th, 2011 at 06:49
    1. Robert Nyman
      
      Thanks for your opinions. As you understand, there are a lot of different opinions, and I believe the people in charge of the Developer Tools will form the best decision based on all that feedback and the needs they see.
      
      November 29th, 2011 at 09:06
Nicholas Hebb

FYI – there’s a typo in the title for SQLite Manager (w/ a ‘G’ where the ‘Q’ should be). It is a handy tool for managing SQLite databases.

November 28th, 2011 at 03:29
1. Robert Nyman
  
  Well spotted!Fixed it now, thanks!
  
  November 28th, 2011 at 04:11
Essex Web Design

What was the xml plugin for jQuery development.

November 28th, 2011 at 03:49
1. Robert Nyman
  
  Not sure exactly which one that might be.
  
  November 28th, 2011 at 04:13
Akshitha

This is an exhaustive list of addons. FireBug, ColorZilla, FirePHP, yslow are the addons used daily. Now you have made me busy by trying out the addons.

November 28th, 2011 at 03:49
1. Robert Nyman
  
  Thanks, glad you liked it!
  
  November 28th, 2011 at 04:11
Komputer

I recommend also CSSViewer, but you have to manually change Fierfox version in instalation files

November 28th, 2011 at 04:17
1. Robert Nyman
  
  Thanks for the tip! However, I only try to list extensions here that are maintained and are compatible with the latest official release of Firefox (version 8, at the time of writing).
  
  November 28th, 2011 at 04:22
Thomas Traub

I left Firefox for the Webkit family and I use it now only in three situations :
1. check display / behaviour differences
2. check languages
3. check the Javascript

Firefox needs to become once again the trustworthy, practical, getting-out-of-the way tool it once started with – which just works.

A developer suite à la Webkit must always be available with the release of a new version, auto-updating transparently in the background, no additional dialogs – better have it integrated into the core.

Let me have several versions opened with their own, isolated plugin tree.

No more redirections on startup upon version change (I might start FF with an URL associated)

I have serious doubts though

I have the impression that You people just don’t really use FF for Web Dev or You have never worked with a Webkit browser for a while, for instance the (not so) new integrated Web Console does not clear the log on page refreshes. A complete failure.

Ah yes, I am on Mac in Aurora (10.0a2 (2011-11-27), I’ve tried to install some of the above, all pages tell me that the plugin in question won’t work with my version of Firefox. This sort of thing is the typical experience nowadays.

Sorry to be so negative, I used to be a real fan and promoter.

November 28th, 2011 at 05:05
1. Robert Nyman
  
  Thanks, we appreciate the feedback!
  There are many things we’d like to improve, and ideas like that are good to hear.
  
  To be fair, though, Aurora is a test release, somewhere between Beta and Nightly release, so don’t expect everything to work with an experimental release. I specifically made sure that all extensions above work with the latest released official version of Firefox (version 8 at the time of writing).
  
  November 28th, 2011 at 07:37
2. Jan ‘Honza’ Odvarko
  
  > Web Console does not clear the log on page refreshes.
  You can check a “Persist” button in the Firebug Console panel and logs will be persisted across page reloads. The same for the Net panel.
  Honza
  
  November 30th, 2011 at 00:40
elias

Firebug is incompatible with Firefox 8.0.1. Are you serious?

November 28th, 2011 at 05:15
1. Robert Nyman
  
  I can install it from https://addons.mozilla.org/en-US/firefox/addon/firebug/ in Firefox 8.01. If not, you have alternate versions at http://getfirebug.com/
  
  November 28th, 2011 at 07:34
Pierre Bertet

I made this little Firefox addon to validate markup on validator.w3.org: https://addons.mozilla.org/fr/firefox/addon/simple-markup-validator/

It is a good solution if you only use Web Developer for this feature (the code comes from the Web Developer addon).

November 28th, 2011 at 05:53
1. Robert Nyman
  
  Thanks for the tip, I’ll look into it!
  
  November 28th, 2011 at 07:39
Michael Stum

Tilt should definitely be mentioned, it was useful in a few cases of insane layout troubleshooting:

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

November 28th, 2011 at 06:21
1. Robert Nyman
  
  I definitely agree, and will add it right away!
  
  November 28th, 2011 at 07:39
Insano

Firefox comes with lots of developer tools out-of-the-box, but most users are not developers though. Any plans in making these tools an additional install instead?

November 28th, 2011 at 06:29
1. Robert Nyman
  
  The idea is to have the most important tools embedded in the web browser, but additional ones – like all the extensions etc above – are treated just like that. It’s a delicate balance.
  
  November 28th, 2011 at 07:44
cool_guy1

too bad it all runs slow as shit

November 28th, 2011 at 06:47
1. Robert Nyman
  
  Depends on how many extensions you install, your usage and many other factors.
  
  November 28th, 2011 at 07:44
Rey

As already mentioned I truly don’t understand why is there such a push for native dev tools, firebug has, if I may say so, the best usability and features compared to other browser tools (Chrome is next best thing).

If they do want to compete with firebug then please do it right, get the best features + firebug addon features and allow native tools to be modified(make addons, etc.)

November 28th, 2011 at 06:54
1. Robert Nyman
  
  Naturally there is inspiration from Firebug and the Native Tools you see now are the first step. That will be evaluated, and is a constant work in progress, so the next step will be influenced by that.
  
  November 28th, 2011 at 07:45
  1. pd
    
    With respect Robert, I do not see much evidence of Firebug inspiration in the new developer tools thus far. Firstly the UI is completely differently structured. I absolutely hope this is temporary but I would hope that Mozilla’s developers are talented and zippy enough to do releases that are closer to finished than what the new developer tools look like. So I presume there’s two possibilities; the tools are close to what they will look like, or Mozilla’s native tools developers are not quite as good as I’d hope. Which is it? Who said that the HTML viewer had to be some randomly floating pallete/dialog/something? There’s much more Adobe influence in that decision, not Firebug’s nicely placed sub windows. Why make the style viewer a sidebar that crunches the viewport space, along with the console from the top of the viewport as well? Did some bright young spark come along and state the tools have to dictate and hog as much screen/viewport space as is possible, leaving the actual web page looking like a postage stamp? We don’t all develop for the mobile web only. Not all of us as sucked into the narrow columnar design paradigm like every wordpress theme or facebook. They have invented widescreen monitors, after all! Anyway, sorry I’m ranting a bit.
    
    It’s great to see so many people willing to stand up to Mozilla in these comments and tell them how they feel. Mozilla must listen!
    
    November 29th, 2011 at 07:09
    1. Robert Nyman
      
      I can’t comment on the design specifically, but naturally it, as well as the tools themselves, goes through a number of iterations and testing.
      
      November 29th, 2011 at 09:04
    2. Jan ‘Honza’ Odvarko
      
      > I do not see much evidence of Firebug inspiration in the new
      > developer tools thus far.
      Yes, it’s just too soon. Also note that Firebug wants to keep its UI and share rather the backend services/APIs (one exception could be the inspector/highlighter).
      
      Honza
      
      November 30th, 2011 at 00:46
      1. pd
        
        I can understand how Firebug might adopt the new picker’s lightbox effect and it’s local HTML breadcrumb/path/branch speech bubble/door hanger. I guess it would be possible to limit the width of the new structured HTML view, get rid of it’s non-window panel non-title bar and just style it differently for placement inside the Firebug HTML tab. However unless Firebug gets an (IMHO overdue) option to show/hide the RHS section, wide structured HTML views will not be possible.
        
        On this note Jan, is there a core reason why such a feature (show/hide the Firebug RHS section) has never been implemented? If not, if you think it’s something an extension might be able to add to Firebug, I’d be interested in trying to write such an extension. I’m forever dragging the separator left and right to try and view verbose vendorware HTML with duplicate class and id values stretching out the tags.
        
        November 30th, 2011 at 04:32
iii

Yes, FF has an excellent set of dev tools (and not just that), and for long time it was enough to make it my favorite browser. But it was 2 years ago, and since then a lots of things had changed in the browser world. Nowadays I start it only to make sure the pages look ok in it, which is almost always true, and then I quickly switch back to Chrome which I (much) prefer for everyday use. Which is a shame really, as FF was a wonderful browser once…

November 28th, 2011 at 07:29
1. Robert Nyman
  
  I’m glad to hear that you are happy with what you are using. From a constructive perspective, though, would you like to mention what you are missing/like to change in Firefox?
  
  November 28th, 2011 at 07:46
Peter Snow

Funny, it used to be my main browser. I loved it, now I ONLY use it for developing since the latest update doesn’t support my password manager addon any more (I use Kwallet, since I’m on Linux).

Drag and dropping of the tabs on the tab bar seemed to stop working with the same update and my theme disappeared too!

Since they have announced a short release cycle, that scares the heck out of me… I don’t want to have to fix it or live with broken extensions which I was relying on, every few weeks when Mozilla decides to push another update.

What’s even more annoying is that there are rarely any perceivable improvements with each update!

I love the web developer extensions though.

November 28th, 2011 at 07:39
1. Robert Nyman
  
  I don’t know about Kwallet and the tab behavior you are experiencing, but there will definitely be a number of actions that will soon be rolled out to deal with the extension/upgrade problems you are describing.
  
  November 28th, 2011 at 07:47
  1. Peter Snow
    
    That’s encouraging news. Thanks for the Robert. I’ll be staying close waiting for those. :-)
    
    November 28th, 2011 at 07:54
chocho

I don’t understand the need of native dev tools. Not everyone is a developer so why do you want to bundle more stuff when they are not required. Chrome and Webkit have a good reason for doing so. They don’t have the powerful mozilla platform at their disposal. They have no other choice but to provide the feature which btw is not even remotely extensible… it is basic.

Mozilla is not Webkit. It is not even Chrome. It is a lot more than all browser technologies put together. I think that what mozilla should do is to reinvent the browser to the extend it is even simpler then it is now. Less clutter, faster, better code. Everything else should be an extension to the platform. That used to be the mozilla’s way and I am not sure what happend to make every one change their mind. Why is it so important to copy chrome and webkit? By no means they are better.

This is what I think mozilla should do:
1. Clean up the xul of the browser UI. This will make extension development easier.
2. Provide more xbl bindings and other primitives so that developers don’t have to reinvent the same code over and over again when writing extensions. It also makes porting easier.
3. Ship the lowest common dominator of FF, TB and all other mozilla products and let the community take care of the rest. Mozilla has one of the largest dev communities and I don’t see any reason why it shouldn’t take advantage of it.

November 28th, 2011 at 07:42
1. Pierre Bertet
  
  See it as an enhanced “view-source”. Remember, Mozilla’s role is not to make a browser, it is to promote the open web!
  
  November 28th, 2011 at 07:46
2. Robert Nyman
  
  Thanks for your feedback!
  There are a number of reasons we want Firefox to be the best tool for developers for developing in, and we believe that we can help with that by including Native Developer Tools. That said, they will definitely not cover everything, but rather themselves be extensible and offer a platform for the community to build on top on.
  
  November 28th, 2011 at 07:50
  1. chocho
    
    I think that you assume that you could provide a common dev platform built into firefox which will fit everyone. People will still install firebug so I don’t see the point. Besides, what if I don’t want to use Firebug nor the built-in dev tools? What if there is another extension which I find much more useful than both? I know that the built-in dev tools wont prevent me from installing other dev extensions but they just make my life more complex and with the significant overhead of two development environments running at the same time. I honestly don’t see the point and I am one of the supporters which will stand behind firefox no matter which way it goes.
    
    Again, the best way to stay on the top of the game is to make a better browser with better extension technology. But don’t copy chrome. While chrome developers think how to make browsing experience better, I get the feeling that mozilla is spending too much resources thinking how to make firefox look like chrome. Firefox is different and with XUL, XBL and all other technologies it comes with, it is simply no mach to Chrome or Webkit for that matter.
    
    I know that perhaps it is exciting to start everything from scratch. I understand this (i know the drill and the excitement) but please don’t do it at the cost of loosing what has been already working so well.
    
    And I am done :) That’s all I have to say.
    
    November 28th, 2011 at 08:11
    1. Robert Nyman
      
      No worries, we really appreciate you sharing! :-)
      I don’t think there will ever be one developer platform that suits everyone. The Native Developer Tools is rather about giving people choice, and also, just like you want, a good base for people to build on top of and extend the web browser with as well. Further beyond that is Jetpack which is also aimed at making it easier to extend the web browser.
      
      November 28th, 2011 at 12:20
  2. pd
    
    It’s great to hear the tools will be available to extension writers. However will this be in the relatively shallow form of a Jetpack API or a deeper form of old school XUL-based extensions?
    
    November 29th, 2011 at 07:13
    1. Robert Nyman
      
      Not sure at this time of writing, but my guess would be exposed APIs rather than a XUL-based approach.
      
      November 29th, 2011 at 09:02
Gtricks

Wow, such a great list for designers and for developers. This is why I love firefox more than chrome.

November 28th, 2011 at 08:56
1. Robert Nyman
  
  Thanks, glad that you liked it!
  
  November 28th, 2011 at 12:20
Paul Lammertsma

If you’re a web developer, I find TryAgain very nifty to let Firefox automatically keep reloading a (still compiling) webpage until it actually shows up. This is especially useful for ASP.NET developers.

November 28th, 2011 at 09:37
1. Robert Nyman
  
  Thanks, just added it!
  
  November 28th, 2011 at 12:31
cancel bubble

Great list here, which I’ve bookmarked.

I’d like to give a shout out to Fireshot (https://addons.mozilla.org/en-US/firefox/addon/fireshot/), which takes a screenshot of the *entire* web page, even if it’s 4,000 pixels tall. I find this quite handy.

November 28th, 2011 at 11:07
1. Robert Nyman
  
  Thanks for the tip!
  I did actually look into that, but it was only available for Windows and I wanted this list to be options for all platforms, so I ruled it out on that.
  
  Maybe I should reconsider.
  
  November 28th, 2011 at 12:36
ElbertF

I humbly submit Wappalyzer to this list:

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

November 28th, 2011 at 18:14
1. Robert Nyman
  
  Thanks, added it to the list!
  
  November 29th, 2011 at 00:17
Philip

@Robert Nyman – Great list! thanks a lot!

November 29th, 2011 at 04:34
1. Robert Nyman
  
  Thanks, glad you like it!
  
  November 29th, 2011 at 05:17
pd

I should say, to be objective, that the new inspector’s efficiency does seem very encouraging. If Firebug could integrate that without losing any related functionality, that’s looks like a huge win. I’m not sure however about the ‘lightbox’ styling. At first it really does help to highlight the element. However I doubt it would work well on a site with a dark colour scheme. What do others think? Maybe there could be some sort of simple option (caps lock) to invert the colour of the semi-opaque effect around the hovered/selected element? Additionally it would be handy, maybe this is one for extension writers, to be able to modify the opacity.

I really don’t like the HTML viewer’s UI though and the Inspector and the HTML tree are pretty much hand in hand. The UI provides a lot of width for viewing bloated code which is great. It’s annoying that Firebug’s RHS section cannot be temporarily disabled for this purpose. However that should be a simple adjustment to the otherwise fine Firebug UI, rather than going with the completely floating non-window that the initial native HTML UI has opted for. Suggestion: create a mode whereby all the new native tools UI can be organised identically to Firebug with the addition of an ability to hide the Firebug RHS panel (the bit where the Style, Computed, DOM and Layout tabs live).

As for the sidebar, I just do not understand that at all. Please stick to the Firebug simplicity of Style, Computer and DOM tabs.

November 29th, 2011 at 07:28
1. Robert Nyman
  
  Thanks for your suggestions.
  
  November 29th, 2011 at 09:01
Rahul

Hi Robert

I want to submit, this add on to the list, take a look robert

friendly bug 1.8.0 used with firebug

and thank you for the compilation..it helped me a lot

November 29th, 2011 at 07:50
1. Robert Nyman
  
  Good suggestion, I added it!
  
  November 29th, 2011 at 08:59
James

wow, this is probably one of the most comprehensive list of tools ive seen in a long time. Great posts!

November 29th, 2011 at 08:36
1. Robert Nyman
  
  Thank you!
  
  November 29th, 2011 at 08:59
Caitanya Dasi

Please Help me! I thought I was creating a blog page, and used Firebug. However, this did not happen (doesn’t matter); instead the page layout for my email and facebook is now the layout for what I thought was a blog page.
It is driving me crazy, as there is a huge 2″ black margin at the top of the page, and everything is sort of scrunched up. How do I undo this layout?
Yes, I am a dummy, and did not know what I was doing. Thank you.

December 5th, 2011 at 09:03
1. Robert Nyman
  
  With Firebug you only change the layout and other things of the web page you have loaded in your own web browser for testing purposes. Those changes are only available to you, and if you reload the page they will be gone.
  
  December 5th, 2011 at 09:27
mogly

Phoenix is missing in your list.

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

An editor with real time syntax highlighting which allows edit, run and test CSS, HTML and JavaScript code. Phoenix will tell you how many CSS and JS files are loaded into a page, how big these are, it will let you edit, pack and de-obfuscate them.

Great addon.

December 15th, 2011 at 07:55
1. Robert Nyman
  
  Great, thanks for the tip!
  
  December 15th, 2011 at 11:13
Isuru Nanayakkara

awesome post! I recently took up web developing and this is really helpful! Thanks.

January 22nd, 2012 at 04:07
1. Robert Nyman
  
  Good to hear!
  
  February 20th, 2012 at 01:42
Hasitha

Awesome list of addons. Firefox is the best browser for web designers.

February 19th, 2012 at 09:05
1. Robert Nyman
  
  Thank you – glad you like it!
  
  February 20th, 2012 at 01:42
Bankruptcy lawyer

Does anybody know for a plugin that you can detect a page rank of a site in a toolbar? Latest version of firefox does not have this possibility as had some earlier versions…

February 20th, 2012 at 12:14
1. Robert Nyman
  
  Not off the bat, no – a few match the description but not sure which one are working accordingly.
  
  February 20th, 2012 at 12:19
Ajnabii

Nice list of firefox tools for developers. SEOQuake and FireFTP are my Fav.

Thanks.

March 24th, 2012 at 12:46
1. Robert Nyman
  
  Thanks, glad you have some favorites!
  
  May 16th, 2012 at 05:32
Manish

I’ve written css stylesheet for all my websites and projects directly in Firebug and I can’t imagine myself developing itself without it.

May 11th, 2012 at 23:29
1. Robert Nyman
  
  Glad you like Firebug! Please also test the native Developer Tools in Firefox and see what you think.
  
  May 16th, 2012 at 05:33
aliabaci

i want firefox for nokia and symbian s60^3.

July 9th, 2012 at 00:23
1. Robert Nyman
  
  That would be nice, but for the moment there are no immediate plans for that.
  
  August 15th, 2012 at 01:13
ashish

thx for css and php add on these are very helpful for me.

August 14th, 2012 at 23:11
1. Robert Nyman
  
  Thanks, glad you liked them!
  
  August 15th, 2012 at 01:12

Comments are closed for this article.

Firefox – tons of tools for web developers!

By Robert Nyman [Editor emeritus]

Native developer tools in Firefox

Firebug

Firefox extensions for web developers

Firebug extensions

About Robert Nyman [Editor emeritus]

Discover great resources for web development

Thanks! Please check your inbox to confirm your subscription.