Mozilla

Firebug Articles

Sort by:

View:

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

    Firebug

    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:

    performance.timing

    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:
    include("http://code.jquery.com/jquery-latest.min.js");

    If you are often including the same script (e.g. jqueryfying your page), you can create an alias.
    include("http://code.jquery.com/jquery-latest.min.js", "jquery");

    And use the alias as follow:
    include("jquery");

    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.

    $("#content")

    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 getfirebug.com.

    Follow us on Twitter to be updated!

    Jan ‘Honza’ Odvarko

  2. Firebug 1.10 New Features

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

    Firebug

    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

    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

  3. 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:

    Hacking

    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.

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

    Firebug

    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!

    Honza

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

    Continued…

  6. Firebug 1.8 New Features

    Firebug 1.8 compatible with Firefox 5.0 has been released and I would like to get this opportunity and introduce some new features in this version.

    Firebug 1.8 has been also uploaded to AMO, but it can take some time to appear.

    Firebug

    First of all, check out the following compatibility table:

    console.timeStamp()

    There is a new API that can be used to create time-stamps during Javascript execution and compare them together with HTTP traffic timing on the timeline in the Net panel: console.timeStamp();

    See detailed description of this feature with examples how to use it.

    IP Address displayed in the Net Panel

    The Net panel displays remote & local IP address + port number for each request. There are two additional columns, see the screen-shot:

    HTML Preview Reloaded

    This feature is back and better than before. Now you can adjust height of the preview by drag-and-drop to see more or less content as necessary.

    Improved Script Location List

    Script location list available in the Script panel adjusts its size automatically according to the screen size and uses scroll-bar as needed. This makes easier for the user to pick up the right script.

    Command Line Content Persistence

    Command line content is now persistent across reloads. This feature allows to quickly execute the same expression on different pages. This is one of many little details that make Firebug the indispensable tool.

    New DOM Panel Options

    The DOM panel has two new options:

    • Show Own Properties Only check if you don’t want see the prototype chain for objects
    • Show Enumerable Properties Only check if you want to see only enumerable properties

    CSS Panel Color Tooltips

    A tooltip with color preview is displayed for colors specified in various formats. Supported formats are: hex, rgb, rgba, hsl and hsla.

    Shortcuts for Changing CSS values

    Firebug is great when tweaking CSS of the current page to perfection. Now, there are also new keyboard shortcuts for changing CSS values (numbers).

    • Ctrl+Up/Down increases/decreases by 0.1
    • Shift+Up/Down increases/decreases by 10

    Better Support for External Editors

    As you might know Firebug allows to configure and open an external editor (or IDE). There has been two arguments you could pass to such editor:

    • %url URL of the file (if %url is not present, %file will be added by default)
    • %file Path to the local file (or to the temporary copy)

    Firebug 1.8 introduces a new %line argument that allows to open the external editor scrolled at the right position (according to the current scroll position in the the Script panel).

    • %line Line number

    Box Sizing Exposed

    CSS3 introduced a new property called box-sizing, which allows the user changing the box model for an element and thereby influence element layout. Value of this property is now exposed in the Layout side panel.

    Stay Tuned!

    Honza

  7. Firebug 1.7 New Features

    Firebug 1.7 with full support for Firefox 4 is out of the door and I can’t miss this opportunity to describe some of the features introduced in this release.

    For those who don’t follow Firebug blog and/or are not familiar with Firebug too much/not at all, let’s start with some links leading to sources where you can start to dig more about Firebug world:

    Continued…

  8. Results from our Developer Survey #2

    To follow up on the developer survey from last November, we did a second survey this past March after the releases of Firefox 3.6 and Firebug 1.5 to gauge developer reactions to the latest features in the browser and a much improved version of everyone’s favorite developer tool.

    In this post we’ll share the results of our latest survey and provide some data and insights from all the great feedback we have received.  We hope this will help us better understand developers’ needs and continue to build out the Mozilla Developer Network to better engage with them.

    Recap of the November 2009 Survey

    As a refresher, here is a summary of the initial November 2009 survey. The main takeaways were as follows:

    • Our community is made up of a diverse set of developers that cover all aspects of web development from design to back-end work.
    • Open standards are by far the most popular technologies used for web development work.
    • Firefox is the most common browser used first by developers for testing their work, primarily because of the many developer tools and Add-ons available for Firefox and Mozilla’s strong support for web standards.
    • Firebug stood out as the most popular developer tool and many developers agreed that it is “absolutely essential for development.”

    Results from the March 2010 Survey

    Our second developer survey received 2,267 responses over two months from late March to early June.

    For this survey there were several common questions from the previous one  – about browser preferences – so that we could measure satisfaction over time and follow trends in browser adoption following the release of Firefox 3.6.
    We also responded to the overwhelmingly enthusiastic praise of Firebug by asking for feedback on the most recent release.  By obtaining more specific feedback on the latest version of Firebug, we hope to address any remaining issues to make it an even more effective and attractive tool for developers.

    Developer Browser Preferences

    We did not see much change in browser preferences from November 2009 to March 2010.  Even considering a new iteration of Firefox and increasing competition from other browsers, the data still reflect general browser market share trends: the latest versions of Firefox and Chrome gained at the expense of older versions of IE.

    The following data show the primary browsers developers use to test their websites:

    Which browser(s) do you test your web sites against to make sure they are compatible?

    November 2009


    Tested Against
    Percent
    Firefox 3.5 82.03%
    IE 8 74.63%
    IE 7 68.23%
    Chrome 60.23%

    March 2010

    Tested Against Percent
    Firefox 3.6 80.17%
    IE 8 70.23%
    Chrome 62.37%
    IE 7 56.18%

    The numbers are unlikely to shift drastically because regardless of developers’ personal preferences, the top browsers listed above are the ones most commonly used by regular users, as demonstrated by browser market share data. Thus it makes sense that developers test against these browsers most often.

    Firefox isn’t just the most popular browser for developing, according to the data below; it’s also popular for personal usage. It should be noted, however, that this survey was distributed primarily though Mozilla-related channels, so there might be some bias in the results; we address this problem later in the report.

    Note also that the vast majority of developers were quick on the uptake switching from 3.5 to 3.6.

    Have you tried Firefox 3.6?

    Upgrading to Firefox 3.6

    Although the vast majority of developers switched from 3.5 to 3.6, there were still some who did not. In fact, roughly 10% of the March survey respondents still used 3.5. The primary reasons for the continued usage on 3.5, however, had little to do with personal preference. Roughly half of those who still used 3.5 did not even know that 3.6 was released, while the other half responded that they didn’t have time to update.

    One interesting note from the results was that a lot of developers still using Firefox 3.5 were on Linux distros that did not yet have the Firefox 3.6 package available at the time they took the survey.  Given that 23% of respondents develop on the Linux platform, that could explain why so many had not made the jump.

    What operating system do you mainly use for your development environment?

    Unfortunately the data lacked specific details on why developers did not know about 3.6 or why they did not find time to update to the next version.  With that said, regardless of the reasons, it is clear we should focus on facilitating the update process for future iterations of Firefox.  We will start by promoting early betas and announcing new Firefox releases on the MDN website.

    Feedback on Firebug 1.5

    We all know that Firebug is important to developers, so we wanted to focus on getting Firebug-related feedback for this survey. Comments about Firebug echoed those from the November survey: the consensus is that “Firebug is the single most important tool in web development.” Indeed Firebug is considered such a critical tool in the developer’s arsenal that several of you asked us to package Firebug as a built-in component of Firefox instead of just as an Add-on; some users call the duo the “triple F”: Firefox and Firebug.

    While the 1.5 release was a huge improvement from previous versions, developers weren’t shy about sharing their frustrations and feature requests.  Many noted occasional stability issues, such as when Firebug is finding elements in document trees or taking certain Ajax requests. Additionally, we received several suggestions for improving the user interface, such as incorporating more Firefox-native design elements, increasing the size of the “Deactivate Firebug” button, and removing elements like the “Quick Info” and “CSS Overview” boxes.

    One data point that stood out was that about 22% of developers had not tried Firebug 1.5 at the time they took the survey.  Considering that it was released in January and the survey was open from March to June, we would have expected that the adoption of such an important tool to be higher than what the data suggests.  This presents an opportunity to better communicate new releases and raise awareness among developers to make sure they are up-to-date on the latest development happening with Firebug.

    Have you tried Firebug 1.5?

    For those of you who are interested in learning more about documentation, features, and related news, visit the Firebug website.  Along with regular blog posts from the team, the site will host community forums for discussions with community and Firebug team members and offer ways to get involved if you want to contribute to the project.  Firebug 1.6 development is well underway and we’ll continue to see it evolve to meet web developers’ needs.

    Next Steps

    Thus far your feedback via our first two surveys has been invaluable as we strive to build a better open Web through the Mozilla Developer Network.  We now have a decent snapshot of the type of development you do, the technologies and tools you use, and the browsers you prefer for both work and personal use.  The insights we have gained will help us refine the MDN roadmap and guide the programs we develop over of the next year to better engage with developers and build out the MDN website to meet your needs.

    Our next step is to move beyond these initial data to get a larger snapshot of the developer community. We will start by designing an informal survey to get a grasp of what developers here at Mozilla and within our immediate community have to say about the tools and resources they find the most valuable for their work.  We plan to follow that up with more research on the web developer community as a whole by distributing an industry-wide survey.

    The goal for Q3 is to design a survey that can be distributed to a more diverse and unbiased global developer community.   Ultimately our goal is to have the clearest possible picture of the global web developer community and how it views the current “state of the Web”.