blog
discuss
releases
documentation

Archive for the 'Firefox' Category

Firebug 2.0.2

Friday, July 18th, 2014

The Firebug team released Firebug 2.0.2. This version represents maintenance release fixing some reported issues.

 

Firebug 2.0.2b1 has also been released to update users on AMO beta channel. This version is exactly the same as 2.0.2

 

Firebug 2.0.2 is compatible with Firefox 30 – 32

Firebug 2.0.2 fixes 8 issues.

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 2.0.1

Saturday, June 21st, 2014

The Firebug team released Firebug 2.0.1. This version represents maintenance release fixing some reported bugs and updating several locales.

 

Firebug 2.0.1b1 has also been released to update users on AMO beta channel. This version is exactly the same as 2.0.1

 

Firebug 2.0.1 is compatible with Firefox 30 – 32

Firebug 2.0.1 fixes 10 issues.

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 2.0

Tuesday, June 10th, 2014

Fresh new Firebug 2 has been released and it’s time to see what new features has been introduced in this version.

  • Firebug 2.0 is compatible with Firefox 30 – 32

Firebug 2.0 beta 8 has also been released to update users on AMO beta channel. This version is exactly the same as 2.0

 

Firebug is an open source project maintained by developers from around the world and here is a list of all members who contributed to Firebug 2

  • Jan ‘Honza’ Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Florent Fayolle
  • Farshid Beheshti
  • Steven Roussey
  • Markus Staab
  • Sören Hentzschel
  • Belakhdar Abdeldjalil
  • Thomas Andersen
  • Jakob Kaltenbrunner
  • David Gomez
  • Leif Dreizler
  • Luca Greco
  • Benediktas Knispelis

There are also plenty of translators who localized Firebug into 35 languages!

 

Before we jump right into the details, let’s see how the current UI looks like. Firebug 2 went through a face lift in this version. World class designers have been working on the new theme and the user interface is now clean and more intuitive.

Firebug 2 UI:

 

The screenshot shows Win OS theme other OSes (Linux and Mac) have own custom theme.

New Features

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

 

Syntax Highlighting

One of the most visible new features is probably that the Script panel supports JavaScript syntax highlighting.

Syntax coloring is also there if you edit HTML as a free text by clicking on the Edit button in the toolbar. The same for CSS source edit mode…

Pretty Print

The Script panel also supports pretty-printing and if you deal with minified JavaScript code you’ll find this feature extremely useful.

DOM Events Inspector

Firebug 2 integrates existing EventBug extension and introduces new Events side panel within the existing HTML panel. This panel lists all of the event handlers on the page grouped by event type for the currently selected DOM element. The panel is nicely integrated with other Firebug panels and allows to quickly find out which HTML element is associated with specific event listener or see the JavaScript source code (read more).

Searching in HTML Panel

Search in the HTML panel has been improved and the user can now use CSS selectors or regular expressions to find specific elements.

Code Auto Completion

Code auto-completion system has been improved across Firebug 2 UI on several places. It’s now available in the Command Editor (within the Console panel) where you can press the <tab> key to open a little completion popup window.

Auto completion works even in breakpoint-condition popup dialog where it offers variables in the current scope.

You can enjoy auto-completion when editing HTML attributes (works for SVG attributes too) and also within HTML style attribute. All these little details make Firebug an awesome tool to use!

JavaScript Expressions Inspector

When debugging and stepping through your code you can quickly inspect and explore details of any JavaScript expression you see in the Script panel. Just hover your mouse over the expression or selected piece of code and see the result in the tooltip.

You can also right click on an expression (or again on the current selection) and pick Use in Command Line or Inspect in DOM Panel actions.

Console Log Grouping

There is new option in the Console panel that allows to group console logs coming in a row from the same location (on by default).

Inspect JavaScript Function Return Value

This feature allows to examine and modify return value of a JavaScript function. See an example:

function myFunction() {
return foo();
}

The usual problem in other debuggers and tools is is how to examine the return value of foo(). Firebug allows that by stepping through a return statement and displaying the value within the Watch side panel. It even allows you to modify the return value through the Watch panel just like other values (read more).

Show/Hide Firebug Panels

One change we introduced in Firebug 2 is the way how to hide/show individual panels. Check out the next screenshot that depicts how it’s done.

Displaying Original CSS Color Values

