Firebug Extensions
From FirebugWiki
Firebug extensions augment or otherwise enhance the Firebug extension. Firebug extensions typically come in the form of Firefox add-ons.
List of known Firebug extensions (in alphabetical order):
Are you an author of a new extension for Firebug and want us to update the page? Just open a new issue on Firebug issue list.
Creating Extensions
Existing Extensions
Miscellaneous
Firecookie
Firecookie is a an extension for Firebug that allows to view, manage and debug cookies in your browser. Apart from all the other cookie managers and viewers available as Firefox extensions, this one is made as an extension for Firebug. This means that web developers have the functionality accessible within the familiar Firebug's UI.
- Visit website
- Download from Mozilla Addons site
- Get the source code (Firebug's BSD-style license)
- Report an issue
Author: Jan Odvarko
Crossfire
Crossfire is a Firebug extension which implements a JSON protocol to allow remote clients (like an IDE or code editor) to connect to Firebug.
- Read more about Crossfire
- Download from getfirebug.com
- Get the source code (Firebug's BSD-style license)
- Report an issue
Author: Michael G. Collins, FWG
FireStarter
FireStarter is a Firebug extension that extends Firebug's activation model with advanced features.
- Download from getfirebug.com
- Get the source code (Firebug's BSD-style license)
- Report an issue
- Ask a question in the news group
Drupal For Firebug
Drupal for Firebug extends Firebug to provide Drupal specific debugging and status messages to help with Drupal development.
- Visit website
- Download from Mozilla Add-ons site.
Firediff
Firediff is a Firebug extension whose goal is to provide additional insight into the changes that are being made to the components of the page. Firediff currently requires a recent build of Firebug, with a strict requirement of at least version 1.4.
- Visit website
FireFile
FireFile is a Firebug extension to save CSS files edited with Firebug to your web server. This makes Firebug the first CSS editor with live preview and remote saving, which enables ultra fast web design.
- Download from Mozilla Add-ons site
- See FireFile's github wiki or
more info(broken link: server not found)
cssUpdater
cssUpdater lets you live sync and save your Firebug CSS changes with one click. So when you reload your site, your layout is preserved.
- Visit website
- Download from cssupdater.com or from Mozilla Add-ons site
- Report an issue
Author: Johan Andersson
Firefocus
Firefocus is a simple Firebug extension that tracks the element that currently has focus. Its primary purpose is to assist the debugging of advanced keyboard implementations. Firefocus requires Firebug 1.4 or later.
- Visit website
FormBug
FormBug simulates HTML form fill-in and serialization as an aid to testing form-intensive sites.
- Visit website
XRefresh
XRefresh can refresh browser as you modify source files. This is especially usefull for editing CSS files on a development machine with two monitors. When you hit CTRL+S (or whatever key for save), XRefresh will detect it and refresh the web page for you.
Firefinder
Firefinder is an add-on to Firebug, to help find HTML elements matching chosen CSS selector(s) or XPath expression. You can also auto-select elements when hovering or via the context menu.
View the results and then share them with a friend via the FriendlyFire feature, or click Inspect to go to the corresponding element in Firebug's HTML tab.
- Visit website
- Download from Mozilla Add-ons site
Omnibug
Omnibug is a plugin for Firebug to ease developing web metrics implementations. Each outgoing request (sent by the browser) is checked for a pattern; if a match occurs, the URL is displayed in a Firebug panel, and decoded to show the details of the request. In addition, requests can be logged to the filesystem.
- Visit website
Firebug Paint Events
Firebug Paint Events allows to view details of MozAfterPaint events, using Firebug.
- Visit website
- Download from Mozilla Add-ons site
Deadbug
Deadbug modifies the Firebug status bar icon to change to an image of an upside down (i.e. 'dead') bug when Firebug is turned off. This allows people who are colorblind or have low-contrast displays to easily tell whether Firebug is active.
-
Dead bug icon designed by Kara Rawson.
- Download
Adobe BrowserLab
Launch Adobe BrowserLab directly from Firebug, to preview temporary changes you’ve made using Firebug. BrowserLab generates screenshots of your pages (public or behind a firewall) in multiple browsers.
- Visit website
- Download from Mozilla Add-ons site
ConsoleExport
ConsoleExport is a Firebug extension that allows exporting logs from the Console Panel. Once the extension is installed there is a new Export button available in the Console Panel toolbar.
- Visit home page
- Download from softwareishard.com
- Author: Jan Odvarko
selectbug
selectbug enhances the CSS Panel by a Side Panel, that shows all nodes, to which the selected rule was applied.
- Download from getfirebug.com
- Get the source code
- Author: John J. Barton
UI Enhancements
Acebug
Acebug is a Firefox add-on that integrates with Firebug is a simple Firebug extension that brings some of the awesome features of the Ajax.org Cloud9 Editor (Ace) to Firebug's large command line.
Features
- Syntax Highlighting
- Auto indentation and outdent
- Highlight matching parentheses
- Load from file
- Save to file
- Execute selection
- Stream Comment
We also plan on adding a bunch of new features to Acebug in the future
- Validate as you type
- Wordwrap
- Auto-completion
- Fully customizable key bindings including VI and Emacs modes
- Themes (TextMate themes can be imported)
- Display hidden characters
- Integrate with the script panel so that the whole panel works with your chosen syntax highlighting when debugging
Links
- Visit website
- Download from Mozilla Add-ons site
- Get the source from github
- Use the issues list to report an issue
CodeBurner
CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The extension's core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties. The extension also hooks into context-menus in the HTML and CSS panels, the DOM crumbtrail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.
Firebug Autocompleter
Firebug Autocompleter adds an auto-completion to Firebug's Command Editor, which can be toggled on and off.
- Download from Mozilla Add-ons site
Author: yamapikarya
Firefinder
Firefinder is an extension to Firebug and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.
Author: Robert Nyman (Download)
Firequark
Firequark is an extension to Firebug to aid the process of HTML Screen Scraping. Firequark automatically extracts css selector for a single or multiple html node(s) from a web page using Firebug (a web development plugin for Firefox). The css selector generated can be given as an input to html screen scrapers like Scrapi to extract information. Firequark is built to unleash the power of css selector for use of html screen scraping.
- Visit website
Pixel Perfect
Pixel Perfect is a firebug extension that allows web developers to easily overlay a web composition over top of the developed html.
- Visit website
- Download from Mozilla Add-ons site
- Report an issue
FireRainbow
FireRainbow brings Javascript syntax highlighting to Firebug.
- Visit website
- Download from Mozilla Add-ons site
Author: Antonin Hildebrand
Widerbug
A modified version of Firebug optimized for widescreen monitors.
- Visit website
- Download from Mozilla Add-ons site
Firepicker
Firepicker automatically adds color picker to Firebug's inline CSS editor.
- Visit website
- Download from Mozilla Add-ons site (experimental)
FireSass
FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles.
- Visit website
- Download from Mozilla Add-ons site
FireStylus
FireStylus is a Firebug extension that makes Firebug display the Stylus filename and line numbers of the Stylus-generated CSS styles rather than those of the generated CSS.
- Visit website
- Download from Mozilla Add-ons site
Author: Julien Kernec'h
Arboreal
Arboreal is a Firebug extension for DOM tree visualization.
- Visit website
- Download from Mozilla Add-ons site
FirePath
FirePath is a Firebug extension that adds a development tool to edit, inspect and generate XPath 1.0 expressions and CSS 3 selectors.
- Visit website
- Download from Mozilla Add-ons site
Debugging
Chromebug
Chromebug is Firebug for XUL applications, especially Firefox extensions. We use Chromebug to debug Firebug!
- Chromebug User Guide
- Requires Firebug 1.5
- Works on Firefox 3.0 and later
- Newsgroup: mozilla.addons.chromebug
- Get source code
Author: John J. Barton (Download)
Eventbug
Eventbug is a Firebug extension that lists all of the event handlers on the page grouped by event type (see a blog post).
- The source code has Firebug's BSD-style license.
- Download from getfirebug.com
- Use Firebug's issue tracker to report an issue.
- Use Firebug's news group to ask a question.
Author: John J. Barton, Jan Odvarko (Download)
Firebug Code Coverage
Firebug Code Coverage adds entry function code coverage for JavaScript code. Adds a button next to the Profiler in Firebug.
Author: Zach Leatherman, download from Mozilla Add-ons site (experimental)
Code Coverage for Firebug This Firebug extension is used to report Javascript code coverage. Zach's extension was migrated to Firebug 1.6/Firefox 3.6
Author: Jun Ma, download from Mozilla Add-ons site (experimental)
FirePHP
FirePHP enables you to print to your Firebug Console using a simple PHP function call. All data is sent via a set of X-FirePHP-Data response headers. This means that the debugging data will not interfere with the content on your page. Thus FirePHP is ideally suited for AJAX development.
- Visit website
- Report an issue
- Join FirePHP group
Author: Christoph Dorn, download from Mozilla Add-ons site
FireFlow
FireFlow uses the JSD to get method call callbacks and logs them in a tree format. It supports searching and adding filters on card.
- Visit website
- Download from Mozilla Addons site
Author: Apurba Nath
FireQuery
FireQuery adds a collection of jQuery-related enhancements to Firebug. Recommended for all jQuery developers.
- Visit website
- Download from Mozilla Add-ons site
Author: Antonin Hildebrand
Javascript Deminifier
Javascript Deminifier will deminify javascript before it is downloaded. It is actually not a Firebug extension, because you can also use it with other debuggers.
The plugin uses the algorithm from jsbeautifier.org to beautify JavaScript.
- Visit website
- Download from Mozilla Addons site
- Report an issue
Author: Ben Murphy
LiveCoder
LiveCoder lets you poke at the browser's DOM, just like Firebug. But LiveCoder also lets you examine Firebug itself. In addition to examining the DOM, you can alter it including changing functions. This is a great way to debug your code and test fixes more quickly.
Author: Steve Souders.
Firesymfony
Firesymfony integrates debugging support for the Symfony PHP development framework in to Firebug.
- Visit [1]
- Download from Mozilla Add-ons site
ColdFire
ColdFire is an extension to Firebug which displays ColdFusion debugging information in a Firebug tab as opposed to the bottom of the page. Because ColdFire sends debugging data to the browser via custom HTTP headers it does not break CSS page layouts and works well with AJAX and Flash Remoting requests.
- Visit website
FirePython
FirePython enables you to debug your application's server side Python code from within your browser. FirePython is a server-side Python library, which hooks into standard Python logging module and sends logging events to a client-side using a Firefox browser extension called FireLogger.
- Visit website
- Download from Mozilla Add-ons site
FireAtlas
FireAtlas is an extension to Firebug dedicated to ASP.NET AJAXdebugging. This extension will provide you with useful services when developing ASP.NET AJAX web sites:
- PageRequestManager events tracing
- WebService calls tracing and inspection
- Partial Update inspection within Firebug Net Panel
- Application components listing
- Visit website
- Download from Mozilla Add-ons site
AMF Explorer
AMF Explorer is based on the JSON Explorer and XML Explorer features of Firebug, AMF Explorer allows web developers to view deserialized AMF messages in Firebug's Net panel.
- Visit website
- Download from Mozilla Add-ons site
FireLinkReport
FireLinkReport allows viewing all links on the currently open page.
- Visit website
- Download from Mozilla Add-ons site (experimental)
Flashbug
Flashbug is a Firebug extension for Flash. It displays all the running .SWF file trace output and requires Flash Player Debugger to work properly.
- Visit website
- Download from Mozilla Add-ons site
Author: Gabriel Mariani
Closure Inspector
A development extension to Firebug for working with Closure Library and Closure Compiler
- Visit website
Illuminations for Developers
Illuminations for Developers is a tool to help you develop web applications by investing Firebug with the knowledge of your JavaScript framework and your workflow with it.
- Requires Firebug 1.6 or later
- Works on Firefox 3.6 and later
- Visit website
- Supports ExtJS 2.x, 3.x, 4.x, and Sencha Touch
- Preliminary support for Dojo 1.5, SproutCore, YUI3, Closure Lib, qooXdoo, and jQuery UI
Author: Steven Roussey (Mozilla Add-ons) Download
Dojo Firebug Extension
Easy access to Dojo features: list dijit registry, and inspect visual widgets, view and breakpoint connections and subscriptions.
- Works on Firefox 3.6 and later
- Requires Firebug 1.6 (preferred Firebug 1.7+)
- Read the Documentation
- Download from getfirebug.com
- Get the source code (Firebug's BSD-style license)
- Report an issue
Authors: Patricio Reyna Almandos and Fernando Gomez
ZikulaBug
ZikulaBug is a Firebug extension, which provides a friendly interface for Zikula's DebugToolbar. It allows to browse Zikula debug data grouped in eight tabs: General, Configuration, SQL, Templates, Function Executions, Log Console, HTTP request and Settings.
- Visit website
- Download from Mozilla Addons site
Author: Paweł Preneta
ConsoleML
ConsoleML is an extension to Firebug which displays MarkLogic logging information in Firefox Firebug.
- Visit website
- Download from Sirma Solutions site
Features:
- Enables you to debug your application's server-side MarkLogic code from within your browser.
- Works with a build-in MarkLogic logging module. It does not affect page layout and works well with AJAX Remoting requests.
- Reads the MarkLogic Log file and sends logging events to client-side using a Firefox browser extension.
- Gives you an opportunity to save a part of the log files.
- Displays local and remote logs.
- Currently shows debugging information for all MarkLogic log levels: Finest, Finer, Fine, Debug, Config, Info Notice, Warning, Error, Critical, Alert, Emergency
- Offers numerous configuration options for log levels and filters to limit the displayed log to a desired set of options.
Author: SirmaSolutions
Performance
YSlow
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.
YSlow gives you:
- Performance report card
- HTTP/HTML summary
- List of components in the page
- Tools including JSLint
- Visit website
Author: Yahoo, Inc. (Download)
NetExport
NetExport is a Firebug extension that allows exporting data from the Net panel.
- Requires Firebug 1.5
- Uses HTTP Archive format for export.
- The extension appends a new Export button into Net panel's toolbar.
- The source code has Firebug's BSD-style license.
- Use Firebug's issue list to report an issue.
- Use Firebug's discussion group to ask a question.
- Visit website
- Download from getfirebug.com
Author: Jan Odvarko
Net Panel History Overlay
Net Panel History Overlay adds history functionality to Firebug's Net Panel.
- Visit website
- Download from Mozilla Add-ons site (experimental)
Author: Mihailo Lalevic
Jiffy
The Jiffy Firefox extension adds an additional panel to Firebug that provides a visual view of the Javascript time measurements captured by Jiffy-Web.
- Visit website
- Join Jiffy-Web group
Author: Bill Scott of NetFlix, download from Mozilla Add-ons site (experimental)
Inline Code Finder
Inline Code Finder looks for any of these in a web page:
- inline JavaScript events
- Inline style
- javascript: links
The idea is to promote separation between content (HTML), presentation (CSS) and interaction (JavaScript) - especially the ideas and thinking behind the unobtrusive JavaScript approach.
- Visit website
- Download from Mozilla Add-ons site
Author: Robert Nyman
CSS Usage
With CSS Usage you can look at your CSS rules and see which ones of them are actually used on your website and which aren't.
- Download from Mozilla Add-ons site
Log to NetPanel
Log to NetPanel allows you to add markers to the Net panel from javascript. They appear as extra bars below the network downloads. That way, you can find out at what point in the download sequence specific javascript code is running. If you log twice with the same name, a bar will appear from the first to the second point in time.
- Download from Google Code
- See more info
Page Speed
Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
- Visit website
FireSpider
FireSpider is a an extension for Firebug that can help you find broken or misleading urls and optimize your web page for search engines.
- Download from hopto.org
[NOTE: the link to the hopto.org site doesn't appear to be working, despite numerous references to it online. Try this link to the author's own site instead: http://blog.xrado.si/post/firespider-extension-for-firebug .]
FireFontFamily
FireFontFamily highlights the rendered font-family inside the Style Side Panel
- Download from Mozilla Add-ons site
FireEyes
FireEyes is an unprecedented, nextgen web accessibility tool that ensures both static and dynamic content within a web portfolio are compliant with standards such as Section 508, WCAG 1.0, and WCAG 2.0. You can use another tool, but it won’t be fully JavaScript aware or handle event-based page content, like FireEyes.
- Download from FireEyes site
