Firebug Extensions

From FirebugWiki

Jump to: navigation, search

Firebug extensions augment or otherwise enhance the Firebug extension. Firebug extensions typically come in the form of Firefox add-ons.

Chromebug NetExport FireStarter Eventbug
Firebug Code Coverage Net Panel History Overlay Live Coder Firecookie
FirePHP Firequark FireQuery Firediff
Firefocus Jiffy Pixel Perfect FireRainbow
YSlow Inline Code Finder Firesymfony CodeBurner
ColdFire SenSEO FormBug FirePython
XRefresh Firefinder FireAtlas FirePalette
CSS Usage Widerbug Log to Net panel Firepicker
Firebug Paint Events Page Speed Closure Inspector Drupal For Firebug
Crossfire Omnibug FireLinkReport AMF Explorer
FireFile FireSpider FireFontFamily

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.

Contents

[edit] Creating Extensions

[edit] Existing Extensions

[edit] Miscellaneous

[edit] Firecookie

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.

Author: Jan Odvarko, download from Mozilla Addons site

[edit] 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.

[edit] Firestarter

FireStarter is a Firebug extension that extends Firebug's activation model with advanced features.

[edit] Drupal For Firebug

Drupal For Firebug

Drupal for Firebug extends Firebug to provide Drupal specific debugging and status messages to help with Drupal development.

[edit] Firediff

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.

[edit] Firefocus

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.

[edit] FormBug

FormBug simulates HTML form fill-in and serialization as an aid to testing form-intensive sites.

[edit] XRefresh

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.

[edit] Firefinder

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.

[edit] Omnibug

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.

[edit] Firebug Paint Events

Firebug Paint Events allows to view details of MozAfterPaint events, using Firebug.

[edit] 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.

  • File:Fb_dead_logo1_transparent.png Dead bug icon designed by Kara Rawson.
  • Download


[edit] UI Enhancements

[edit] 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.

Author: SitePoint (Download)

[edit] 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)

[edit] Firequark

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.

[edit] Pixel Perfect

Pixel Perfect

Pixel Perfect is a firebug extension that allows web developers to easily overlay a web composition over top of the developed html.

[edit] FireRainbow

FireRainbow

FireRainbow brings Javascript syntax highlighting to Firebug.

Author: Antonin Hildebrand, download from [Mozilla Add-ons https://addons.mozilla.org/en-US/firefox/addon/9603] site

[edit] FirePalette

FirePalette

FirePalette provides the color picker to Firebug's CSS panel, and a menu item "Pick xxx color ..." to the context menu of color value (#112233, black, rgb(0, 12, 34)) in CSS panel. It also works correctly with the color that is a part of mixed CSS values, like "background: #FF8800 none repeat scroll 0 0", "border: 1px solid black".

[edit] Widerbug

Widerbug

A modified version of Firebug optimized for widescreen monitors.

[edit] Firepicker

Firepicker

Firepicker automatically adds color picker to Firebug's inline CSS editor.


[edit] Debugging

[edit] Chromebug

Chromebug

Chromebug is Firebug for XUL applications, especially Firefox extensions. We use Chromebug to debug Firebug!

Author: John J. Barton (Download)

[edit] Eventbug

Eventbug is a Firebug extension that lists all of the event handlers on the page grouped by event type (see a blog post).

Author: John J. Barton, Jan Odvarko (Download)

[edit] Firebug Code Coverage

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)

[edit] LiveCoder

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, download from Mozilla Add-ons site (experimental)

[edit] FirePHP

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.

Author: Christoph Dorn, download from Mozilla Add-ons site

[edit] FireQuery

FireQuery

FireQuery adds a collection of jQuery-related enhancements to Firebug. Recommended for all jQuery developers.

Author: Antonin Hildebrand, download from Mozilla Add-ons site

[edit] Firesymfony

Firesymfony

Firesymfony integrates debugging support for the Symfony PHP development framework in to Firebug.

[edit] ColdFire

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.

[edit] FirePython

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.

[edit] FireAtlas

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

[edit] AMF Explorer

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.

[edit] FireLinkReport

FireLinkReport

FireLinkReport allows viewing all links on the currently open page.

[edit] Flashbug

Flashbug

Flashbug is a Firebug extension for Flash. Displays all the running .SWF file trace output. Requires Flash Player Debugger to work properly.

[edit] Closure Inspector

A development extension to Firebug for working with Closure Library and Closure Compiler


[edit] Performance

[edit] YSlow

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

Author: Yahoo, Inc. (Download)

[edit] NetExport

NetExport is a Firebug extension that allows exporting data from the Net panel.

Author: Jan Odvarko (Download)

[edit] Net Panel History Overlay

Net Panel History Overlay

Net Panel History Overlay adds history functionality to firebug net panel.

Author: Mihailo Lalevic, download from Mozilla Add-ons site (experimental)

[edit] Jiffy

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.

Author: Bill Scott of NetFlix, download from Mozilla Add-ons site (experimental)

[edit] Inline Code Finder

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.

Author: Robert Nyman, download from Mozilla Add-ons site

[edit] SenSEO

SenSEO

SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.

[edit] CSS Usage

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.

[edit] Log to NetPanel

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.

[edit] 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.

[edit] FireFile

FireFile is a Firebug extension to save the CSS files edited with Firebug live to your web server. That makes Firebug become the first remote-save live-preview CSS editor and allows ultra-fast webdesign.

[edit] 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.

[edit] FireFontFamily

FireFontFamily

FireFontFamily highlights the rendered font-family inside the Style Side Panel

Retrieved from "http://getfirebug.com/wiki/index.php/Firebug_Extensions"
Personal tools