Firebug & DevTools Integration

You might have already heard about our effort to unify native Firefox Developer tools (DevTools) and Firebug. We’ve been working hard to port all favorite Firebug features into native DevTools, make them multi-process compatible, and available for remote debugging (i.e., e10s compatible). We’ve been also working hard to make the transition path from Firebug to DevTools as simple and smooth as possible. Yes, as we’ve mentioned before, we’re focused on developing one great tool for developers!

So, let’s see how it looks now.

The main goal of next-generation Firebug is to help users feel at home when working with native DevTools. This is where Firebug 3 (aka Firebug.next) comes in. Firebug 3 is not another developer tool, it is rather a thin layer built on top of DevTools, providing a new theme that makes DevTools look like Firebug. There are also a few additional features, that we’ll port into DevTools step by step.

If you are missing any features (e.g. some of those you’ve been using in previous versions of Firebug), you should expect them to be part of DevTools in the future.

Firebug 3

Take a look at the screenshot below showing what DevTools look like if you install Firebug 3 (first beta). Does this look familiar?

Firebug 3 (aka Firebug.next)

Firebug 3 (aka Firebug.next) isn’t distributed through AMO yet, so you might need to set the xpinstall.signatures.required preference (through about:config) to false.

It’s the Firebug theme ported into DevTools to bring some UI and layout advantages. There is also the well-known Firebug start button in the Firefox toolbar, which represents the entry point to the developer toolbox.

See, the Firebug Theme option is currently active.

Firebug Start Button

The process for entering your handy tools is exactly the same: you can either press the start button or the F12 key.

You might be a fan of the DOM panel used to inspect the document object model of the page you’re on. It isn’t supported natively (yet) and so, Firebug offers it to you.

DOM panel

XHR previews in the Console panel (requested many times) are also supported.

XHR Previews

Some of the most popular extensions have been re-implemented on top of DevTools. Not only does this keep popular features alive, these implementations also provide great examples of how you can make new extensions directly for DevTools. Firebug isn’t required to run these extensions.

If you are an extension developer you might be interested in some examples and links to other resources helping to understand how to extend DevTools.

Let’s see what extensions are available.

FireQuery extension

FireQuery is a Firefox plugin for jQuery development built on top of DevTools in Firefox. Firebug 3 isn’t required, but some of the screenshots below show DevTools with the Firebug theme activated (the other themes, Light and Dark, are also supported).

Elements with jQuery data associated display a little envelope icon in the Console panel. You can inspect it by clicking on the icon. There is also a jQuerify button in the Console panel toolbar and you can use it to load jQuery into the current page.

FireQuery extension

The Inspector panel also displays the envelope icon for elements with jQuery data. Clicking the icon opens a popup with details.

FireQuery Inspector panel

PixelPerfect extension

Pixel Perfect is a Firefox extension that allows web developers and designers to easily overlay a web composition with semi-transparent layers (images). These layers can then be used for per pixel comparison between the page and a layer.

There is a Pixel Perfect start button allowing quick access to this feature.

PixelPerfect Start Button

And here is the final Pixel Perfect UI that you can open by clicking on the button above.

PixelPerfect UI

HAR export

Support for exporting HAR (the HTTP Archive format) from the Network panel is now a built-in feature and you don’t need an extension for it. All you need to do is select the Network panel (reload the page if necessary) and use two context menu actions:

  • Copy All As HAR: copy collected data into the clipboard.
  • Save All As HAR: save collected data into a file.

Exporting data from the Network panel is often automated (e.g. when testing web applications using Selenium). If you want to create a HAR file automatically for every loaded page you need to set the following preference (use about:config) to true:

devtools.netmonitor.har.enableAutoExportToFile

Some automated systems need more flexibility than just creating a HAR file after every page load. Sometimes you need to send data to a remote server, collect and export HAR between two specific user actions, etc. That’s why we’ve introduced a simple HARExportTrigger extension that improves automation by exporting HAR API into the page content. This allows you to use small script to trigger HAR at any time.

Here is an example script that gets HAR data from the Network panel:

var options = {
  token: "test",
  getData: true,
};

HAR.triggerExport(options).then(result => {
  console.log(result.data);
});

Using console.* APIs on the server

The Firebug community has implemented many extensions that allow developers to use console.* APIs on the (HTTP) server side, so you can see your backend logs right in the browser. This feature is now natively supported in Firefox and you don’t need to install an additional extension.

