LiveCoder for Firebug developers

LiveCoder extends Firebug by allowing developers to look at the Firefox chrome. It's especially valuable to developers building Firefox add-ons. LiveCoder's GUI lets you examine and modify the DOM of any Firefox add-on.

To install:

  1. install Firebug
  2. install LiveCoder
In Firefox 3, if you get this error:
"LiveCoder" will not be installed because it does not provide secure updates.
follow these steps:
  1. enter "about:config" into address bar
  2. right click somewhere in the list of keys below; select New->Boolean
  3. enter "extensions.checkUpdateSecurity" as the name
  4. select false as the value
  5. install LiveCoder again
Evaluate Expressions

Examine and modify the current state in Firebug. View objects, functions, strings, etc. Some favorites include:

  • FirebugContext.getPanel('net') - your Firebug panel
  • FirebugContext.getPanel('net').panelNode - your panel's document
  • FirebugContext.window.document.body - the current web page
View and Modify Functions

Fat-fingered another one? Want to add a quick debug statement? Make your fixes and save them in LiveCoder and avoid the edit-save-build-install-restart-test cycle.

Edit Panel HTML

Tweaking HTML and CSS in your panel's document is a slow process when you have to re-install to see every change. LiveCoder lets you View any panel's HTML. Any changes can be saved and viewed immediately.

Contact Steve