Development:Firebug: Difference between revisions
Frank Ralf (talk | contribs) |
Frank Ralf (talk | contribs) |
||
| Line 11: | Line 11: | ||
* The [http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en Internet Explorer Developer Toolbar] for '''Microsoft IE'''. | * The [http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en Internet Explorer Developer Toolbar] for '''Microsoft IE'''. | ||
* '''IE 8''' comes with its [http://blogs.msdn.com/brunoterkaly/archive/2009/08/03/internet-explorer-8-developer-tools-debugging-html-and-css.aspx own development tools]. | * '''IE 8''' comes with its [http://blogs.msdn.com/brunoterkaly/archive/2009/08/03/internet-explorer-8-developer-tools-debugging-html-and-css.aspx own development tools]. | ||
* [http://www.opera.com/dragonfly/ Dragonfly] for '''Opera'''. - [http://www.sitepoint.com/ | * [http://www.opera.com/dragonfly/ Dragonfly] for '''Opera'''. - [http://www.sitepoint.com/blogs/2010/02/28/opera-dragonfly-open-source/ A short introduction from SitePoint] | ||
* The commonly named "JavaScript console" menu item in '''Google Chrome'''. | * The commonly named "JavaScript console" menu item in '''Google Chrome'''. | ||
* The [http://webkit.org/blog/197/web-inspector-redesign/ Web Inspector] menu item in '''Safari'''. | * The [http://webkit.org/blog/197/web-inspector-redesign/ Web Inspector] menu item in '''Safari'''. | ||
Revision as of 16:45, 2 March 2010
What is Firebug?
Firebug is an add-on for the Firefox web browser. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...
Is Firebug only for Firefox?
The add-on will only work in Firefox, but there is also a JavaScript based Firebug Lite version for use with Internet Explorer (IE), Opera, and Safari.
Alternatives with similar functionality for other Web browsers:
- The Internet Explorer Developer Toolbar for Microsoft IE.
- IE 8 comes with its own development tools.
- Dragonfly for Opera. - A short introduction from SitePoint
- The commonly named "JavaScript console" menu item in Google Chrome.
- The Web Inspector menu item in Safari.
Where can I get Firebug?
Tutorials
- And for those of us who prefer viewing to reading, there's a bunch of tutorial videos on YouTube.
Further enhancements
There are some enhancements to make Firebug even more powerful.
- See the complete list of Firebug related add-ons.
- Mehr Power für Firebug is an article written in German, but you can just follow the links to the Firefox add-on page.
Here are some of those enhancements.
Note: Some of these enhancements are experimental. Caution should be used when installing experimental add-ons, as they have not been tested by an editor and may harm your computer configuration.
FirePHP
FirePHP enables you to log to your Firebug Console using a simple PHP method call.
There's a FirePHP plugin for Moodle in the works.
FireRainbow
FireRainbow (formerly Rainbow for Firebug) - Provides JavaScript syntax highlighting for Firebug 1.3.
CodeBurner
CodeBurner - A Firefox add-on that integrates with Firebug, to extend it with reference material for CSS, HTML, and JavaScript from SitePoint.
There's also CodeBurner for Firefox, a standalone version of the original CodeBurner for Firebug, but with an independent interface, and more dedicated search tools.
YSlow
YSlow - YSlow analyzes web pages and tells you why they're slow based on Yahoo's rules for high performance web sites.
Firefinder
Firefinder - Finds HTML elements matching chosen CSS selector(s) or XPath expression.
FireQuery
FireQuery is a collection of Firebug enhancements for jQuery. Requires Firebug 1.3 or greater.
Features:
- jQuery expressions are intelligently presented in Firebug Console and DOM inspector
- attached jQuery data are first class citizens
- elements in jQuery collections are highlighted on hover
- jQuerify: enables you to inject jQuery into any page