Another nice enhancement allows displaying original CSS color values. There is a new option Colors As Authored in the CSS panel that allows displaying CSS color values as they were defined. This makes it easier to compare the styles interpreted by the browser with the ones inside the original CSS source file. While this new option is now the default, you still have the possibility to switch to hexadecimal, RGB or HSL formatting.

Quickly create new HTML attribute

There is a new way how to quickly create new attributes for HTML elements. All you need to do is hover mouse cursor over the closing arrow bracket of an element you want to add a new attribute to. See, the cursor changes its shape into a hand.

Click on the closing tag to open an inline editor and start typing an attribute name.

The rest works as usual. After you typed the name press the tab key and type the attribute value.

Inspect Registered Mutation Observers

The existing getEventListeners() command (see a Firebug tip) has been extended and it now displays also registered mutation observers for given element.

You can use this test page to try it yourself.

 

See also Firebug 2.0 release notes.

 

Firebug Extensions

As usual we spent some time testing existing Firebug extensions. Here is a list of those that passed our review and work with Firebug 2.0.

  • AMF Explorer AMF Explorer is based on the JSON Explorer and XML Explorer features of Firebug, AMF Explorer allows web developers to view deserialized AMF messages in Firebug’s Net panel.
  • Console Export Export data from the Console panel
  • CSS Usage See what CSS rules and properties are actually used in your app.
  • Firediff Additional insight into the changes that are being made to the components of the page
  • FireLogger Logging support for web developers (PHP, Python, ColdFusion) (see also this post)
  • FirePath adds a development tool to edit, inspect and generate XPath 1.0 expressions and CSS 3 selectors
  • FirePicker Adds color picker to Firebug’s inline CSS editor. (see also this post)
  • FireQuery Adds a collection of jQuery-related enhancements to Firebug. Recommended for all jQuery developers. (see also this post)
  • FireStorage Plus! Is an extra panel to Firebug for displaying and manipulating the web storage containers such as localStorage and sessionStorage. (see also this post)
  • FlashFirebug Debug ANY AS3 SWF files on the web. Edit properties and inspect elements. Redirect SWF output to the extension. Run AS3 code and transform objects on the fly. Access SWF assets with the decompiler. View AMF calls and Shared Objects and much more!
  • Illuminations for Developers Takes JavaScript frameworks and makes their internals visible inside Firebug, including views, models, class names, and more.
  • Javascript Deminifier Deminify javascript before it is downloaded.
  • NetExport NetExport is a Firebug extension that allows exporting data from the Net panel.
  • Omnibug Omnibug is a plugin for Firebug to ease developing web metrics implementations. Each outgoing request (sent by the browser) is checked for a pattern; if a match occurs, the URL is displayed in a Firebug panel, and decoded to show the details of the request. In addition, requests can be logged to the filesystem.
  • PageSpeed Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
  • YSlow YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is also a Firefox add-on integrated with the Firebug web development tool.
  • ZikulaBug ZikulaBug is a Firebug extension, which provides a friendly interface for Zikula’s DebugToolbar. It allows to browse Zikula debug data grouped in eight tabs: General, Configuration, SQL, Templates, Function Executions, Log Console, HTTP request and Settings.
  • Dojo Firebug Extension Support for Dojo based app debugging.
  • Firefinder find HTML elements matching chosen CSS selector(s) or XPath expression quickly.
  • Fireflow Provides method call logs in a tree format.

You can also see the complete list of all extensions.

 

Follow us on Twitter to be updated!

 

You can also post feedback in the newsgroup.

 

Jan ‘Honza’ Odvarko

 

Firebug 2.0 beta 8

Friday, May 30th, 2014

getfirebug.com has Firebug 2.0 beta 8

Firebug 2.0b8 fixes 13 issues
Firebug 2.0b8 is compatible with Firefox 30-32

Beta releases are also uploaded on AMO.

 

We are releasing the last Firebug 2 beta version today. The final release will be available on Tuesday 10th of June. We need a time buffer to make sure that Firebug 2 xpi bundle has enough time to go through review on AMO.

 

Let’s check out what’s new in this release.

Pretty Print Button

This is a little change that we introduced to make sure that the support for source code prettifying is more visible to the user. There is a new button on the Script panel toolbar now (issue 7305).

Script Expression Inspection

We already mentioned support for object inspection in the Script panel in the previous post and we introduced some more improvements.

