The new version of the open source web development tool, Firebug 2.0, has has a major facelift and is powered by a new debugging engine.

The Firefox add-in Firebug allows users to inspect HTML and modify style and layout in real-time, provides a JavaScript debugger and facilities to analyze network usage and performance.

Announcing the release of the new version, Firebug's lead developer, Jan “Honza” Odvarko, wrote:

Firebug 2 introduces many new features and bug fixes also because we completely removed dependency on the ancient Firefox debugging engine (a.k.a. JSD1) and incorporated a new debugging engine known as JSD2.

Its release coincides with Firefox 30, which is a minor mainly bug fixing release, but it anticipates a major change in Firefox 31 which sees the removal of JSD1 from Firefox.

Apart from a revamped user interface that is described as "clean and more intuitive, one of the most visible new features in Firebug 2.0 is that the Script panel supports JavaScript syntax highlighting:

Syntax colouring is included  for HTML and CSS.

Another useful feature if you deal with minified JavaScript code is that the Script panel now supports pretty-printing to display long lines of code in a readable fashion.

Other improvements are that:

• The EventBug extension for Dom Events has been integrated into the add-on.
• The HTML panel search has been improved and now supports regular expressions and CSS selectors.
• Code auto complete has been improved. It is available in the Command Editor within the console panel, also works in the breakpoint-condition popup dialog where it offers variables in the current scope and when editing HTML and SVG attributes
• A new JavaScript Expressions Inspector
• A new option in the Console panel groups logs from the same location
• An option to inspect JavaScript function return values.
• You can now show or hide specific Firebug 2.0 panels
• A new Color As Authored option in the CSS panel for comparing style information with the output of the browser
• Ability to create new HTML attributes faster
• Ability to inspect registered mutation observers for any given element.

This video provides a walkthrough of many of the new features:

Once you install Firebug, it takes over the default Firefox Developer Tools shortcut (F12).

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info