Firefox Developer Tool vs Firebug

- Development, Firefox, Firefox OS, No category

With the release of Firebug 2.0 is now to reflect on the developer tools available on Mozilla Firefox and make a report.

Using both development tool integrated natively in the browser Mozilla, that the tools made ​​available dall’addon Firebug, so with this article (and its updates), I will present a brief comparison of the pros and cons of the two basic solutions (the extensions will be listed but not compared).

In a few words of your own in the comments to improve this comparison!

firebug-logo

Updates: There are very frequent, and often introduce small innovations are often independent of the version of Firefox

Extensions: There are many extensions and by the time some have been integrated as Firecookie or EventBug.
I use:

  • FireStorage Plus! to manage localStorage
  • FirePicker for the color picker (they have never wanted to integrate, I created a ticket specific)
  • FireQuery adds a more advanced support for jQuery
  • FireRainbow (no longer necessary with the 2)
  • Page Speed ​​and YSlow for the speed test and on-page optimization
  • AceBug adds support for CoffeeScript in the console and many other things.

Native modules: Console, HTML, CSS, Script, DOM, Net, Resource, Cookie

Unique Features of interest: Firebug Lite is a subset of Firebug and uses the API available in all browsers (eg Internet Explorer) and is available as a separate JavaScript file

Pro:

  • Analysis of events (with the integration of EventBug)
  • Analysis of cookies (with the integration of FireCookie)
  • Better autocomplete (for example width in place of widows when you have typed wid)
  • Features enabled directly when the page loads by default
  • Better display of Ajax requests (on Firebug console only appear in Ajax requests, all requests on Firefox Get / Post page then also downloading images)

Meet-the-Firefox-OS-Mascot-a-Fox-That-s-on-Fire

Updates: Updates in every release of Firefox, and you can try them with the Nightly before public release

Extensions: Actually only the extension of EmberJS, AngularJS, Grunt, DevTools Prototyper and FireQuery 2 Beta 5

Native Modules: Console, Inspector (HTML), Style Editor (CSS), Debugger (Script), Network, Profiler, Canvas editor, Shader Editor, ScratchPad, 3D View, Web Audio Editor, Eye Dropper (Color Picker), Responsive View

Unique Features of interest: the profiler allows you to generate reports on the real time spent by the interpreter in the individual functions by analyzing and collecting statistics on calls, viewing/editing of html comments in the inspector, you can debug extensions and Firefox, tools Canvas Editor/Shader Editor/3D View/View Responsive Web/Audio Editor are truly unique, in the inspector if the rule is an average querie will be shown on the same

Pro:

  • Speed
  • Integrated with WebIDE
  • Supports Sourcemap of Sass, Less and CoffeeScript
  • Supports the writing style of Vim, Emacs or Sublime Text
  • Allows saving files
  • Built-in color picker
  • Total report of font loaded from the page with the rules
  • Ability to take screenshots of the page
  • Simulating touch events
  • Debug a single iframe
  • ScartchPad
  • Events analysis native
  • ScreenShot
  • 3D View
  • Ruler

As you can see from this list the features are different.

Report

Firebug: some functionality is still unmatched, thanks to the many extensions are already present. Configuration is not advanced but at the same time is very flexible.

Developer Tool Integrated: they are integrated in the app manager enabling use via remote debugging (which is becoming a WebIDE integrated into Firefox Nightly), supports remote debugging on Firefox OS and Android devices (via Firefox for Android), offer more tools details do not exist in other solutions (Canvas, Profiler, Web Audio Editor), a simple interface.

The Developer Tools built into Firefox have not yet completely covered the features available in Firebug, however they have already done a lot of road and have several original ideas. At the moment the combined use of both is ideal.

I currently use the native primarily to make this switch gradually.
Detail to remember is that the development team of both exchange ideas and code to improve each other.

This comparison is based on my experience and knowledge so there may be some gaps, if you want to add something well write a comment!

If you want to have your say on development tools for Firefox, has recently been opened this portal.

Tricks: Either you can search, in the inspector, using CSS selectors

PS: this article not contain a comparison with the Chrom* tools because diligently I could not make a good comparison.

Would like to thank Luca Greco (volunteer contributor within the Firefox Developer Tools and the author of the port of Firefox development extensions “EmberJS Inspector” and “AngularJS Batarang”) for corrections and clarifications.

24/06/2015

Few updates

06/16/2014

Added in the unique differences of the native tools display the average querie

10/22/2014

Added the iframe debugging and Profiler

All the stuff released in this website, where the author is Daniele Scasciafratte, is under the GPL 2.0 license except when the resources have their licenses.

Leave a Reply