It’s now possible to inspect even selected expressions (issue 7475).

See, the little tooltip says that the result of 10 + 20 is 30. You can also right click on the selection and pick Inspect in DOM Panel or Use in Command Line (both actions will be applied on the selected expression result).

 

We have also improved the way how expressions under the cursor are analyzed and so for instance, the cases like the following also work as expected (issue 7484).

Check out various position of the mouse cursor and the expression under it.

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 2.0 beta 7

Friday, May 23rd, 2014

getfirebug.com has Firebug 2.0 beta 7

Firebug 2.0b7 fixes 8 issues
Firebug 2.0b7 is compatible with Firefox 30-32

Beta releases are also uploaded on AMO.

 

It’s Friday and another Firebug 2 beta release is available for testing. We are sprinting towards the Final release and counting, 18 days remaining…

 

Let’s see what other new stuff has been introduced in Firebug 2.

Console Log Grouping

This is one of the nifty little features that make Firebug great tool for development. Grouping of console logs has been available for long time, but the number of logs in a group was displayed on the far right side and not much noticeable. We moved it to the beginning to make it more obvious. See the screenshot.

Script Objects Inspection

This feature has been in Firebug for some time, but we made it working properly now in Firebug 2.

You can right-click on any object directly in the Script panel and pick Inspect in DOM Panel (to continue inspection of the object in the DOM panel) or Use in Command Line (to use object in an expression on the Command Line).

See couple of screenshots.

 

 

This allows quick object inspection without necessity to search for them in the DOM main (or side) panel.

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 2.0 beta 6

Friday, May 16th, 2014

getfirebug.com has Firebug 2.0 beta 6

Firebug 2.0b6 fixes 6 issues
Firebug 2.0b6 is compatible with Firefox 30-32

Beta releases are also uploaded on AMO.

 

Let’s see what is new in this release!

 

DOM Events Inspector

This release integrates the existing EventBug extension and introduces a new Events side panel. This side panel is available in the HTML panel and lists all of the event handlers on the page grouped by event type for the currently selected DOM element. The panel also nicely integrates with other Firebug panels and allows to quickly find out, which HTML element is associated with specific event listener or see the JavaScript source code (issue 5440).

 

EventBug extension doesn’t support Firebug 2 and you should uninstall it if using this version of Firebug.

 

Events Side panel

 

The previous screenshot demonstrates a situation where a <button> element is selected and we can see that two listeners are registered for it: onclick and onmousemove. Name of the handler (in green) is a link that navigates you directly at the right line in the Script panel where you can inspect the JS code.

There is also a section Other listeners for: Window that shows one handler for load event. There is no way to select the window object itself in the HTML panel and so this section is visible all the time (in case any listeners are actually available).

Online example

 

You can also disable an existing event listener (the same way a CSS properties can be disabled in the CSS panel).

 

Event Targets

The Events panel displays also event handlers for all targets (parent elements) used when event bubbles.

Imagine the following scenario:

<div id="div1" onclick="onClickDiv1()">
  <div id="div2" onclick="onClickDiv2()">
    <div id="div3" onclick="onClickDiv3()">Click Me!</div>
  </div>
</div>

If the user clicks on div3 element the event will bubble up through the parent elements.

If you select div3 element in the HTML panel the Events side panel shows shows all three listeners (coming from the event targets chain).

 

  • The top section shows onclick for div3 (the selected element)
  • There are other two sections showing listeners for div2 and div1 elements

Online example

 

Event Handlers Names

Name of the event handler displayed in the Events panel depends on the way how the event is registered. If it’s an inline event (created within an HTML attribute) the name always corresponds to the attribute (event type) since generated automatically by the browser. If you use addEventListener, the name will correspond to the function passed in.

See an example:
 

Online example

 

Wrapped Event Handlers

Some JS libraries (e.g. jQuery) are wrapping the original function into another function. This happens for all registered event handlers, and so searching for the original function might be hard since the link offered in the Events panel always points to the wrapper function coming from particular JS library. But don’t worry, Firebug solves this problem by showing even the original wrapped function.

 

Online example

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 2.0 beta 5

Friday, May 9th, 2014

getfirebug.com has Firebug 2.0 beta 5

Firebug 2.0b5 fixes 7 issues
Firebug 2.0b5 is compatible with Firefox 30-32

Beta releases are also uploaded on AMO.

 

