1. Firebug 1.9 New Features

    • by Jan Odvarko • Featured Article, Firebug • 44 comments

    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

  2. Firebug 1.8 New Features

    • by Jan Odvarko • Firebug • 13 comments

    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

  3. Firebug 1.7 New Features

    • by Jan Odvarko • Firebug • 14 comments

    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…