Always at your service

Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.

Inspect and edit HTML

Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

Tweak CSS to perfection

Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly.

Visualize CSS metrics

When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

Monitor network activity

Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner's servers taking a siesta? Firebug breaks it all down for you file-by-file.

What's New:

Added download to Firebug 3.0.0 Beta 2

Console Panel

  • Added preference extensions.firebug.groupLogMessages to define whether to group console messages
  • Clicking the bracket of a logged array shows it inside the DOM Panel
  • Mutation Observers are listed when executing getEventListeners on an HTML element
  • console.count(
  • Added menu option to control log message grouping
  • Console API is now also available in web workers
  • Log message counter was moved to the left

Command Line

  • The command history is now limited
  • The Command Editor now has an auto-completion like the Command Line
  • Switching to the Console panel now always focuses the Command Line
  • Command Editor now has line numbers
  • Added option to pretty-print the source
  • Allowed to change the indention within the Command Editor

HTML Panel

  • All classes of an element are listed inside the Element Path
  • Added Ctrl + E as shortcut for editing the selected element
  • Changed Alt + double-click to Alt + click for editing the selected element
  • Unnecessary tooltips were removed
  • Clicking > allows adding a new attribute to an element
  • Added search by CSS selector and XPath
  • Added auto-completion for HTML attributes and SVG attributes
  • Added auto-completion for CSS styles within the style attribute
  • Hovering cropped attributes now displays their full value
  • XPath can now be copied as relative and absolute path
  • Edit Mode now has line numbers and syntax highlighting
  • Added regular expressions search

Events Side Panel * Integrated EventBug into Firebug by creating a new Events side panel within the HTML Panel

Inspector

  • Quick Info Box can be pinned

CSS Panel

  • Color values can now be displayed as authored
  • Source Edit Mode now has line numbers and syntax highlighting

Script Panel

  • Notification is shown when the source cache got exceeded
  • Added an option to only stop the script execution on uncaught exceptions
  • Added syntax highlighting for the code
  • Breakpoint condition editor auto-completion uses variables in scope
  • JSD2 got adopted
  • Added button for pretty-printing
  • Allowed to inspect selected expression

Watch Side Panel

  • Added shortcut Alt + W for creating a watch expression from the current Script Panel selection
  • Exceptions and return values of functions are shown and return values can even be modified

DOM Panel

  • Added context menu option to set a breakpoint on a function

Net Panel

  • Headers in net requests can be collapsed
  • Improved JSON parsing
  • It is now indicated that the panel is initially sorted by the timeline

Cookies Panel

  • Added option to copy cookies to the clipboard as JSON (hidden behind preference extensions.firebug.cookies.jsonClipboardExport)
  • Cookies are now sorted alphabetically

Search Field

  • Current panel's name is displayed as placeholder
  • Pressing the search field shortcut selects the previously entered text
  • Search field and search options popup got redesigned
  • Pressing Esc in search field clears it

Start Button

  • Clicking and hovering the error badge have different actions than the toolbar button

API

  • Added possibility to modify a panel's tab
  • getContextMenuItems() now provides the mouse coordinates

Miscellaneous

  • Clear Activation List confirmation can be bypassed
  • monospace is now used also on Mac OS instead of Monaco
  • Improved ancestor path design

You may also want to see the complete list of enhancements of Firebug 2.0.