We made a few UI enhancements and fixed several reported bugs in this release. As usual we have also created more automated tests to ensure stability and avoid regressions.

 

Show/hide Command Editor

Another change we have introduced in Firebug 2 is related to the way how the Command Editor (aka multiline command line) is opened and closed.

The Command Editor (together with the Command Line) is one of the most useful features for development. It allows the execution of JavaScript code snippets, as well as calling existing functions on the page or defining new ones.

The script is executed in the context of the current page and if the debugger is currently halted (e.g. at a breakpoint), the script is executed in the current debugging frame. So for example you can also use local variables available in the current frame scope in your script.

The following screenshot shows how the Command Editor looks like when opened in the Console panel.

 

The Command Editor can be opened/closed using the little arrow button in the top right corner, which is exactly the same way how side panels on other panels are opened/closed. This new approach makes the entire UX more consistent.

 

See the next screenshot showing how the UI looks like if the Command Editor is closed.

 

You can use the top-right button to open the Command Editor again, or click the bottom-right red button. We kept the red button in there, since it was in Firebug for a long time and users could miss it. But we’d like to remove it at some point since we believe it isn’t that important anymore. What do you think?

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 2.0 beta 4

Friday, May 2nd, 2014

getfirebug.com has Firebug 2.0 beta 4

Firebug 2.0b4 fixes 12 issues
Firebug 2.0b4 is compatible with Firefox 30-32

Beta releases are also uploaded on AMO

 

Let’s see what’s new.

 

Console API available in Web Workers

This is great news for everyone who’s using web workers and debugging them. The console object and all its API can be now used from within web worker thread as well (issue 2154).

 

Support for Australis

Firebug 2 user interface has been improved a lot and we paid an extra focus on visual compatibility with the new Australis design introduced in Firefox 29 this week. It’s not only tweaking the design bits, so it looks good and native across different OSes, but also supporting the new Australis UX.

First let’s look how Firebug 2 looks on different platforms (in this order: Mac, Linux, Win).

 

 

 

Australis introduces a new panel menu icon in the upper right corner and new way how to customize this menu. Firebug supports all the new UI/UX.

If you click the new menu toolbar button you should see a panel with Developer icon.

After you click the icon you’ll see a submenu with existing native tools and Firebug at the top (issue 7415).

Customization of the menu is done through a button that is located at the bottom of the menu panel. After you click it, you can drag-and-drop the Firebug icon anywhere you want. Note that Firebug icon is located in the toolbar by default just like always (auto customization done after installation).

 

So, give it a try and install Firebug 2.0 beta 4

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 2.0 beta 3

Friday, April 25th, 2014

getfirebug.com has Firebug 2.0 beta 3

Firebug 2.0b3 fixes 15 issues
Firebug 2.0b3 is compatible with Firefox 30-31

 

Highlights from this release

Apart from regular bug fixes and patches one new feature made it into this release. It’s now possible to search in the HTML panel using regular expressions (issue 6713)

 

All you need to do is to check Use Regular Expression option in the search panel options dialog and type a regular expression in the search box.

 


 

Code Auto-completion

One of the things improved in Firebug 2 is related to code auto-completion. This feature has been improved on several places in Firebug. First, let’s see the Command Editor in the Console panel (issue 55)

 

 

You can open the auto-completion popup window by pressing the <tab> key. The screenshot shows a case where the key is pressed after typing: document.get

 

Another place where auto-completion has been improved is breakpoint condition dialog. It now offers variables in scope. Check out the following screenshot.

 

 

You can read about other auto-completion features in previous blog post.

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 2.0 beta 2

Thursday, April 17th, 2014

getfirebug.com has Firebug 2.0 beta 2

Firebug 2.0b2 fixes 9 issues
Firebug 2.0b2 is compatible with Firefox 30-31

 

A few more reported issues have been fixed in this release and we also created some more automated tests to ensure stability.

Show/hide Firebug panels

One change we introduced in Firebug 2 is the way how to hide/show individual panels. Check out the next screenshot that depicts how it’s done in Firebug 1

 

The panel selector button is presented on the main Firebug toolbar. We believe that this feature doesn’t deserve so much attention and in order to clean up the UI and make it simper we decided to move it into Firebug menu in Firebug 2.

 

There are many other little improvements in Firebug 2 that make the overall user experience better and we’ll be explaining them here step by step, so stay tuned!

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko