Subscribe to RSS Feed

Firebug 1.11 final has been just released and one of the new features introduced in this release is related to HTML clipboard.

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.


Styled logging has been available in Firebug for long time and since version 1.11 beta 2 improves this little nifty feature, let's take a sneak peak at what it does and how it could be useful.


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:

console.log("%cred text", "color:red");

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


One of the new improvements introduced in Firebug 1.11 beta 1 is better monitoring of messages sent between frames/windows. These messages are sent via window.postMessage.

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.


One of the new features introduced in Firebug 1.11 alpha 5 is new waterfall timing graph displayed in Firebug's Console panel and visualizing Navigation Timing data (measured events related to page load performance).

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.


The Firebug entry point and also the only Firebug UI visible immediately after installation is s Firebug button (icon) placed at the right side of the navigation Firefox toolbar.

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...


Firebug's Net panel offers an option called Show BFCache Responses that allows tracking also responses coming from BFCache. But what the heck is this cache for?

Read this post to understand how this cache is different from the standard browser cache and why Firebug supports it.


Updated: how to use this feature from the command line

Have you ever placed console.log into a JS function just to figure out whether the function has been executed? Did you also happen to make a syntax error when doing that code modification? ;-)

Then you could be interested in Firebug feature that allows to log function calls without changing the code!

This feature is ready behind a Log Calls To ... menu item that is available if you right click on a function link (e.g. in the DOM panel).


Updated: how to use this feature from the command line

This Firebug feature is called simply Log Events and allows developers to log DOM events into the Console panel.

All you need to do is right click on an element in the HTML panel, pick Log Events from the context menu and switch to the Console panel to see the logs in action.


Firebug is mainly a debugger and being able to stop Javascript execution on a breakpoint is obviously one of its essential features.

Also, ability to break on a breakpoint only if certain condition is true is useful feature and so, check out this post if you are interested how to properly create a conditional breakpoint in Firebug.

This post covers three types of conditional breakpoints.

  • Javascript Breakpoint
  • XHR Breakpoint
  • Cookie Breakpoint


Firebug is a tool for web developers and its features like JavaScript debugging and HTML/CSS inspection are well known, but there are also many little features users often don't know and so, they deserve more publicity.

One set of such features is related to XML and I'd like to describe them in this post. So, let's see what Firebug offers to developers who deal with XML!

  • XML Posted Over HTTP
  • XML in HTTP Response Bodies
  • XML in Cookies
  • XML Logging
  • Query XML Documents


Next Page »