Subscribe to RSS Feed

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


Break on HTML mutation feature has been introduced in an article Dynamic and Graphical Web Page Breakpoints submitted to WWW 2010.

This feature is great for exploring and learning an existing code that is dealing with HTML/UI. It allows the Firebug user to break JavaScript execution when various HTML mutation events happen and see the line of code that caused that event.

There are three types of mutation events.

  • Break On Attribute Change
  • Break On Child Addition or Removal
  • Break On Element Removal

Let's go over three simple examples that explain how to use the feature and how it can be useful to web developers. Each example is available live on this page and so, you can just open Firebug UI (or install Firebug) and try it out immediately.


Firebug 1.10 has been released today and one of the new features introduced in this version is called Trace Styles.

This feature allows tracing all places which affected specific CSS property, whether explicitly or by inheritance. The list also shows which property is actually applied.

This feature is integrated into the Computed side panel (available within the HTML panel) where every CSS property is expandable.

Of course, you need Firebug 1.10+ to try out this feature.


If you are a web designer or if you are at least dealing with fonts time to time, this neat feature should come in handy.

The feature is implemented by FireFontFamily, which is a Firebug extension created by Heather Arthur (also a member of the devtools team). So, you need to install it first if you are interested.

Update: this feature is integrated with Firebug 1.10

Simple feature description:

Highlights the rendered font-family from the list of font-families for a CSS 'font' or 'font-family' property in Firebug's CSS panel.

And couple of explanatory screenshots. The first one shows the Style side panel when FireFontFamily extension is not installed.

The other one shows the same when FireFontFamily is installed.

See that highlighted font, it's the one actually rendered.

This powerful Firebug's feature, which you can download from the internet, could be also called Edit value and continue (to use similar terminology from Visual Studio). Even if Firefox (and so Firebug) doesn't allow to edit the code itself at run-time, being able to change value of a variable while sitting at a breakpoint in the debugger is often very useful way how to check proper behavior of your code.

Let's see a simple example:

The debugger is halted at a debugger keyword (see another related tip) and the Watch panel shows that value of the message variable is Hello.

Double click on the variable in the Watch panel opens an inline editor, which allows to change its value (double-clicking on a boolean value would automatically toggle the value).

Change the value, press enter key and consequently F5 to resume the debugger. You'll see that the new value has been dynamically applied.

Note that you can edit only primitive values, but not matter where they are actually stored. They might live within global or local variables, objects or within arrays.

Check summary of all Firebug tips.

The Persist feature has been available in Firebug for some time already, but I recently got several questions indicating that it doesn't have the visibility it deserves. So, let's introduce it quickly.

Firebug UI resets every time the current browser tab is refreshed or navigated to another page - to show the new state. The consequence is that all Firebug panels trash the content (i.e. the Net or Console panel entries are lost).

This is fine since usually the user doesn't want to keep the entire history. But what in the case when you want to debug the transition process between page loads or redirects?

And this is exactly when the Persist button becomes practical...

The Persist button


Another Firebug feature that would deserve more attention is re-run (introduced here). This neat feature represented by a simple button on Script panel toolbar allows re-execution of the current call-stack you are halted on in the debugger. This helps especially in cases where it's hard to reproduce an action in the UI in order to execute specific Javascript function implemented on a page.

Of course, this button is only available when you are stopped at a breakpoint.

Lets go through real example step by step.


« Previous PageNext Page »