Firebug Extensions

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Added note to FireEyes)
(44 intermediate revisions not shown)
Line 14: Line 14:
| [[#ColdFire | ColdFire]]
| [[#ColdFire | ColdFire]]
|-
|-
 +
| [[#ConsoleExport | ConsoleExport]]
 +
| [[#ConsoleML | ConsoleML]]
| [[#Crossfire | Crossfire]]
| [[#Crossfire | Crossfire]]
| [[#CSS_Usage | CSS Usage]]
| [[#CSS_Usage | CSS Usage]]
 +
|-
 +
| [[#cssUpdater | cssUpdater]]
 +
| [[#Dojo_Firebug_Extension | Dojo Firebug Extension]]
| [[#Drupal_For_Firebug | Drupal For Firebug]]
| [[#Drupal_For_Firebug | Drupal For Firebug]]
| [[#Eventbug | Eventbug]]
| [[#Eventbug | Eventbug]]
|-
|-
| [[#FireAtlas | FireAtlas]]
| [[#FireAtlas | FireAtlas]]
 +
| [[#Firebug_Autocompleter | Firebug Autocompleter]]
| [[#Firebug_Code_Coverage | Firebug Code Coverage]]
| [[#Firebug_Code_Coverage | Firebug Code Coverage]]
| [[#Firebug_Paint_Events | Firebug Paint Events]]
| [[#Firebug_Paint_Events | Firebug Paint Events]]
-
| [[#Firecookie | Firecookie]]
 
|-
|-
 +
| [[#Firecookie | Firecookie]]
| [[#Firediff | Firediff]]
| [[#Firediff | Firediff]]
 +
| [[#FireEyes | FireEyes]]
| [[#FireFile | FireFile]]
| [[#FireFile | FireFile]]
 +
|-
| [[#Firefinder | Firefinder]]
| [[#Firefinder | Firefinder]]
 +
| [[#FireFlow | FireFlow]]
 +
| [[#Firefocus | Firefocus]]
| [[#FireFontFamily | FireFontFamily]]
| [[#FireFontFamily | FireFontFamily]]
|-
|-
 +
| [[#Fireformat | Fireformat]]
| [[#FireLinkReport | FireLinkReport]]
| [[#FireLinkReport | FireLinkReport]]
| [[#FirePath | FirePath]]
| [[#FirePath | FirePath]]
| [[#FirePHP | FirePHP]]
| [[#FirePHP | FirePHP]]
-
| [[#Firequark | Firequark]]
 
|-
|-
-
| [[#FireQuery | FireQuery]]
 
-
| [[#Firefocus | Firefocus]]
 
-
| [[#FirePalette | FirePalette]]
 
| [[#Firepicker | Firepicker]]
| [[#Firepicker | Firepicker]]
-
|-
 
| [[#FirePython | FirePython]]
| [[#FirePython | FirePython]]
 +
| [[#Firequark | Firequark]]
 +
| [[#FireQuery | FireQuery]]
 +
|-
| [[#FireRainbow | FireRainbow]]
| [[#FireRainbow | FireRainbow]]
| [[#FireSass | FireSass]]
| [[#FireSass | FireSass]]
| [[#FireSpider | FireSpider]]
| [[#FireSpider | FireSpider]]
 +
| [[#FireStarter | FireStarter]]
|-
|-
-
| [[#Firestarter | FireStarter]]
+
| [[#FireStylus | FireStylus]]
| [[#Firesymfony | Firesymfony]]
| [[#Firesymfony | Firesymfony]]
 +
| [[#Flashbug | Flashbug]]
| [[#FormBug | FormBug]]
| [[#FormBug | FormBug]]
-
| [[#Illuminations for Developers | Illuminations for Developers]]
 
|-
|-
 +
| [[#Illuminations for Developers | Illuminations for Developers (ExtJS/Dojo/etc) ]]
| [[#Inline_Code_Finder | Inline Code Finder]]
| [[#Inline_Code_Finder | Inline Code Finder]]
 +
| [[#Javascript_Deminifier | Javascript Deminifier]]
| [[#Jiffy | Jiffy]]
| [[#Jiffy | Jiffy]]
 +
|-
| [[#LiveCoder | Live Coder]]
| [[#LiveCoder | Live Coder]]
| [[#Log_to_NetPanel | Log to NetPanel]]
| [[#Log_to_NetPanel | Log to NetPanel]]
-
|-
 
| [[#NetExport | NetExport]]
| [[#NetExport | NetExport]]
| [[#Net_Panel_History_Overlay | Net Panel History Overlay]]
| [[#Net_Panel_History_Overlay | Net Panel History Overlay]]
 +
|-
| [[#Omnibug | Omnibug]]
| [[#Omnibug | Omnibug]]
| [[#Page_Speed | Page Speed]]
| [[#Page_Speed | Page Speed]]
-
|-
 
| [[#Pixel_Perfect | Pixel Perfect]]
| [[#Pixel_Perfect | Pixel Perfect]]
-
| [[#SenSEO | SenSEO]]
+
| [[#selectbug | selectbug]]
 +
|-
| [[#Widerbug | Widerbug]]
| [[#Widerbug | Widerbug]]
| [[#XRefresh | XRefresh]]
| [[#XRefresh | XRefresh]]
-
|-
 
| [[#YSlow | YSlow]]
| [[#YSlow | YSlow]]
-
| [[#FireEyes | FireEyes]]
+
| [[#ZikulaBug | ZikulaBug]]
-
| [[#ConsoleExport | ConsoleExport]]
+
-
|
+
|}
|}
Line 84: Line 94:
[[Image:Firebug-extlist-firecookie.png|thumb|400px|Firecookie]]
[[Image:Firebug-extlist-firecookie.png|thumb|400px|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.
+
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 [http://www.janodvarko.cz/firecookie website]
* Visit [http://www.janodvarko.cz/firecookie website]
 +
* Download from [https://addons.mozilla.org/en-US/firefox/addon/6683 Mozilla Addons] site
 +
* Get the [http://code.google.com/p/firecookie/source/checkout source code] (Firebug's BSD-style license)
* Report an [http://code.google.com/p/firecookie/ issue]
* Report an [http://code.google.com/p/firecookie/ issue]
-
Author: [http://www.softwareishard.com/blog/firecookie/ Jan Odvarko], download from [https://addons.mozilla.org/en-US/firefox/addon/6683 Mozilla Addons] site
+
Author: [http://www.softwareishard.com/blog/about/ Jan Odvarko]
 +
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
==== Crossfire ====
==== 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.  
[[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 [http://getfirebug.com/releases/crossfire/ getfirebug.com]
 +
* Get the [http://code.google.com/p/fbug/source/browse/#svn%2Fextensions%2Fcrossfire%2Fbranches source code] (Firebug's BSD-style license)
 +
* Report an [http://code.google.com/p/fbug/ issue]
 +
 +
Author: Michael G. Collins, FWG
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
-
==== Firestarter ====
+
==== FireStarter ====
FireStarter is a Firebug extension that extends Firebug's activation model with advanced features.
FireStarter is a Firebug extension that extends Firebug's activation model with advanced features.
-
* Requires [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug 1.5]
+
* Download from [http://getfirebug.com/releases/firestarter/ getfirebug.com]
-
* The [http://code.google.com/p/fbug/source/browse/#svn/firestarter/branches/ source code] has Firebug's BSD-style license.
+
* Get the [http://code.google.com/p/fbug/source/browse/#svn%2Ffirestarter%2Fbranches source code] (Firebug's BSD-style license)
-
* Use Firebug's [http://code.google.com/p/fbug/issues/list issue list] to report an issue.
+
* Report an [http://code.google.com/p/fbug/issues/list issue]
-
* Use Firebug's [http://groups.google.com/group/firebug news group] to ask a question.
+
* Ask a question in the [http://groups.google.com/group/firebug news group]
-
* [http://getfirebug.com/releases/firestarter/ Install Firestarter ]
+
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 114: Line 135:
* Visit [http://drupal.org/project/drupalforfirebug website]
* Visit [http://drupal.org/project/drupalforfirebug website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/8370 Mozilla Add-ons] site.
* Download from [https://addons.mozilla.org/en-US/firefox/addon/8370 Mozilla Add-ons] site.
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 119: Line 141:
[[Image:Firebug-extlist-firediff.png|thumb|400px|Firediff]]
[[Image:Firebug-extlist-firediff.png|thumb|400px|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.
+
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.
* Visit [http://www.incaseofstairs.com/firediff/ website]
* Visit [http://www.incaseofstairs.com/firediff/ website]
 +
 +
 +
<div style="clear:both;"></div>
 +
 +
==== 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 [https://addons.mozilla.org/en-US/firefox/addon/52365/ Mozilla Add-ons] site
 +
* See [https://github.com/tobiasstrebitzer/FireFile/wiki FireFile's github wiki] or <del>[http://www.strebitzer.at/projects/firefile/docs/ more info]</del> (broken link: server not found)
 +
 +
 +
<div style="clear:both;"></div>
 +
 +
==== cssUpdater ====
 +
[[Image:Firebug-extlist-cssupdater.png|thumb|400px|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 [http://www.cssupdater.com/ website]
 +
* Download from [http://www.cssupdater.com/install cssupdater.com] or from [https://addons.mozilla.org/en-US/firefox/addon/cssupdater/ Mozilla Add-ons] site
 +
* Report an [http://www.cssupdater.com/disqus issue]
 +
 +
Author: Johan Andersson
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 127: Line 172:
[[Image:Firebug-extlist-firefocus.png|thumb|400px|Firefocus]]
[[Image:Firebug-extlist-firefocus.png|thumb|400px|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.
+
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 [http://www.incaseofstairs.com/firefocus/ website]
* Visit [http://www.incaseofstairs.com/firefocus/ website]
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
==== FormBug ====
==== FormBug ====
-
[[FormBug]] simulates HTML form fill-in and serialization as an aid to testing form-intensive sites.
+
FormBug simulates HTML form fill-in and serialization as an aid to testing form-intensive sites.
* Visit [http://home.peteresnyder.com/projects/formbug website]
* Visit [http://home.peteresnyder.com/projects/formbug website]
-
<div style="clear:both;"></div>
 
 +
<div style="clear:both;"></div>
==== XRefresh ====
==== XRefresh ====
[[Image:Firebug-extlist-xrefresh.png|thumb|400px|XRefresh]]
[[Image:Firebug-extlist-xrefresh.png|thumb|400px|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.
+
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.
-
* Visit [website]
+
* Visit [http://xrefresh.binaryage.com/ website]
-
* Download from [https://addons.mozilla.org/en-US/firefox/addon/7711 Mozilla Add-ons]] site (experimental)
+
* Download from [https://github.com/darwin/xrefresh/downloads github]
-
<div style="clear:both;"></div>
 
-
==== Firefinder ====
 
-
[[Image:Firebug-extlist-firefinder.png|thumb|400px|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 [http://robertnyman.com/firefinder/ website]
 
-
* Download from [https://addons.mozilla.org/en-US/firefox/addon/11905 Mozilla Add-ons] site
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 162: Line 198:
[[Image:Firebug-extlist-omnibug.png|thumb|400px|Omnibug]]
[[Image:Firebug-extlist-omnibug.png|thumb|400px|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.
+
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 [http://www.rosssimpson.com/dev/omnibug.html website]
* Visit [http://www.rosssimpson.com/dev/omnibug.html website]
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 170: Line 207:
[[Image:FirebugPaintEvents.png|thumb|400px|Firebug Paint Events]]
[[Image:FirebugPaintEvents.png|thumb|400px|Firebug Paint Events]]
-
[[Firebug Paint Events]] allows to view details of MozAfterPaint events, using Firebug.  
+
Firebug Paint Events allows to view details of MozAfterPaint events, using Firebug.  
* Visit [http://kylescholz.com/blog/ website]
* Visit [http://kylescholz.com/blog/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/9620 Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/9620 Mozilla Add-ons] site
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 182: Line 220:
* [http://collinsmichaelg.me/deadbug-2.0.xpi Download]
* [http://collinsmichaelg.me/deadbug-2.0.xpi Download]
-
<div style="clear:both;"></div>
 
 +
<div style="clear:both;"></div>
==== Adobe BrowserLab ====
==== Adobe BrowserLab ====
[[Image:Adobe-browserlab-for-firebug.png|thumb|400px|Adobe BrowserLab]]
[[Image:Adobe-browserlab-for-firebug.png|thumb|400px|Adobe BrowserLab]]
Line 192: Line 230:
* Download from [https://addons.mozilla.org/en-US/firefox/addon/231196/ Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/231196/ Mozilla Add-ons] site
-
<div style="clear:both;"></div>
 
 +
<div style="clear:both;"></div>
==== ConsoleExport ====
==== ConsoleExport ====
[[Image:Console-export.png|thumb|400px|Console Export]]
[[Image:Console-export.png|thumb|400px|Console Export]]
-
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.
+
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 http://www.softwareishard.com/blog/consoleexport/ home page]
+
* Visit [http://www.softwareishard.com/blog/consoleexport/ home page]
-
* Download from [http://www.softwareishard.com/blog/consoleexport/ here]
+
* Download from [http://www.softwareishard.com/blog/consoleexport/ softwareishard.com]
* Author: [http://www.janodvarko.cz/ Jan Odvarko]
* Author: [http://www.janodvarko.cz/ Jan Odvarko]
 +
 +
 +
<div style="clear:both;"></div>
 +
==== selectbug ====
 +
[[Image:Selectbug.png|thumb|400px|selectbug]]
 +
 +
selectbug enhances the [[CSS Panel]] by a Side Panel, that shows all nodes, to which the selected rule was applied.
 +
 +
* Download from [http://getfirebug.com/releases/selectbug/ getfirebug.com]
 +
* Get the [http://code.google.com/p/fbug/source/browse/#svn%2Fextensions%2Fselectbug%2Fbranches source code]
 +
* Author: [[User:Johnjbarton|John J. Barton]]
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 210: Line 260:
[[Image:Firebug-extlist-acebug.png|thumb|400px|Acebug]]
[[Image:Firebug-extlist-acebug.png|thumb|400px|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.
+
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'''
'''Features'''
Line 230: Line 280:
* Integrate with the script panel so that the whole panel works with your chosen syntax highlighting when debugging
* Integrate with the script panel so that the whole panel works with your chosen syntax highlighting when debugging
 +
'''Links'''
 +
* Visit [http://www.msi-stuff.com/acebug/ website]
 +
* Download from [https://addons.mozilla.org/de/firefox/addon/acebug/ Mozilla Add-ons] site
 +
* Get the source from [https://github.com/MikeRatcliffe/Acebug github]
 +
* Use the [https://github.com/MikeRatcliffe/Acebug/issues issues list] to report an issue
 +
 +
 +
<div style="clear:both;"></div>
==== CodeBurner ====
==== CodeBurner ====
[[Image:CodeBurnerForFirebug.png|thumb|400px|CodeBurner]]
[[Image:CodeBurnerForFirebug.png|thumb|400px|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.
+
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: [http://www.sitepoint.com/ SitePoint] ([https://addons.mozilla.org/en-US/firefox/addon/10273 Download])
Author: [http://www.sitepoint.com/ SitePoint] ([https://addons.mozilla.org/en-US/firefox/addon/10273 Download])
 +
 +
 +
<div style="clear:both;"></div>
 +
==== Firebug Autocompleter ====
 +
[[Image:Firebug_Autocompleter.png|thumb|400px|Firebug Autocompleter]]
 +
 +
Firebug Autocompleter adds an auto-completion to Firebug's [[Console Panel#Command Editor|Command Editor]], which can be toggled on and off.
 +
 +
* Download from [https://addons.mozilla.org/de/firefox/addon/firebug-autocompleter/ Mozilla Add-ons] site
 +
 +
Author: yamapikarya
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
==== Firefinder ====
==== Firefinder ====
-
[[Image:FirefinderForFirebug.png|thumb|400px|Firefinder]]
+
[[Image:Firebug-extlist-firefinder.png|thumb|400px|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.
+
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.
 +
 
 +
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 [http://robertnyman.com/firefinder/ website]
 +
* Download from [https://addons.mozilla.org/firefox/addon/11905 Mozilla Add-ons] site
-
Author: [http://robertnyman.com/firefinder/ Robert Nyman] ([https://addons.mozilla.org/en-US/firefox/addon/11905/ Download])
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 249: Line 323:
[[Image:Firebug-extlist-firequark.png|thumb|400px|Firequark]]
[[Image:Firebug-extlist-firequark.png|thumb|400px|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.
+
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 [http://www.quarkruby.com/2007/9/5/firequark-quick-html-screen-scraping website]
* Visit [http://www.quarkruby.com/2007/9/5/firequark-quick-html-screen-scraping website]
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 257: Line 332:
[[Image:Firebug-extlist-pixelperfect-thumbnail.png|thumb|400px|Pixel Perfect]]
[[Image:Firebug-extlist-pixelperfect-thumbnail.png|thumb|400px|Pixel Perfect]]
-
[[Pixel Perfect]] is a firebug extension that allows web developers to easily overlay a web composition over top of the developed html.
+
Pixel Perfect is a firebug extension that allows web developers to easily overlay a web composition over top of the developed html.
* Visit [http://www.pixelperfectplugin.com/ website]
* Visit [http://www.pixelperfectplugin.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/7943 Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/7943 Mozilla Add-ons] site
 +
* Report an [https://github.com/openhouseconcept/PixelPerfect/issues issue]
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 266: Line 343:
[[Image:Firebug-extlist-firerainbow.png|thumb|400px|FireRainbow]]
[[Image:Firebug-extlist-firerainbow.png|thumb|400px|FireRainbow]]
-
[[FireRainbow]] brings Javascript syntax highlighting to Firebug.
+
FireRainbow brings Javascript syntax highlighting to Firebug.
* Visit [http://firerainbow.binaryage.com/ website]
* Visit [http://firerainbow.binaryage.com/ website]
 +
* Download from [https://addons.mozilla.org/en-US/firefox/addon/9603 Mozilla Add-ons] site
 +
 +
Author: Antonin Hildebrand
-
Author: Antonin Hildebrand, download from [Mozilla Add-ons https://addons.mozilla.org/en-US/firefox/addon/9603] site
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
-
==== FirePalette ====
 
-
[[Image:Firebug-extlist-firepalette.png|thumb|400px|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".
 
-
 
-
* Visit [http://blog.endflow.net/?p=143 website]
 
-
* Report an [http://bitbucket.org/kuy/firepalette/issues/ issue]
 
-
* Download from [https://addons.mozilla.org/en-US/firefox/addon/12377 Mozilla Add-ons] site
 
-
 
-
<div style="clear:both;"></div>
 
==== Widerbug ====
==== Widerbug ====
[[Image:Firebug-extlist-widerbug.png|thumb|400px|Widerbug]]
[[Image:Firebug-extlist-widerbug.png|thumb|400px|Widerbug]]
Line 290: Line 360:
* Visit [http://www.command-tab.com/2008/01/19/widerbug-widescreen-firebug/ website]
* Visit [http://www.command-tab.com/2008/01/19/widerbug-widescreen-firebug/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/13135 Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/13135 Mozilla Add-ons] site
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 297: Line 368:
Firepicker automatically adds color picker to Firebug's inline CSS editor.
Firepicker automatically adds color picker to Firebug's inline CSS editor.
-
* Visit [http://thedarkone.github.com/firepicker website]]
+
* Visit [http://thedarkone.github.com/firepicker website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/15032 Mozilla Add-ons] site (experimental)
* Download from [https://addons.mozilla.org/en-US/firefox/addon/15032 Mozilla Add-ons] site (experimental)
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
==== FireSass ====
==== FireSass ====
-
 
FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles.
FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles.
-
* Visit [http://sass-lang.com/ website]]
+
* Visit [http://sass-lang.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/103988/ Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/103988/ Mozilla Add-ons] site
 +
 +
 +
<div style="clear:both;"></div>
 +
==== FireStylus ====
 +
[[Image:FireStylus.png|thumb|400px|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 [https://github.com/parallel/firestylus website]
 +
* Download from [https://addons.mozilla.org/en-US/firefox/addon/firestylus-for-firebug/ Mozilla Add-ons] site
 +
 +
Author: Julien Kernec'h
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 314: Line 398:
Arboreal is a Firebug extension for DOM tree visualization.  
Arboreal is a Firebug extension for DOM tree visualization.  
-
* Visit [http://www.alexspengler.de/arboreal/ website]]
+
* Visit [http://www.alexspengler.de/arboreal/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/228373/ Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/228373/ Mozilla Add-ons] site
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 325: Line 410:
* Visit [http://code.google.com/p/firepath/ website]
* Visit [http://code.google.com/p/firepath/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/11900/ Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/11900/ Mozilla Add-ons] site
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
 +
==== Fireformat ====
 +
[[Image:Fireformat.png|thumb|400px|Fireformat]]
 +
 +
Plugin extension that allow Firediff and others to generate formatted HTML and CSS output.
 +
* Download from [https://addons.mozilla.org/firefox/addon/fireformat/ Mozilla Addons] site
 +
* Get the [https://github.com/kpdecker/fireformat source code] (Firebug's BSD-style license)
 +
* Report an [http://code.google.com/p/fbug/issues/list issue]
 +
 +
Author: [http://www.incaseofstairs.com/ Kevin Decker]
 +
 +
 +
<div style="clear:both;"></div>
=== Debugging ===
=== Debugging ===
Line 342: Line 440:
Author: John J. Barton ([http://getfirebug.com/releases/chromebug/ Download])
Author: John J. Barton ([http://getfirebug.com/releases/chromebug/ Download])
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 347: Line 446:
[[Image:Eventbug.png|thumb|400px|Eventbug]]
[[Image:Eventbug.png|thumb|400px|Eventbug]]
-
[[Eventbug]] is a Firebug extension that lists all of the event handlers on the page grouped by event type (see a [http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/ blog post]).
+
Eventbug is a Firebug extension that lists all of the event handlers on the page grouped by event type (see a [http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/ blog post]).
-
* Requires [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug 1.5]
+
* The [https://github.com/firebug/eventbug source code] has Firebug's BSD-style license.
-
* The [http://code.google.com/p/fbug/source/browse/#svn/eventbug/branches source code] has Firebug's BSD-style license.
+
* Download from [http://getfirebug.com/releases/eventbug/ getfirebug.com]
-
* Use Firebug's [http://code.google.com/p/fbug/issues/list issue list] to report an issue.
+
* Use Firebug's [http://code.google.com/p/fbug/issues/list issue tracker] to report an issue.
* Use Firebug's [http://groups.google.com/group/firebug news group] to ask a question.
* Use Firebug's [http://groups.google.com/group/firebug news group] to ask a question.
Author: John J. Barton, Jan Odvarko ([http://getfirebug.com/releases/eventbug/ Download])
Author: John J. Barton, Jan Odvarko ([http://getfirebug.com/releases/eventbug/ Download])
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 361: Line 461:
[[Image:Firebug-extlist-codecoverage-thumbnail.png|thumb|400px|Firebug Code Coverage]]
[[Image:Firebug-extlist-codecoverage-thumbnail.png|thumb|400px|Firebug Code Coverage]]
-
[[Firebug Code Coverage]] adds entry function code coverage for JavaScript code. Adds a button next to the Profiler in Firebug.
+
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 [https://addons.mozilla.org/en-US/firefox/addon/4837 Add-ons site] (experimental)
Author: Zach Leatherman, download from Mozilla [https://addons.mozilla.org/en-US/firefox/addon/4837 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
+
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 [https://addons.mozilla.org/en-US/firefox/addon/code-coverage-v2-for-firebug/ Add-ons site] (experimental)
Author: Jun Ma, download from Mozilla [https://addons.mozilla.org/en-US/firefox/addon/code-coverage-v2-for-firebug/ Add-ons site] (experimental)
-
<div style="clear:both;"></div>
 
-
 
-
==== LiveCoder ====
 
-
[[Image:Firebug-extlist-livecoder-thumbnail.png|thumb|400px|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.
 
-
 
-
* Visit [http://getlivecoder.com/ website]
 
-
 
-
Author: Steve Souders, download from [https://addons.mozilla.org/en-US/firefox/addon/5291/ Mozilla Add-ons] site (experimental)
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 385: Line 475:
[[Image:Firebug-extlist-firephp-thumbnail.png|thumb|400px|FirePHP]]
[[Image:Firebug-extlist-firephp-thumbnail.png|thumb|400px|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.
+
''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 [http://www.firephp.org/ website]
* Visit [http://www.firephp.org/ website]
Line 392: Line 482:
Author: Christoph Dorn, download from [https://addons.mozilla.org/en-US/firefox/addon/6149 Mozilla Add-ons] site
Author: Christoph Dorn, download from [https://addons.mozilla.org/en-US/firefox/addon/6149 Mozilla Add-ons] site
 +
 +
 +
<div style="clear:both;"></div>
 +
==== FireFlow ====
 +
[[Image:Firebug-extlist-fireflow.png|thumb|400px|FireFlow]]
 +
 +
''FireFlow'' uses the [https://developer.mozilla.org/en/Code_snippets/JavaScript_Debugger_Service JSD] to get method call callbacks and logs them in a tree format. It supports searching and adding filters on card.
 +
 +
* Visit [http://blog.imaginea.com/fireflow/ website]
 +
* Download from [https://addons.mozilla.org/en-US/firefox/addon/fireflow/ Mozilla Addons] site
 +
 +
Author: Apurba Nath
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 397: Line 500:
[[Image:Firebug-extlist-firequery.png|thumb|400px|FireQuery]]
[[Image:Firebug-extlist-firequery.png|thumb|400px|FireQuery]]
-
[[FireQuery]] adds a collection of jQuery-related enhancements to Firebug. Recommended for all jQuery developers.
+
''FireQuery'' adds a collection of jQuery-related enhancements to Firebug. Recommended for all jQuery developers.
* Visit [http://firequery.binaryage.com/ website]
* Visit [http://firequery.binaryage.com/ website]
 +
* Download from [https://addons.mozilla.org/en-US/firefox/addon/12632 Mozilla Add-ons] site
 +
 +
Author: Antonin Hildebrand
-
Author: Antonin Hildebrand, download from [https://addons.mozilla.org/en-US/firefox/addon/12632 Mozilla Add-ons] site
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
 +
==== Javascript Deminifier ====
 +
[[Image:JavascriptDeminifier.png|thumb|400px|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 [http://jsbeautifier.org/ jsbeautifier.org] to beautify JavaScript.
 +
 +
* Visit [https://github.com/benmmurphy/jsdeminifier_xpi/ website]
 +
* Download from [https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/ Mozilla Addons] site
 +
* Report an [https://github.com/benmmurphy/jsdeminifier_xpi/issues issue]
 +
 +
Author: Ben Murphy
 +
 +
 +
<div style="clear:both;"></div>
 +
==== LiveCoder ====
 +
[[Image:Firebug-extlist-livecoder-thumbnail.png|thumb|400px|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.
 +
 +
* Visit [http://getlivecoder.com/ website]
 +
* [http://getlivecoder.com/livecoder.xpi/ Download.] [getlivecoder.com]  (''experimental'')
 +
Author: Steve Souders.
 +
 +
<div style="clear:both;"></div>
 +
==== Firesymfony ====
==== Firesymfony ====
[[Image:Firebug-extlist-firesymfony.png|thumb|400px|Firesymfony]]
[[Image:Firebug-extlist-firesymfony.png|thumb|400px|Firesymfony]]
-
[[Firesymfony]] integrates debugging support for the Symfony PHP development framework in to Firebug.
+
''Firesymfony'' integrates debugging support for the Symfony PHP development framework in to Firebug.
* Visit [http://www.firesymfony.org/website]
* Visit [http://www.firesymfony.org/website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/9096/ Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/9096/ Mozilla Add-ons] site
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 416: Line 548:
[[Image:Firebug-extlist-coldfire.png|thumb|400px|ColdFire]]
[[Image:Firebug-extlist-coldfire.png|thumb|400px|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.
+
''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 [http://coldfire.riaforge.org/ website]
* Visit [http://coldfire.riaforge.org/ website]
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 424: Line 557:
[[Image:Firebug-extlist-firepython.png|thumb|400px|FirePython]]
[[Image:Firebug-extlist-firepython.png|thumb|400px|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 [https://addons.mozilla.org/en-US/firefox/addon/11090 FireLogger].
+
''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 [https://addons.mozilla.org/en-US/firefox/addon/11090 FireLogger].
* Visit [http://firepython.binaryage.com/ website]
* Visit [http://firepython.binaryage.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/11090 Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/11090 Mozilla Add-ons] site
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 433: Line 567:
[[Image:Firebug-extlist-fireatlas.png|thumb|400px|FireAtlas]]
[[Image:Firebug-extlist-fireatlas.png|thumb|400px|FireAtlas]]
-
[[FireAtlas]] is an extension to Firebug dedicated to [http://www.asp.net/ajax/ ASP.NET AJAX]debugging. This extension will provide you with useful services when developing ASP.NET AJAX web sites:
+
''FireAtlas'' is an extension to Firebug dedicated to [http://www.asp.net/ajax/ ASP.NET AJAX]debugging. This extension will provide you with useful services when developing ASP.NET AJAX web sites:
* PageRequestManager events tracing
* PageRequestManager events tracing
Line 442: Line 576:
* Visit [http://fireatlas.chesnaistechnologies.com/ website]
* Visit [http://fireatlas.chesnaistechnologies.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/12121 Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/12121 Mozilla Add-ons] site
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 447: Line 582:
[[Image:Firebug-extlist-amfexplorer-thumbnail.png|thumb|400px|AMF Explorer]]
[[Image:Firebug-extlist-amfexplorer-thumbnail.png|thumb|400px|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.
+
''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 [http://amfexplorer.riaforge.org/ website]
* Visit [http://amfexplorer.riaforge.org/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/78928 Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/78928 Mozilla Add-ons] site
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 456: Line 592:
[[Image:Firebug-extlist-firelinkreport-thumbnail.png|thumb|400px|FireLinkReport]]
[[Image:Firebug-extlist-firelinkreport-thumbnail.png|thumb|400px|FireLinkReport]]
-
[[FireLinkReport]] allows viewing all links on the currently open page.
+
''FireLinkReport'' allows viewing all links on the currently open page.
* Visit [http://www.softwarecocktail.com/projects/firelinkreport/ website]
* Visit [http://www.softwarecocktail.com/projects/firelinkreport/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/58834 Mozilla Add-ons] site (experimental)
* Download from [https://addons.mozilla.org/en-US/firefox/addon/58834 Mozilla Add-ons] site (experimental)
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 465: Line 602:
[[Image:Firebug-extlist-flashbug.png|thumb|400px|Flashbug]]
[[Image:Firebug-extlist-flashbug.png|thumb|400px|Flashbug]]
-
[[Flashbug]] is a Firebug extension for Flash. Displays all the running .SWF file trace output. Requires Flash Player Debugger to work properly.
+
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 [http://blog.coursevector.com/flashbug/ website]
* Visit [http://blog.coursevector.com/flashbug/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/14465 Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/14465 Mozilla Add-ons] site
 +
 +
Author: [http://coursevector.com/ Gabriel Mariani]
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 481: Line 621:
[[Image:Illumination.png|thumb|400px|Illumination]]
[[Image:Illumination.png|thumb|400px|Illumination]]
-
[[Illuminations for Developers]] A tool to help you develop web applications by investing Firebug with the knowledge of your JavaScript framework and your workflow with it.
+
''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
+
* Requires Firebug 1.6 or later
* Works on Firefox 3.6 and later
* Works on Firefox 3.6 and later
* Visit [http://www.illuminations-for-developers.com/ website]
* Visit [http://www.illuminations-for-developers.com/ website]
Line 488: Line 628:
* Preliminary support for Dojo 1.5, SproutCore, YUI3, Closure Lib, qooXdoo, and jQuery UI
* Preliminary support for Dojo 1.5, SproutCore, YUI3, Closure Lib, qooXdoo, and jQuery UI
-
Author: Steven Roussey ([https://addons.mozilla.org/en-US/firefox/addon/illuminations-for-developers/ Mozilla Add-ons]) '''[https://addons.mozilla.org/firefox/downloads/file/113913/illuminations_for_developers_for_firebug-1.1.6-fx.xpi?src=external-Firebug-Wiki Download]'''
+
Author: Steven Roussey ([https://addons.mozilla.org/en-US/firefox/addon/illuminations-for-developers/ Mozilla Add-ons]) '''[https://addons.mozilla.org/firefox/downloads/latest/247486/addon-247486-latest.xpi?src=external-Firebug-Wiki Download]'''
<div style="clear:both;"></div>
<div style="clear:both;"></div>
 +
==== Dojo Firebug Extension ====
 +
[[Image:Ddt-presentation.PNG|thumb|400px|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 [[DojoFirebugExtension Reference Guide|Documentation]]
 +
* Download from [https://getfirebug.com/releases/dojofirebugextension/ getfirebug.com]
 +
* Get the [https://github.com/patricioreyna/dojofirebugextension source code] (Firebug's BSD-style license)
 +
* Report an [http://code.google.com/p/fbug/issues/list issue]
 +
 +
Authors: Patricio Reyna Almandos and Fernando Gomez
 +
 +
<div style="clear:both;"></div>
 +
 +
==== ZikulaBug ====
 +
[[Image:ZikulaBug.png|thumb|400px|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 [https://github.com/zikula/ZikulaBug/wiki website]
 +
* Download from [https://addons.mozilla.org/en-US/firefox/addon/zikulabug/ Mozilla Addons] site
 +
 +
Author: Paweł Preneta
 +
 +
 +
<div style="clear:both;"></div>
 +
==== ConsoleML ====
 +
[[Image:ConsoleMLLogo.png|thumb||ConsoleML]]
 +
[[Image:ConsoleML.png|thumb|400px|ConsoleML]]
 +
 +
''ConsoleML'' is an extension to Firebug which displays MarkLogic logging information in Firefox Firebug.
 +
 +
* Visit [http://sirmasolutions.com/index.php/products/ml-firefox-console website]
 +
* Download from [http://sirmasolutions.com/index.php/products/ml-firefox-console 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
 +
 +
<div style="clear:both;"></div>
=== Performance ===
=== Performance ===
Line 498: Line 687:
[[Image:Firebug-extlist-yslow-thumbnail.png|thumb|400px|YSlow]]
[[Image:Firebug-extlist-yslow-thumbnail.png|thumb|400px|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'' 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:
YSlow gives you:
Line 509: Line 698:
Author: [http://developer.yahoo.com/yslow/ Yahoo, Inc.] ([https://addons.mozilla.org/en-US/firefox/addon/5369 Download])
Author: [http://developer.yahoo.com/yslow/ Yahoo, Inc.] ([https://addons.mozilla.org/en-US/firefox/addon/5369 Download])
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
==== NetExport ====
==== NetExport ====
-
[[NetExport]] is a Firebug extension that allows exporting data from the Net panel.
+
''NetExport'' is a Firebug extension that allows exporting data from the Net panel.
* Requires [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug 1.5]
* Requires [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug 1.5]
Line 521: Line 711:
* Use Firebug's [http://groups.google.com/group/firebug discussion group] to ask a question.
* Use Firebug's [http://groups.google.com/group/firebug discussion group] to ask a question.
-
Author: Jan Odvarko ([http://getfirebug.com/releases/netexport/ Download], [http://www.softwareishard.com/blog/netexport/ website])
+
* Visit [http://www.softwareishard.com/blog/netexport/ website]
 +
* Download from [http://getfirebug.com/releases/netexport/ getfirebug.com]
-
<div style="clear:both;"></div>
+
Author: Jan Odvarko
 +
 +
<div style="clear:both;"></div>
==== Net Panel History Overlay ====
==== Net Panel History Overlay ====
[[Image:Firebug-extlist-history.png|thumb|400px|Net Panel History Overlay]]
[[Image:Firebug-extlist-history.png|thumb|400px|Net Panel History Overlay]]
-
[[Net Panel History Overlay]] adds history functionality to firebug net panel.
+
''Net Panel History Overlay'' adds history functionality to Firebug's [[Net Panel]].
* Visit [http://digitalmihailo.blogspot.com/ website]
* Visit [http://digitalmihailo.blogspot.com/ website]
 +
* Download from [https://addons.mozilla.org/en-US/firefox/addon/7189 Mozilla Add-ons] site (experimental)
 +
 +
Author: Mihailo Lalevic
-
Author: Mihailo Lalevic, download from [https://addons.mozilla.org/en-US/firefox/addon/7189 Mozilla Add-ons] site (experimental)
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 538: Line 733:
[[Image:Firebug-extlist-jiffy-thumbnail.png|thumb|400px|Jiffy]]
[[Image:Firebug-extlist-jiffy-thumbnail.png|thumb|400px|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.
+
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 [http://billwscott.com/jiffyext/ website]
* Visit [http://billwscott.com/jiffyext/ website]
Line 544: Line 739:
Author: [http://looksgoodworkswell.blogspot.com/ Bill Scott] of [http://www.netflix.com/ NetFlix], download from [https://addons.mozilla.org/en-US/firefox/addon/7613 Mozilla Add-ons] site (experimental)
Author: [http://looksgoodworkswell.blogspot.com/ Bill Scott] of [http://www.netflix.com/ NetFlix], download from [https://addons.mozilla.org/en-US/firefox/addon/7613 Mozilla Add-ons] site (experimental)
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 549: Line 745:
[[Image:Firebug-extlist-inlinecodefinder.png|thumb|400px|Inline Code Finder]]
[[Image:Firebug-extlist-inlinecodefinder.png|thumb|400px|Inline Code Finder]]
-
[[Inline Code Finder]] looks for any of these in a web page:
+
''Inline Code Finder'' looks for any of these in a web page:
* inline JavaScript events
* inline JavaScript events
Line 558: Line 754:
* Visit [http://www.robertnyman.com/inline-code-finder/ website]
* Visit [http://www.robertnyman.com/inline-code-finder/ website]
 +
* Download from [https://addons.mozilla.org/en-US/firefox/addon/9641 Mozilla Add-ons] site
-
Author: Robert Nyman, download from [https://addons.mozilla.org/en-US/firefox/addon/9641 Mozilla Add-ons] site
+
Author: Robert Nyman
-
<div style="clear:both;"></div>
 
-
==== SenSEO ====
 
-
[[Image:Firebug-extlist-senseo.png|thumb|400px|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.
 
-
 
-
* Visit [http://sensational-seo.com/ website]
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 573: Line 763:
[[Image:Firebug-extlist-cssusage.png|thumb|400px|CSS Usage]]
[[Image:Firebug-extlist-cssusage.png|thumb|400px|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.
+
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.
-
* Visit [website]
 
* Download from [https://addons.mozilla.org/en-US/firefox/addon/10704 Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/10704 Mozilla Add-ons] site
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
Line 582: Line 772:
[[Image:Firebug-extlist-logtonetpanel.png|thumb|400px|Log to NetPanel]]
[[Image:Firebug-extlist-logtonetpanel.png|thumb|400px|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.
+
''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 [http://code.google.com/p/log-to-net-panel/downloads/list here]
+
* Download from [http://code.google.com/p/log-to-net-panel/downloads/list Google Code]
* See [http://code.google.com/p/log-to-net-panel/ more info]
* See [http://code.google.com/p/log-to-net-panel/ more info]
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
==== Page Speed ====
==== 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.
+
''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 [http://code.google.com/speed/page-speed/ website]
* Visit [http://code.google.com/speed/page-speed/ website]
-
<div style="clear:both;"></div>
 
-
==== 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.
 
-
 
-
* Download from [https://addons.mozilla.org/en-US/firefox/addon/52365/ Mozilla Add-ons] site
 
-
* See [http://www.strebitzer.at/projects/firefile/docs/ more info]
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
==== FireSpider ====
==== FireSpider ====
-
[http://xrado.hopto.org/post/firespider-extension-for-firebug FireSpider] is a an extension for Firebug that can help you find broken or misleading urls and optimize your web page for search engines.
+
''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 [http://xrado.hopto.org/post/firespider-extension-for-firebug 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 .]
 +
 
 +
 
<div style="clear:both;"></div>
<div style="clear:both;"></div>
 +
==== FireFontFamily ====
==== FireFontFamily ====
[[Image:Firebug-extlist-firefontfamily.png|thumb|400px|FireFontFamily]]
[[Image:Firebug-extlist-firefontfamily.png|thumb|400px|FireFontFamily]]
-
[[FireFontFamily]] highlights the rendered font-family inside the Style Side Panel
+
''FireFontFamily'' highlights the rendered font-family inside the Style Side Panel
 +
 
* Download from [https://addons.mozilla.org/en-US/firefox/addon/111672/ Mozilla Add-ons] site
* Download from [https://addons.mozilla.org/en-US/firefox/addon/111672/ Mozilla Add-ons] site
 +
<div style="clear:both;"></div>
<div style="clear:both;"></div>
==== FireEyes ====
==== FireEyes ====
-
[[Image:FireEyes.png|thumb|400px|FireFontFamily]]
+
[[Image:FireEyes.png|thumb|400px|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.
+
''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.
 +
 
 +
'''Note:''' This extension requires Java and registering at [http://www.deque.com/ deque.com].
 +
 
* Download from [http://www.deque.com/products/worldspace-fireeyes FireEyes] site
* Download from [http://www.deque.com/products/worldspace-fireeyes FireEyes] site

Revision as of 12:01, 20 September 2012

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):

Acebug Adobe BrowserLab AMF Explorer Arboreal
Chromebug Closure Inspector CodeBurner ColdFire
ConsoleExport ConsoleML Crossfire CSS Usage
cssUpdater Dojo Firebug Extension Drupal For Firebug Eventbug
FireAtlas Firebug Autocompleter Firebug Code Coverage Firebug Paint Events
Firecookie Firediff FireEyes FireFile
Firefinder FireFlow Firefocus FireFontFamily
Fireformat FireLinkReport FirePath FirePHP
Firepicker FirePython Firequark FireQuery
FireRainbow FireSass FireSpider FireStarter
FireStylus Firesymfony Flashbug FormBug
Illuminations for Developers (ExtJS/Dojo/etc) Inline Code Finder Javascript Deminifier Jiffy
Live Coder Log to NetPanel NetExport Net Panel History Overlay
Omnibug Page Speed Pixel Perfect selectbug
Widerbug XRefresh YSlow ZikulaBug

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

Creating Extensions

Existing Extensions

Miscellaneous

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


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.

Author: Michael G. Collins, FWG


FireStarter

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


Drupal For Firebug

Drupal For Firebug

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


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.


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.


cssUpdater

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.

Author: Johan Andersson

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.


FormBug

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


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.


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.


Firebug Paint Events

Firebug Paint Events

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


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.

  • Fb dead logo1 transparent.png 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.


ConsoleExport

Console Export

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.


selectbug

selectbug

selectbug enhances the CSS Panel by a Side Panel, that shows all nodes, to which the selected rule was applied.


UI Enhancements

Acebug

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


CodeBurner

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)


Firebug Autocompleter

Firebug Autocompleter

Firebug Autocompleter adds an auto-completion to Firebug's Command Editor, which can be toggled on and off.

Author: yamapikarya


Firefinder

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.

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.


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.


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.


FireRainbow

FireRainbow

FireRainbow brings Javascript syntax highlighting to Firebug.

Author: Antonin Hildebrand


Widerbug

Widerbug

A modified version of Firebug optimized for widescreen monitors.


Firepicker

Firepicker

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


FireSass

FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles.


FireStylus

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.

Author: Julien Kernec'h


Arboreal

Arboreal

Arboreal is a Firebug extension for DOM tree visualization.


FirePath

FirePath

FirePath is a Firebug extension that adds a development tool to edit, inspect and generate XPath 1.0 expressions and CSS 3 selectors.


Fireformat

Fireformat

Plugin extension that allow Firediff and others to generate formatted HTML and CSS output.

Author: Kevin Decker


Debugging

Chromebug

Chromebug

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

Author: John J. Barton (Download)


Eventbug

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)


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)


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

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


FireFlow

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.

Author: Apurba Nath


FireQuery

FireQuery

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

Author: Antonin Hildebrand


Javascript Deminifier

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.

Author: Ben Murphy


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.

Firesymfony

Firesymfony

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


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.


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.


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


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.


FireLinkReport

FireLinkReport

FireLinkReport allows viewing all links on the currently open page.


Flashbug

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.

Author: Gabriel Mariani


Closure Inspector

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


Illuminations for Developers

Illumination

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

Dojo Firebug Extension

Easy access to Dojo features: list dijit registry, and inspect visual widgets, view and breakpoint connections and subscriptions.

Authors: Patricio Reyna Almandos and Fernando Gomez

ZikulaBug

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.

Author: Paweł Preneta


ConsoleML

ConsoleML
ConsoleML

ConsoleML is an extension to Firebug which displays MarkLogic logging information in Firefox Firebug.

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

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)


NetExport

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

Author: Jan Odvarko


Net Panel History Overlay

Net Panel History Overlay

Net Panel History Overlay adds history functionality to Firebug's Net Panel.

Author: Mihailo Lalevic


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)


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


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.


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.


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.


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.

 [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

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


FireEyes

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.

Note: This extension requires Java and registering at deque.com.

Personal tools