This feature allows referring various page objects (HTML elements, JS objects, network requests, cookies, etc.) from within Firebug Command Line.
The user can also use object's properties in JS expressions.

See issue 6422 for more details.

This post explains the feature in detail and also asks for feedback.

How it works

As depicted on the previous screenshot the feature is represented by a new context menu item called Use in Command Line. This item is available for various objects (in various panels).

The action is simple: an expression $p is inserted into the Command Line if you execute the command. It's a variable that refers to the clicked object. You can also use the variable to access any property of the object.

What happens on the screenshot:

• The DOM panel shows an object person implemented on the page.
• The user clicks on the person's value (the green right hand part) and executes Use in Command Line.
• Command Line popup is opened within the DOM panel (so, the user doesn't have to leave the DOM panel).
• $p expression is inserted into the Command Line (and the command line automatically gets focus).
• The user presses the Enter key to evaluate the expression.

Note that the person object implemented on the page looks as follows:

If you want to access properties of an object just use dot notation. You can do following in our example.

$p.name

See, even the auto-completion works as expected!

Supported Objects

The feature is implemented for various objects across all Firebug panels. Here is a list of those objects.

• Any JS object (even functions etc.)
• HTML elements
• CSS rules and properties
• Cookies
• Network requests

Call for Feedback

All objects accessible through the $p variable are coming from the page content except of network requests and cookies.

We are actually logging nsIHttpChannel for network requests and nsICookie for cookies. So, the object comes from chrome (privileged scope) and isn't accessible in the page content. This way, the user has more info, but it could be confusing since the user could expect that the data are actually accessible from the page content (and Firebug is for page content debugging).

Possible options:

• Do not implement the feature for network requests and cookies
• Implement the feature only for XHRs (and show the real XMLHttpRequest instance) and cookie (coming from document.cookie)
• Keep it as it is
• Anything else?

What do you think?

Also, would you like to refer more objects at the same time? Something like having more variables (a history) available: $p0, $p1, $p2, ...

How would you expect it to be working?

Thanks for any feedback!

Logging of DOM events has been available in Firebug for a long time and the filter should make it more useful and effective in daily usage.

The problem is that we are unsure whether UI/UX of the filter is implemented properly.

So, if you are using this handy feature please read further and let us know what you think (leave a comment below).

Previous Implementation

See the next screenshot, it shows a menu item that represents the Log DOM events feature.

• Log Events feature can be just switched on or off.
• There is no way to pick, which events should be logged for selected node. All events for the node are logged in the Console panel.
• So, there might be a lot of logs in the Console (especially those for mousemove events)

New Implementation

This screenshot shows the new implementation. There is a new submenu that allows to pick what events should be actually logged.

• You can still click the top level Log Events menu to log all events just like before.
• You can also open the submenu and pick only the category of events you are interested at.
• There is a tooltip listing all events in the selected category.
• The tooltip also shows an example of how to use the feature from Firebug's command line.

Questions

• But, is the submenu with event-categories actually needed? Isn't the submenu too long and hard to use?
• Wouldn't it be simpler to keep the feature as it was before and just not log mousemove events? Is anyone actually interested in logging mousemove events?
• Or is there any other and better solution?

What do you think?

Instant Firebug Starter is a practical, hands-on guide that provides you with a number of clear step-by-step exercises to help you take advantage of the full power that Firebug offers. This book will give you a great grounding in using Firebug to debug, fix, and optimize your web pages.

The book starts with an introduction to the Firebug world, explaining what the tool is for and continues with a description how to successfully install Firebug into your browser. All you need to know if you want to get started with Firebug and tune your web site to perfection.

The next part of the book explains basics of Firebug user interface and gives you an overview of all the panels in Firebug. This is great even for those who have basic understanding of web development and Firebug.

The last part of the book is the most interesting and I believe useful even for advanced web developers and Firebug users. It covers top 17 features you'll want to know about. This is great place to learn some tips & tricks about HTML inspection, editing as well as AJAX debugging or page load performance monitoring.

If you are just starting out with web development and looking to improve your site with Firebug, then this guide is for you. If you have a basic understanding of web development then this guide is easy to follow and will benefit your site no end.

If it sounds interesting, just go ahead and learn new stuff !

One of the typical examples of such modification is changing the background color (dark vs. white).

This post explains how to use Jason Barnabe's Stylish extension and apply arbitrary CSS on Firebug UI.

Thanks to Luís who mentioned this!

See all Firebug tips

Step #1: Install Stylish

Stylish is Firefox add-on and so, just go to Mozilla Add-on site and press Add to Firefox.

List of installed/created themes is available in about:addons (Firefox -> Add-ons)

Step #2: Inspect Firebug UI

In order to find out what CSS rules you want to actually overwrite to modify Firebug UI install DOM Inspector. This add-on allows you to see all elements that make up Firebug UI as well as all associated CSS rules and properties.

Firefox -> Web Developer -> DOM Inspector

Step #3: Create New Theme

Stylish implements its own simple CSS editor that is opened if you click Write New Style button. All you need to do is to provide a name and CSS rules.

In order to change Firebug's panel background color you need to modify panelNode class.

And here is how Firebug UI looks like if the theme is applied:

You can also visit userstyles.org and search for available Firebug themes.

One of the new commands, introduced in Firebug 1.11 is include() and this post is intended to explain how to use it and make your development more effective.

Firebug Commands

Before we start with include() command let's take a look at quick summary of all Firebug built-in commands.

Did you know all of them? See Firebug wiki for more details.

See all Firebug tips

Now learn about include()

Include Remote Script

The basic purpose of include() command is to include a remote script into the current page.

include("http://code.jquery.com/jquery-latest.min.js")

In this particular example we included jQuery script and effectively jQuerified the page.

Create Alias

It would be irritating to type long URLs (and remember them) every time you reload the page and so, it's possible to create an alias.

include("http://code.jquery.com/jquery-latest.min.js", "jquery")

Now, all you need to do to include jQuery on your page is type:

include("jquery")

Aliases are persistent across Firefox restarts and list of existing aliases can be displayed by typing:

include();

To remove an existing alias type:

include(null, "jquery");

See also Firebug wiki for include() command.

Do you want to have more built-in commands in Firebug's Command Line? Just leave a comment and we can discuss it!

It's now easy to copy entire portions of existing HTML markup and paste it back to the document or even to another window.

Also, this feature works for HTML as well as for XML and SVG.

See all Firebug tips

HTML Clipboard

Copy and Paste actions are available through context menu associated with an HTML element. Cut action is actually not implemented, but you can remove elements in the HTML panel by selecting them and pressing Delete key or picking Delete Element from the context menu.

In order to copy HTML markup just right-click on an element.

You can also right-click on an element logged in the Console panel. You'll get the same context menu.

You can paste the clipboard content as a HTML markup to any text editor. In this particular case (see the screenshot) the text would be:

<div>Hello World!</div>

Or you can paste it into any document through Firebug HTML Panel

In this example, the <div> element is now duplicated.

You can also copy valid HTML markup from any text editor and paste it into the HTML panel.

Styled logging allows the user of console.log() API to use custom CSS styles.

How to specify custom CSS

First of all take a look at a simple example:

Where the %c is used as a style format variable. This is how the log appears in the Console panel.

See all Firebug tips

Style format variable can be used more then once in the log. The custom style is always applied till another one is used.

Here is another example using font-size and text-shadow:

Image Logging

Let's see a bit more practical example of styled logging. In this case we'll implement a simple new method that can be used to log images.

Usage is simple:

And this is how the logs appear in the Console panel:

Couple of quick notes about window.postMessage:

• It enables cross-origin communication.
• It places a message in the message queue associated with the thread that created the specified window and returns without waiting for the thread to process the message.

See all Firebug tips

window.postMessage()

Let's see a quick example showing how to use postMessage().

Posting a message:

Receiving a message:

monitorEvents()

In order to monitor messages sent to the iframe in the previous example we'll utilize monitorEvents command available on Firebug's Command Line (see also Log DOM Events)

All you need to do is execute the following expression on the Command Line:

To stop monitoring, you need:

As soon as the monitoring is on and a message is sent to iframe, you should see a log in the Console panel.

The log has three parts:

• origin window/iframe URL
• data associated with the message
• target window/iframe object

If you click the log you'll be navigated into the DOM panel for detailed inspection of the MessageEvent object. Check out the next screenshot.

Install Firebug 1.11 beta 1 and checkout live example!

You can see the graph if you execute performance.timing expression in Firebug command line.

From MDN:

The Navigation Timing API provides data that can be used to measure the performance of a website. Unlike other JavaScript-based mechanisms that have been for the same purpose this API can provide end-to-end latency data that can be more useful and accurate.

• Page Load 948ms Time needed to load the page (from navigationStart to loadEventEnd).
• Waiting 11ms Waiting for response time (from requestStart to responseStart)
• Receiving 37ms Time needed to download the response (from responseStart to responseEnd)
• DOM Processing 883 ms Time needed to build DOM (from responseEnd to loadEventStart
• DOMContentLoaded 34ms Time needed to handle DOMContentLoaded event (from domContentLoadedEventStart to domContentLoadedEventEnd)
• onLoad 4ms Time needed to handle onLoad event (from loadEventStart to loadEventEnd)

Some events are visualized using vertical lines on the graph. If you need detailed info about what they represent hover mouse over the graph and check the info tip.

The screenshot also indicates that Performance Timing (Detailed Timing) section is expandable providing detailed information about all events, relative time since the page load beginning and also short description for every individual event.

You can hover mouse over individual entries in this table and see appropriate vertical line dynamically rendered over the waterfall graph to show when exactly the event happened.


If you want to inspect the original values stored in window.performance.timing object, right click on the green object-log at the bottom and pick Inspect in DOM Panel from the context menu.

You should be navigated to the DOM panel and see all the values as they are exposed to the page.

Note that data displayed by the Net panel are collected by Firebug while data stored within performance.timing object are collected by the browser itself.

Do you have any tips how to improve this feature?

This button is called Firebug Start Button and its main purpose is to open Firebug UI by clicking on it (you can also use F12 key to open Firebug) but, the button does much more than just opening Firebug...

See all Firebug tips

Activation Status

Another purpose of the start button is indicating Firebug activation status. If Firebug is opened in your browser and collecting information about the current page (e.g. HTTP traffic) - the button is colored. If Firebug is deactivated and not representing any performance penalties - the button is grey.

Firebug is activated

Firebug is deactivated

There is also a tooltip associated with the button displaying detailed info about activation status.

Firebug is fully deactivated.

Firebug is activated on one page and panel Cookies is disabled.

Errors

If there are any errors on the page, the button indicates that by showing a badge with number of errors.

Menu

There is also a popup menu associated with the button

By default, the button indicates errors on the page and Firebug UI is located at the bottom. See detailed description of individual menu items on Firebug wiki.

Start button at the bottom

If you prefer to have the button at the bottom of the browser window (within Firefox add-on bar), use Firefox Customize Toolbar dialog.

Open the dialog through Toolbar Layout... menu.

As soon as the dialog is opened, you can drag the start button icon and drop it at the add-bar at the bottom of the browser window. That's it, don't forget to make sure the add-on bar is checked to be displayed (see the screenshot above).

If you have any tips how to improve this feature leave a comment, thanks!