Firefox Developer Tools and Firebug

If you haven’t tried the Firefox Developer Tools in the last 6 months, you owe it to yourself to take another look. Grab the latest Aurora browser, and start up the tools from the Web Developer menu (a submenu of Tools on some platforms).

The tools have improved a lot lately: black-boxing lets you treat sources as system libraries that won’t distract your debugging flow. Source maps let you debug source generated by transpilers or minimizers. The inspector has paint flashing, a new font panel, and a greatly improved style inspector with tab completion and pseudo-elements. The network monitor helps you debug your network activity. The list goes on, and you can read more about recent developments in our series of Aurora Posts.

After getting to know the tools, start the App Manager. Install the Firefox OS Simulator to see how your app will behave on a device. If you have a Firefox OS device running the latest 1.2 nightlies, you can connect the tools directly to the phone.

Why The Built-in Tools?

The Web owes a lot to Firebug. For a long time, Firebug was the best game in town. It introduced the world to visual highlighting of the DOM, inplace editing of styles, and the console API.

Before the release of Firefox 4 we decided that Firefox needed a set of high-quality built-in tools. Baking them into the browser let us take advantage of the existing Mozilla community and infrastructure, and building in mozilla-central makes a huge difference when working with Gecko and Spidermonkey developers. We had ambitious platform changes planned: The JSD API that Firebug uses to debug Javascript had aged badly, and we wanted to co-evolve the tools alongside a new Spidermonkey Debugger API.

We thought long and hard about including Firebug wholesale and considered several approaches to integrating it. An early prototype of the Inspector even included a significant portion of Firebug. Ultimately, integration proved to be too challenging and would have required rewrites that would have been equivalent to starting over.

How is Firebug Doing?

Firebug isn’t standing still. The Firebug Working Group continues to improve it, as you can see in their latest 1.12 release. Firebug is working hard to move from JSD to the new Debugger API, to reap the performance and stability benefits we added for the Firefox Developer Tools.

After that? Jan Odvarko, the Firebug project leader, had this to say:

Firebug has always been maintained rather as an independent project outside of existing processes and Firefox environment while DevTools is a Mozilla in-house project using standard procedures. Note that the Firebug goal has historically been to complement Firefox features and not compete with them (Firebug is an extension after all) and we want to keep this direction by making Firebug a unique tool.

Everyone wants to figure out the best way for Firebug’s community of users, developers, and extension authors to shape and complement the Firefox Developer Tools. The Firebug team is actively discussing their strategy here, but hasn’t decided how they want to accomplish that.

Follow the Firebug blog and @firebugnews account to get involved.

What’s Next for Firefox Developer Tools?

We have more exciting stuff coming down the pipe. Some of this will be new feature work, including great performance analysis and WebGL tools. Much of it will be responding to feedback, especially from developers giving the tools a first try.

We also want to find out what you can add to the tools. Recently the Ember.js Chrome Extension was ported to Firefox Developer Tools as a Sunday hack, but we know there are more ideas out there. Like most Firefox code you can usually find a way to do what you want, but we’re also working to define and publish a Developer Tools API. We want to help developers build high quality, performant developer tools extensions. We’d love to hear from developers writing extensions for Firebug or Chrome Devtools about how to best go about that.

Otherwise, keep following the Hacks blog to learn more about how the Firefox Developer Tools are evolving. Join in at the dev-developer-tools mailing list, the @FirefoxDevTools Twitter account, or #devtools on irc.mozilla.org.

View full post on Mozilla Hacks – the Web developer blog

Tagged on: , , ,

20 thoughts on “Firefox Developer Tools and Firebug

  1. fbender

    There’s a light theme coming up, and I suspect you can also create your own theme. Try the Dev Tools once in a while, they’re always improving (you may want to check out the Aurora version that’s always 2 versions ahead and pretty stable).

  2. fbender

    Did you check the latest version (try Aurora, it has the latest almost-stable stuff!)? If you miss something, please file a bug!

  3. fbender

    Try the Dev Tools once in a while, they’re only getting better and better.

    Also, no transitions or effects or slowness wherever I check. If you experience problems, please file a bug at bugzilla.mozilla.org!

  4. fbender

    Also, adding new stuff to Firefox should never slow it down (per decree) so you should not worry about Firefox getting slower because of Dev Tools (the logic is mostly lazy-loaded).

  5. fbender

    There’s a light theme coming up for the Dev Tools. I believe you can also create your own style for the Dev Tools, like you can theme the rest of Firefox.

    For the default however, it would never make sense to adopt the Firebug layout. The Firefox Dev Tools are something entirely different from Firebug (except for the stuff they work with).

    You should have a look at the Dev Tools once in a while to see how they evolve, and file bugs for the stuff you’re missing (at bugzilla.mozilla.org).

  6. fbender

    Please file a bug with the dev tools component in bugzilla.mozilla.org (you may file a general Firefox bug and it will be moved to the correct component). That way your request won’t get lost!

  7. Florent

    Hi Brian,

    Check that option only when you need it. And be careful that, when you don’t need it anymore, you uncheck it (even if you disable the Net panel or Firebug, because the option remains active).

    Florent

  8. Kep

    I completely agree. Something as trivial as moving the DOM element selector button from where Firebug’s is located is very annoying.

    I’ve been using Firefox only because of Firebug to so many years. At some point, if Firebug’s performance or utility lags behind such that I need to switch console tools, I’ll switch to Chrome for the bulk of my development. Unless Firefox allows me to move that button…

  9. Panos Astithas

    You can switch between the default dark and a light theme by going to the options panel in the toolbox (the tab on the left with a gear icon) and selecting “Light theme”.

  10. BrianMB

    Yes! F12 Tools’ (IE) analogous feature also operates per-tab, so it’s not an entirely foreign workflow to me.

  11. Dave Camp

    Event handlers attached to a given element should happen soon (all the plumbling is there, it just needs a UI).

  12. Dave Camp

    There’s a small search field with id and class autocompletion in the upper-right hand corner of the inspector toolbar, does that do what you’re looking for?

  13. Skoua

    If this is a place where we can ask for new features, I’d love to have IPs displayed in the network panel.

  14. Mike Ratcliffe

    – autocompletion of css properties
    – This is already available
    – edit as HTML, as chrome does
    – We are working on it
    – images URL (html and css) should be clickable and automatically opened in a new tab, as chrome does
    – We are working on it

Leave a Reply