blog
discuss
releases
documentation

Archive for the 'Firefox' Category

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

 

Firebug 2.0 beta 1

Friday, April 11th, 2014

getfirebug.com has Firebug 2.0 beta 1

Firebug 2.0b1 fixes 13 issues
Firebug 2.0b1 is compatible with Firefox 30-31

 

The feedback we have got for Firebug 2 so far has been positive, some issues reported and fixed. We feel strong and in order to get more feedback we decided to move forward and start beta phase. Beta releases will also be uploaded on AMO to update the beta channel.

Highlights from this release

One little improvement made it into this release. If you deal with Cookies you can now export all cookies for the current page using new Export as JSON to Clipboard action (issue 7197).

In order to have this action available you need to set the following preference to true: extensions.firebug.cookies.jsonClipboardExport
(use about:config)

 


 

One useful concept improved in Firebug 2 is related to JavaScript errors and the debugger. Thanks to JSD2 API Firebug could finally implement it correctly. So, let’s take a look at four scenarios that explains how you can identify JS errors in your code and fix it.

Break On Next Error

This feature is part of Break On … concept in Firebug. This time we are interested in Break On Next Error related to the Console panel.

This features allows to break on an error that happens next. It’s useful in cases where the user knows when the error happens.

The use case is (try live example):

  • Open Firebug and enable the Console and Script panel
  • Switch to the Console panel and click Break On All Errors
  • Operate your page to cause JS error
  • Firebug should switch to the Script panel and break in the debugger
    at the line where the error happened

Error Breakpoint

In this case Firebug integrates JS errors an breakpoints within the Console panel.

This features allows to break on particular error that the user created a breakpoint for.

The use case is (try live example):

  • Open Firebug and enable the Console and Script panel
  • Operate your page to cause an error
  • You should see an error log in the Console panel allowing to set a breakpoint on it
  • Operate your page to cause the same error
  • Firebug should switch to the Script panel and break in the debugger
    at the line where the error happened

Break On Exceptions

In this case we move into the Script panel and use one of its options.

This feature allows to break on any exception that happens in your app. It works as an option and you don’t need to reactivate it after it happens.

The use case is (try live example):

  • Open Firebug and enable the Script panel
  • Switch to the Script panel and check Break On Exceptions option in the panel tab options menu
  • Operate your page to cause an exception
  • Firebug should switch to the Script panel and break in the debugger
    at the line where the error happened

Ignore Caught Exceptions

This case is an extension of the previous one. In some cases the user is only interested in uncaught exceptions since the others are caught and known.

This features allows to break on any exception that happens and is *not* caught by catch clause. It works as an option you don’t need to reactivate it.

The use case is (try live example):

  • Open Firebug and enable the Script panel
  • Switch to the Script panel and check Break On Exceptions and Ignore Caught Exceptions option in the panel tab options menu
  • Operate your page to cause uncaught exception
  • Firebug should switch to the Script panel and break in the debugger
    at the line where the error happened

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 1.12.8

Friday, April 11th, 2014

The Firebug team released Firebug 1.12.8. This version represents a maintenance release fixing compatibility issues with upcoming Firefox versions.

 

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

 

Firebug 1.12.8 is compatible with Firefox 23 – 30

Firebug 1.12.8 fixes 2 issues.

 

JSD1 vs. JSD2

This release is solving a compatibility problem related to the JavaScript Debugger Engine API (JSD) in Firefox. This API is going to be removed from Firefox 31 and any extension that is using it (including Firebug) needs to switch to JSD2 that has been around for a while.

The JavaScript debugger in Firebug 1.12.8 is based on the (old) JSD API, so the Script panel will be disabled if you’re running this Firebug version on Firefox 31.

The Script panel displays a message explaining why it’s disabled and a link to the Firebug 2 page. Firebug 2.0 is fully based on JSD2. Firebug 2.0 requires Firefox 30 as the minimum version and all users running it should check it out. Even when Firebug 2.0 is not finished yet, it’s already quite stable.

 

Here is a quick compatibility table:

  • Firefox 23-30 with Firebug 1.12.8
  • Firefox 30+ with Firebug 2.0 beta 1

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Firebug 2.0 alpha 2

Friday, April 4th, 2014

getfirebug.com has Firebug 2.0 alpha 2

