Development Blog

Chromebug 0.5 context menu

Since my first post on Chromebug 0.5a1 netted a nice offer from davida, it’s time for a sober look at the new UI. Here’s a reminder of the top part of the UI:

Chromebug 0.5a1 on Firefox

Let’s start at the top right, the “context” menu.  This is the main selector for the rest of the UI.  Each entry on this menu is a global scope, usually the thing Javascript developers think of as window.  Here is the top part of my context menu now:

Context Menu example for Chromebug 0.5a1 (top part)

Context Menu example for Chromebug 0.5a1 (top part)

At the top is browser.xul, the window for Firefox. Below that are four Firebug windows. Two are the browsers Firebug uses for its main panel and side panel. Firebug’s HTML templates (domplates) fill these windows. Two are the inner and outer window for Firebug’s tracing console.

Below that we have the Error Console window (I usually run with -jsconsole) and then the hiddenWindow. All of these are nsIDOMWindows.

Selecting any of these will cause the lower part of the Chromebug UI to fill with content from the corresponding  scope.  For example, selecting browser.xul will cause

  • the HTML  panel to show the elements of browser.xul as rendered by Firefox;
  • CSS will list the CSS files in browser.xul;
  • Script panel will show the JS files loaded in to browser.xul;
  • DOM will be document object for browser.xul.

(The Console and Net panels may show something, I don’t know yet).

Most of the time this will be great. The DOM panel should work well because its all about scope. HTML should be good if you understand how to work with windows in chrome code. Script may be more confusing.  Javascript can be compiled in to multiple scopes. For example, Firebug files are in both browser.xul and in traceConsole.html. Also Javascript in one scope can operate on content in another.  For example, Firebug has no scripts in either panel window, it just puts content in those windows. And finally, the total number of files in browser.xul can be large, leaving you drowning in stuff you aren’t interested in seeing.

Chromebug has some facility to help with these issues. Next time we’ll look into these, as well as ponder the contexts I cropped off the bottom of the menu. If you want to play in the mean time you can try Chromebug 0.5a1 (you also need Firebug 1.4a12).


Comments are closed.