All you need to do is enable logs coming from the server inside the Console panel.

Server side logging

This feature supports an existing protocol (used in Chrome Logger) that sends logs through HTTP headers to the client. Logs are consequently displayed in the Console panel as if they had been generated by JavaScript on the page. There are many server-side libraries that provide the appropriate server side API in various languages (NodeJS, Ruby, Python, PHP, .NET, Java, etc.)

Here is an example of server side logging:

var chromelogger = require('chromelogger');
var http = require('http');
var server = http.createServer();

server.on('request', chromelogger.middleware);
server.on('request', function(req, res) {
  res.chrome.log('Hello from Node.js %s', process.version);
  res.end();
});

server.listen(7357);

And here is what the server-side log looks like in the Console panel:

Server log

Final words

As I mentioned at the beginning of the article, we are trying to unify native Firefox Developer tools (DevTools) and Firebug since we believe that this is an effective strategy for delivering great tools for web developers. There is more yet to come, but this post should give you an overview of our plan and where we are heading. Stay tuned!

Please post feedback in the Firebug group, thanks.

Jan ‘Honza’ Odvarko

About Jan Honza Odvarko

Firebug Team Leader

More articles by Jan Honza Odvarko…


7 comments

  1. Thomas

    Congratulations on the release and all the good work!
    Seems like we can inspect all kinds of requests in the Console, not only XHR. I love it!

    October 28th, 2015 at 13:28

    1. Jan Honza Odvarko

      Yes, the inspection is enabled for all HTTP requests in the Console for now. We are collecting feedback at this point and if it’s positive we might keep it that way.

      October 28th, 2015 at 23:52

  2. Jeffrey Jose

    Congratulations! You guys at Mozilla are a true inspiration. Talk about commitment to a cause.

    October 28th, 2015 at 21:43

  3. Sebastian Zartner

    Congrats to the Firebug team on paving the way to a new era of development tools!

    October 29th, 2015 at 04:51

  4. xpete

    Great work but…
    I’am a web developer and I use Firebug and DevTools a lot but I think it should be removed from Firefox and released as an extension or merged with Firebug.
    Most firefox joe users don’t need it and I already saw a user panic when he opened DevTools by mistake he didn’t knew what it was and how to close it.
    I remember when Phoenix/Firebird/Firefox what created to be a version of Mozilla without the non essential extras.

    October 29th, 2015 at 18:12

  5. jeff

    On the whole, Firebug is an amazing package of utilities, and I have absolutely nothing but high praise for Honza and any others who have worked on it. If I used nothing else but the javascript debugger and the inspector it would still be worth the price of admission, 10x over.

    BUT… my $0.02. I spend most of my time in the debugger, inspector, and console. Changes in established functionality here are the most “painful”. Some of the items below are probably forthcoming as you guys move through the beta process, but other seem to be a result of Firefox’s dev tools. These are the ones I’ve encountered testing Firebug 3 that are annoying enough to keep me on FB 2.X for until they’re fixed.

    1) debugger search. egads. what hath thou wrought? #linenumber is engraved in my fingerprints. Finding something in the *current* file now needs a prefix (excuse me…”operator”)? What is that operator again? oh, wait, you can’t see the prefixes unless the search box is empty.

    2) Navigation in a file when debugging a script. Wherefore art thou ctrl-home and ctrl-end?

    3) Watch-be-gone. Oh, wait, not gone, just hidden by default. And apparently can’t be unhidden by default. The same applies for the multi-line command window on the Console tab.

    4) breakpoints. Boy, those can really mess up the list of available files, can’t they. And, removing all of them? nuh, uh. Not unless you happen to right-click in the magic spot.

    5) Also apparently MIA – remembering the source file you had open the last time you opened the debug window on this page.

    6) Inspector Box Model tab – can not edit the height/width of the inspected item. Everything else, but not h&w.

    7) Back in high school you’d never hear me say this, but “I miss history”. Especially in the form of the Console Command Editor History menu.

    But maybe that’s just me.

    November 2nd, 2015 at 12:12

    1. Jan Honza Odvarko

      This is great list of requirements Jeff! All these features should be fixed/implemented in built-in developer tools (not Firebug) and the best way how to make that happen is to file new tickets in Bugzilla.

      Here is a link:
      https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools

      Bugzilla is the best place for this kind of feedback, otherwise it can easily be forgotten here in the wild.

      Honza

      November 3rd, 2015 at 08:56

Comments are closed for this article.