Firebug 2.0a2 fixes 20 issues
Firebug 2.0a2 is compatible with Firefox 30-31

 

The Firebug team is hardworking to make sure version 2.0 is ready when Firefox 30 is ready. Today’s alpha 2 is fixing reported issues and also finishing some features that have been in-progress for some time. We are planning to switch to beta phase soon to get yet more feedback.

Inspect JavaScript Function Return Value

issue 6857

 

This is a great feature that allows to examine and modify the return value of a JavaScript function. See this little example:

function myFunction()
{
    return foo();
}

 

The question is how to examine the return value of foo()? Firebug allows that by stepping through a return statement and displays it within the Watch side panel. It even allows you to modify the return value by double-clicking on it.

 

Let’s go through an example (available online) and see some screenshots describing the user experience.

The JS execution is halted at line 17 and the Watch panel shows some global scopes, but it isn’t clear what the return value is.

One of the new JSD2 features is stepping through the return statement, so if you step over once (F10), the debugger will sit at the same executable line (17), but the current return value will be available and displayed in the Watch panel at this time.

Now you can edit the return value (double clicking on number 100) just like any other variable in the Watch panel. You can even change the type to make the value a string or a JS object. Try it for yourself, install Firebug 2 alpha 2 and load the online test case.

 

Pretty Print

issue 6920 and 1238

 

Another nice feature introduced for the first time is source code prettifying. This feature is available for the Command Editor:

as well as the Script panel source:

 

 

We’d love to hear about how this version works for you.

 

Please post feedback in the newsgroup.

 

Jan ‘Honza’ Odvarko

 

Firebug 2.0 alpha 1

Wednesday, March 26th, 2014

getfirebug.com has Firebug 2.0 alpha 1

Firebug 2.0a1 fixes 174 issues
Firebug 2.0a1 is compatible with Firefox 30-31

 

Update: an issue with Firefox 30 compatibility fixed

 

This alpha represents the first public release that is based on new Firefox debugging engine (also known as JSD2). Firebug team has been working hard to adopt this new API and has also done great job with polishing Firebug UI that is now matching the Australis theme introduced in Firefox 29.

This version introduces many changes and we decided to bump up the version number to 2 (!) starting from alpha 1. Firebug users having Firebug 1.13 alpha installed will be automatically updated (assuming they are using Firefox 30+).

 

Check out the following screenshot showing the basic Firebug 2 UI

 

 

Firebug refactoring touched mainly the Script panel, which represents the heart of debugging with Firebug. Some other panels changed too since they are integrated with the Script panel through e.g. the Break On … feature.

 

There are plenty of bug fixes (also because we removed the old and buggy JSD1 debugging engine) and also many new features. You can check out all fixed issues. For instance, one of the most visible thing 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. CSS source edit is also supporting it.

 

 

There are other new things and we will be explaining them in following posts on this blog. So, stay tuned!

 

This is the first alpha, but we believe that Firebug 2 is already in great shape. We spent time also on improving our automated testing framework and we wrote new tests that cover more Firebug features. Still, feedback from you is valuable. Let us know how this brand new Firebug version works for you, so we can switch to beta phase soon and consequently do a final release!

 

So, give it a try and install Firebug 2 alpha 1

 

Please post feedback in the newsgroup.

 

Jan ‘Honza’ Odvarko

 

Firebug 1.13 alpha 10

Friday, March 21st, 2014

getfirebug.com has Firebug 1.13 alpha 10

 

Firebug 1.13a10 fixes 12 issues
Firebug 1.13a10 is compatible with Firefox 28-31

 

This version is released mainly for Firefox Nightly users fixing one compatibility issue.
We have been working hard over last 10 alphas and except of fixing regular issues we have been also adopting the new JavaScript Debugger API in Firefox known as JSD2 (issue 5421 in our issue list).

 

This adoption has been done and our entire test suite composed of about 400 automated tests finally passed and all tests are green (issue 7166). Since we have done a lot of changes and also the Firebug UI went through a great face lift, we are going to call the next version Firebug 2.0 alpha 1! (will be available next week)

 

Here is a sneak peak of how the new UI looks like compared with the current one:

 

Firebug 1.12 (current release) Firebug 2.0 (next alpha)

Stay tuned!

 

Please post feedback in the newsgroup.

 

Jan ‘Honza’ Odvarko