Firebug Articles

Sort by:


  1. Firebug 3 & Multiprocess Firefox (e10s)

    Firebug 3 alpha was announced couple of weeks ago. This version represents the next generation of Firebug built on top of Firefox native developer tools.

    There are several reasons why having Firebug built on top of native developer tools in Firefox is an advantage — one of them is tight integration with the existing platform. This direction allows simple use of available platform components. This is important especially for upcoming multiprocess support in Firefox (also called Electrolysis or E10S).

    From wiki:

    The goal of the Electrolysis project (“e10s” for short) is to run web content in a separate process from Firefox itself. The two major advantages of this model are security and performance.

    The e10s project introduces a great leap ahead in terms of security and performance, as well as putting more emphasis on the internal architecture of add-ons. The main challenge (for many extensions) is solving communication problems between processes. The add-on’s code will run in a different process (browser chrome process) from web page content (page content process) — see the diagram below. Every time an extension needs to access the web page it must use one of the available inter-process communication channels (e.g. message manager or remote debugging protocol). Direct access is no longer possible. This often means that many of the existing synchronous APIs will turn into asynchronous APIs.

    Developer tools, including Firebug, deal with the content in many ways. Tools usually collect a large amount of (meta) data about the debugged page and present it to the user. Various CSS and DOM inspectors not only display internal content data, but also allow the user to edit them and see live changes. All these features require heavy interaction between a tool and the page content.

    So Firebug, built on top of the existing developer tools infrastructure that already ensures basic interaction with the debugged page, allows us to focus more on new features and user experience.

    Firebug Compatibility

    Firebug 2.0 is compatible with Firefox 30 – 36 and will support upcoming non-multiprocess browsers (as well as the recently announced browser for developers).

    Firebug 3.0 alpha (aka is currently compatible with Firefox 35 – 36 and will support upcoming multiprocess (as well as non-multiprocess) browsers.

    Upgrade From Firebug 2

    If you install Firebug 2 into a multiprocess (e10s) enabled browser, you’ll be prompted to upgrade to Firebug 3 or switch off the multiprocess support.

    Learn more…

    Upgrade to Firebug 3 is definitely the recommended option. You might miss some features from Firebug 2 in Firebug 3 (it’s still in alpha phase) like Firebug extensions, but this is the right time to provide feedback and let us know what the priority features are for you.

    You can follow us on Twitter to be updated.

    Leave a comment here or on the Firebug newsgroup.

    Jan ‘Honza’ Odvarko

  2. 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

  3. Firebug 1.12 New Features

    Firebug team released fresh new Firebug 1.12 and here is a list of some new features we have implemented in this version.

    • Firebug 1.12 is compatible with Firefox 23 – 26

    Firebug is an open source project maintained by developers from around the world and I can’t miss this opportunity to introduce all members who contributed to Firebug 1.12

    • Jan Odvarko
    • Sebastian Zartner
    • Simon Lindholm
    • Farshid Beheshti
    • Steven Roussey
    • Florent Fayolle
    • Awad Mackie
    • Belakhdar Abdeldjalil
    • Thomas Andersen
    • Hisateru Tanaka

    New Features

    Copy CSS Properties

    Copying CSS properties into the clipboard has never been easier. It is now possible to copy individual CSS properties or rules or entire styles into the clipboard. Just right click on the part you want to copy. See detailed description of this feature.


    New Net Panel Filters

    The old Flash filter has been renamed to Plugins and covers Flash as well as Silverlight HTTP requests. There is also a new filter labeled Fonts that is used to see HTTP requests for custom fonts only (font/ttf or font/woff mime-types).


    Use filter button tooltip to see detailed info about filtered files.

    Filter for DOM Events Log

    This feature allows to filter DOM event logging that is set for specific element. The next screenshot shows related user interface. There is a new submenu that allows to pick what events should be logged for selected element.


    You can also help us improve the UI/UX of this feature.

    Autocompletion Popup Improved

    Autocompletion popup window that is available on Firebug Command Line (within the Console panel) has improved its design and it also offers built-in command line API.


    Note that the bottom section of the popup window offers Firebug Command Line API.

    Use in Command Line

    This feature allows referring various page objects (HTML elements, JS objects, network requests, cookies, etc.) from the command line using new $p variable. The $p variable can also be used within command line expressions.


    See detailed description of this feature.

    Group Console Messages

    Console messages are grouped now in case the messages appear multiple times consecutively. This feature can dramatically decrease number of logs and make the entire logging easier!


    Better Infotip for HTTP Request Timings

    The tooltip for individual HTTP requests displayed in the Net panel has been improved. It displays all phases of the current request as a little waterfall graph. It’s now a lot easier to understand the timing.


    Multiple Filters for Console & Net Panel

    The Console and Net panels support selection of multiple filters at the same time. Just hold down Ctrl key when clicking the filter buttons. This allows to see e.g. only Errors and Warnings in the Console panel or e.g. only HTML, CSS and JS files in the Net panel. See the screenshot.


    Toggle Visibility of Side Panels

    You can now toggle visibility of side-panels. The state is persistent across Firefox restarts. See couple of screenshots.


    If you don’t need the Selectors side panel you can keep it hidden.


    Store the result of the last command line evaluation in $_

    Firebug implements a new variable available in the Command Line: $_. This variable stores the result of the previous expression evaluation (compatible with Chrome dev tools).


    New command: getEventListeners()

    Firebug implements a new Command Line command: getEventListeners(). This command returns the event listeners registered on a given object. The object is usually an element, but it can also be e.g. a window.


    After you execute the command on the Command Line you can further inspect the return object in the DOM panel. See the following screenshot.


    Copy as cURL

    It is possible to create cURL command from a network request in order to test the request from the terminal window. Just right click on a request in the Net panel and pick Copy as cURL.


    Precision for Console API %f log pattern

    Floats can be rounded by using the %.xf pattern inside the first console.log() argument. Here x denotes the number of decimal places the number should be rounded to.

    console.log("amount: %.2f", 4.3852)
    will output
    amount: 4.39


    You may want to get to know about the other patterns available inside the Console API.

    Show/hide stack arguments

    Stack frames displayed in the Stack panel can be sometimes unusable due to a long list of arguments and so, Firebug introduced a new option Show Arguments allowing to show/hide them.


    CSS Panel Improvements

    Firebug introduces several improvements for the CSS panel. A lot more CSS information is now available.

    • @page rules are displayed
    • files with @media elements are displayed
    • @keyframes rules are now displayed
    • @-moz-document rules are displayed


    There is a lot more new enhancements and you can see the entire list in our release notes. You can also see the official announcement on

    Follow us on Twitter to be updated!

    Jan ‘Honza’ Odvarko

  4. Firebug 1.11 New Features

    Firebug 1.11 has been released and so, let’s take a look at some of the new features introduced in this version.


    First of all, check out the following compatibility table:

    • Firebug 1.10 with Firefox 13.0 – 17.0
    • Firebug 1.11 with Firefox 17.0 – 20.0

    Firebug 1.11 is open source project surrounded by contributors and volunteers and so, let me also introduce all developers who contributed to Firebug 1.11

    • Jan Odvarko
    • Sebastian Zartner
    • Simon Lindholm
    • Florent Fayolle
    • Steven Roussey
    • Farshid Beheshti
    • Harutyun Amirjanyan
    • Bharath Thiruveedula
    • Nikhil Verma
    • Antanas Arvasevicius
    • Chris Coulson

    New Features

    SPDY Support

    Are you optimizing your page and using SPDY protocol? Cool, the Net panel is now indicating whether the protocol is in action.

    Performance Timing Visualization

    Another feature related to page load performance. If you are analyzing performance-timing you can simply log the timing data into the Console panel and check out nice interactive graph presenting all information graphically.

    Just execute the following expression on Firebug’s Command Line:


    Read detailed description of this feature.

    CSS Query Selector Tool

    Firebug offers new side panel (available in the CSS panel) that allows quick execution of CSS selectors. You can either insert your own CSS Selector or get list of matching elements for an existing selector.

    In order to see list of matching elements for an existing CSS rule, just right click on the rule and pick Get Matching Elements menu item. The list of elements (together with the CSS selector) will be displayed in the side panel.

    New include() command

    Firebug supports a new command called include(). This command can be executed on the Command Line and used to include a JavaScript file into the current page.

    The simplest usage looks as follows:

    If you are often including the same script (e.g. jqueryfying your page), you can create an alias.
    include("", "jquery");

    And use the alias as follow:

    In order to see list of all defined aliases, type: include(). Note, that aliases are persistent across Firefox restarts.

    Read detailed description of this command on Firebug wiki.

    Observing window.postMessage()

    Firebug improves the way how message events, those generated by window.postMessage() method, are displayed in the Console panel.

    The log now displays:

    • origin window/iframe URL
    • data associated with the message
    • target window/iframe object

    See detailed explanation of the feature.

    Copy & Paste HTML

    It’s now possible to quickly clone entire parts of HTML markup by Copy & Paste. Copy HTML action has been available for some time, but Paste HTML is new. Note that XML and SVG Copy & Paste is also supported!

    See detailed explanation of the feature.

    Styled Logging

    The way how console logs can be styled using custom CSS (%c formatting variable) has been enhanced. You can now use more style formatters in one log.

    console.log("%cred-text %cgreen-text", "color:red", "color:green");

    See detailed explanation of this feature.

    Log Function Calls

    Log Function Calls feature has been improved and it also shows the current stack trace of the place where monitored function is executed.

    See detailed explanation of this feature.

    Improved $() and $$() commands

    Firebug also improves existing commands for querying DOM elements.

    $() command uses querySelector()
    $$() command uses querySelectorAll()

    It also means that the argument passed in must be CSS selector.

    So, for example, if you need to get an element with ID equal to “content” you need to use # character.


    If you forget, Firebug will nicely warn you :-)

    Autocompletion for built-in properties

    The Command Line supports auto-completion even for built-in members of String.prototype or Object.prototype and other objects.

    There are many other improvements and you can see the entire list in our release notes. You can also see the official announcement on

    Follow us on Twitter to be updated!

    Jan ‘Honza’ Odvarko

  5. Firebug 1.10 New Features

    Firebug 1.10 has been released and so, let’s see what new features are introduced in this version.


    First of all, check out the compatibility table:

    • Firefox 5.0 – 13.0 with Firebug 1.9
    • Firefox 13.0 – 16.0 with Firebug 1.10

    Firebug 1.10 is true community achievement and so, let me also introduce all developers who contributed to Firebug 1.10

    • Jan Odvarko
    • Sebastian Zartner
    • Simon Lindholm
    • Harutyun Amirjanyan
    • Steven Roussey
    • Joe Walker
    • Stampolidis Anastasios
    • Heather Arthur
    • Farshid Beheshti
    • Leon Sorokin
    • Florent Fayolle
    • Vladimir Zhuravlev
    • Hector Zhao
    • Bharath Thiruveedula
    • Nathan Mische

    New Features

    • Bootstrapped Installation
    • Delayed Load
    • Cookie Management
    • Command Editor Syntax Highlighting
    • Autocompletion
    • Trace Styles
    • New Command: help
    • Link to Web-font Declaration
    • Support For Media Queries
    • Displayed Entities Format
    • Displayed Color Format
    • Tooltips for Menu Items
    • Support for “focus” CSS pseudo class
    • HTTP Requests From BFCache
    • Delete CSS Rule

    Bootstrapped Installation

    Firebug installation doesn’t require browser restart. Install, press F12 and Firebug is immediately ready at your fingertips.

    If you are updating the previous 1.9 version that require restart you need to restart the browser.

    Delayed Load

    Firebug doesn’t slow down Firefox start-up time anymore! It’s loaded as soon as the user actually needs it for the first time. Only the Firebug start-button and menu is loaded at the start up time.

    Cookie Management

    Firebug allows to view and manage cookies in your browser. You can deny cookies for specific sites, filter cookies, create new and delete existing cookies. You can also break into the debugger when specific cookie changes its value and see the line of script that caused the change. And much more! Check out full list of cookie related features.

    Command Editor Syntax Highlighting

    Command editor (aka multiline command line) supports syntax highlighting.


    Autocompletion in Firebug has never been better. This feature helps you when editing CSS properties, variables in the Watch panel, break-point conditions, any numbers, colors, font-families, etc. Just try to edit your page through Firebug UI and you’ll see for yourself.

    Check out the screenshot. When typing into the Watch panel, the autocompletion offers variables in the current scope.

    Trace Styles

    This feature allows tracing all places which affected specific CSS property. The feature is part of the Computed side panel where every CSS property is expandable. The Computed side panel also supports tooltips for colors, images and fonts.

    See, there are three places trying to set the font-size of the selected element (the one in black succeeded). Of course, the blue text/location on the right is click-able and navigates the user the right place. See also detailed explanation.

    New Command: help

    If you are interested what built-in commands are actually available in the Command Line (within the Console panel) just type: help. You’ll see a list of commands with a description.

    The green command name is a link navigating the user to Firebug wiki with more info (and how-to-examples) about clicked command.

    Link to Web-font Declaration

    This feature allows to quickly inspect custom font-family declarations. All you need to do is to right-click on your font-family value, pick Inspect Declaration and you’ll be automatically navigated to the CSS panel that shows the place where the font-family is declared. Check out the screenshot below.

    Support For Media Queries

    Media queries of @import CSS rules are displayed inside the CSS panel and it’s possible to edit them. Of course, auto-completion works in this case too (e.g. when I did the screenshot, I clicked on 400px value and pressed up-arrow, that’s why there is 401px).

    Displayed Entities Format

    There are new options in the HTML panel that allow changing displayed format of HTML entities.

    And by the way, MathML entities are also supported.

    Displayed Color Format

    There are also new options allowing to change displayed format of CSS colors. Firebug offers three options: Hex, RGB and HSL. These options are available in CSS, Style and Computed panels.

    Tooltips for Menu Items

    This is one of many little and neat improvements. Every menu item has also a tooltip that explains the associated action. It’s especially useful for options.

    Support for “focus” CSS pseudo class

    Apart from hover and active CSS pseudo classes, Firebug is also supporting: focus.

    This feature helps in situations where you want to inspect CSS rules that applies only if the inspected element has focus. Here is what you need to do.

    1. Use Firebug Inspector to select your element
    2. Open the option menu for the Style side panel (click the black triangle next to the panel label)
    3. Check :focus option
    4. Now Firebug simulates the focus state and so, every CSS rule using :focus pseudo class in the selector will be displayed

    HTTP Requests From BFCache

    Firebug Net panel is able to display also HTTP requests coming from so called BFCache (Back-Forward Cache). This cache makes backward and forward navigation between visited pages very fast. Note that this has nothing to do with the browser cache.

    Check out the screenshot, we changed the background for requests coming from the BFCache and so they can be easily differentiated from other requests. Only the last request on the screenshot is coming from the server.

    In order to see those requests you need to check Show BFCache Responses option.

    Delete CSS Rule

    Another neat feature that allows to delete whole CSS rule together with all its properties. Just right click a CSS rule…


    Check out our issue tracker for all 79 enhancements in Firebug 1.10.

    Also, follow us on Twitter to be updated about upcoming Firebug news!

    Jan ‘Honza’ Odvarko

  6. A look into a Firefox work week

    This post was originally published as A Compendium of Awesome, and is a short summary of a Firefox work week. Posted here to give an overview, with focus on some details, about things happening with Firefox developement.

    Team Firefox 2012Two weeks ago, the Firefox team got together for a work week in Toronto. It was amazing. Walking through a room with that many excellent people doing excellent things was inspiringhumblingunbelievable and the hits kept on rolling.

    The combined mobile and graphics teams cut the beta blocker list for Fennec Native in half. The desktop team banged together a working prototype of sign in to the browser. The firefox tech leads worked with product and project management to nail down the kilimanjaro bug list for desktop. Madhava gave a great talk about the future of Firefox UX. I would have scored it as a strong success based on those outcomes alone.

    And then this happened:


    Lightning Talks

    I know I’ve missed things. I know some of it is still being written up. In fact, I’m not even the first to write a round up post. Here’s Finkle doing the same, and dcamp, and cwiiis.

    FX-Team is big enough these days that it’s quite an undertaking to get us all together in one place. But man, it’s phenomenal when we do.

  7. Firebug 1.9 New Features

    Firebug 1.9 has been released and as usual I would like to get this opportunity to present some new features introduced in this version.


    First of all, check out the following compatibility table:

    • Firefox 4.0 with Firebug 1.7.3
    • Firefox 5.0 – 11.0 with Firebug 1.9
    • Firefox 12.0 (nightly) with Firebug 1.10

    Firebug 1.10 alpha 1 will be available next week, you can use Firebug 1.9b6 for Firefox nightlies in the meantime.

    Here is a summary of all new features

    Firebug UI docking

    Firebug UI can be positioned on all fours sides of the browser window. Just open the start button popup menu, pick Firebug UI Location sub menu and finally select the position you prefer the most.

    Copy JSON responses to the clipboard

    Are you dealing with AJAX & JSON? Firebug allows inspecting JSON responses and copying parts of the JSON tree to the clipboard. Just expand an HTTP request (in the Console or Net panel), select the JSON tab and right click in the tree to get the context menu.

    Syntax error position displayed

    The Console panel shows an arrow to the exact position inside the line of the syntax error when an error occurred.

    New column in the Net panel: Protocol

    The Net panel offers a new Protocol column displaying HTTP protocol for every request. You can use this column to sort all request by protocol and e.g. see only https requests. The column isn’t displayed by default, you need to right-click on the header and customize…

    Quickly Remove Elements from the page

    The well known Inspector feature allows quick removal of selected elements from the page. Just inspect an element and press Delete key to remove the currently highlighted element on the page.

    Function objects: displayName property

    Firebug also supports a displayName function object property. You can use this property to specify custom function name for anonymous functions. Firebug is consequently using that property to display stack traces.

    Every Console log has its origin info

    This is just simple new feature. Every log displayed in the Console has it’s origin (file url and line number). Of course, Firebug shows the source as soon as you click on the origin link.

    Resend HTTP request

    The net panel allows to resend an existing HTTP request. Just right-click on it and pick Resend from the context menu. Nice and easy!

    Tooltip for conditional breakpoints

    The Script panel is displaying tooltips for conditional breakpoints. You don’t have to open the condition editor to just see the current condition.

    Add Watch from the DOM panel

    The DOM panel context menu introduces a new Add Watch command. This allows the developer to find specific object or field (can be several layers deep in the structure) and put it directly into the Script panel’s Watch window for further inspection and monitoring.

    Response Headers from the browser cache

    The Net panel is displaying even HTTP headers coming from the browser cache. Just expand an HTTP request and check the Headers tab, there is a new section at the bottom (in case the response comes from the cache).

    Font Viewer

    Firebug introduces a font viewer (for *.woff files) integrated into the Net panel. If your page is loading such file you can expand appropriate request and see all meta data about the downloaded font. Very cool!

    Font Tooltip

    There is yet another neat support for designers. If you move mouse cursor over a font in the CSS panel (or in the Style side panel) you’ll see a tooltip with a font preview.

    Tooltip tip for array items

    Another nifty improvement is related to debugging and inspecting an array value using tooltips. If you move mouse cursor over array brackets, you can see the actual value, see the screenshot.

    Stay Tuned!


  8. Firefox – tons of tools for web developers!

    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.