Friday, February 6th, 2009

FireScope: Add a Web reference to your Firebug

Category: Debugging, Utility

Firescope is a nice new Firebug extension that adds a reference tab to your debugging pane as well as hooks into your context menu.


  • You can search for HTML elements, HTML attributes, or CSS properties (or any combination). The search happens live as you type, so usually you’ll only have to type one or two letters to get the results you want.
  • Search results have information about browser compatibility, standards-compliance, and a brief summary of usage. There are also links to further information on the SitePoint Reference web site.
  • Right-click in the search results and you’ll be given two options, one of which is for more information online, and the other is to show a code example for the selected item.
  • Code examples open in the side-panel of the Reference, HTML or CSS panels, and are practical examples with summaries, to show you how the item can be used. Code examples are also editable and easy to copy (simply double-click in Firefox 3 to Select-All).
  • In the HTML panel you can right-click on any element name, attribute name or attribute value (include while it’s being edited) and you’ll have two options — to “Look up” the item you clicked on, or to “Show Code Example” for that item.
  • Similarly, in the CSS panel you can right-click any property name or value, for the same options.
  • While in the HTML panel, if you right-click on the tag name of the element that’s currently selected (usually highlighted in dark blue), the context menu will say “Look up selection”; clicking that will then do a special search — for the selected element, all the attributes that are defined for it, and all the CSS properties that currently apply to it. The special search also happens automatically — whenever you click the “Reference” tab, the panel will default to showing you data for the currently-selected element.
  • While using the Inspector to select different elements, if the Code Example side-panel in the HTML panel is open, it will automatically bring up an example for whatever element is being inspected.
  • Likewise, the DOM crumbtrail responds to clicks to show code examples, if the Code Example side-panel is open. It also has context-menu items the same as the main HTML panel, with options to look-up the selected item or view a code example for it.

Posted by Dion Almaer at 9:24 am
1 Comment

4.3 rating from 34 votes

1 Comment »

Comments feed TrackBack URI

Tried it now, really nice!
In my opinion the design work on it is quite ugly,
but it does a good job!

I think it should give you all the possible CSS values for a giver attribute and not just give one example, as it is now.

Comment by vsync — February 6, 2009

Leave a comment

You must be logged in to post a comment.