Development:Firebug: Difference between revisions
Frank Ralf (talk | contribs) m (→FireRainbow) |
Frank Ralf (talk | contribs) |
||
| (39 intermediate revisions by 3 users not shown) | |||
| Line 2: | Line 2: | ||
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... | 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 [http://getfirebug.com/lite.html Firebug Lite] version for use with Internet Explorer (IE), Opera, and Safari. | |||
=== Alternatives with similar functionality for other Web browsers: === | |||
* 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]. | |||
* [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 [http://webkit.org/blog/197/web-inspector-redesign/ Web Inspector] menu item in '''Safari'''. | |||
== Where can I get Firebug? == | == Where can I get Firebug? == | ||
| Line 13: | Line 25: | ||
* [http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i Firebug Tutorial - Logging, Profiling and CommandLine (Part 1)] | * [http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i Firebug Tutorial - Logging, Profiling and CommandLine (Part 1)] | ||
* And for those of us who prefer viewing to reading, there's a bunch of tutorial videos on [http://www.youtube.com/watch?v= | * And for those of us who prefer viewing to reading, there's a bunch of tutorial videos on [http://www.youtube.com/results?search_query=Firebug+firefox&aq=f YouTube]. | ||
===Debugging AJAX with Firebug=== | |||
Once installed, Firebug can show you the XMLHTTPrequests that happen in the background as [[AJAX]]y things occur and also what data is returned. This is pretty handy if you find that the requests are failing for no reason you can discern. | |||
To make the most of this, it's important to make sure that the data being sent by the server is properly encoded and has the right headers. The most efficient way to do this is to use [http://www.json.org JSON] for the response, rather than [[XML]] (fewer characters used to represent stuff, so faster to download) and to do so using PHP's native [http://www.php.net/manual/en/function.json-encode.php json_encode()] function. This will make firebug show you the response in a lot more detail than if you just echoed the data as XML fragments. | |||
To watch the XMLHTTPrequests, enable firebug, click on the '''Net''' tab and enable that too, then click on the '''XHR''' button. Now, anything that happens will show up in Firebug. To see the response data from the server, expand the line for that request using the '''+''' icon on the left, then click on the '''response''' tab. This shows the raw data but you should also have a JSON and/or HTML tab which will allow you to see it properly formatted. | |||
; See also: | |||
* [http://www.youtube.com/watch?v=W4jXAaEMp2M Introduction to Debugging AJAX Application with Firebug] on YouTube | |||
== Further enhancements == | == Further enhancements == | ||
There are some enhancements to make Firebug even more powerful. | |||
* See the [https://addons.mozilla.org/en-US/firefox/search?q=firebug&cat=all complete list of Firebug related add-ons on the Mozilla website]. | |||
* [http://www.drweb.de/magazin/mehr-power-fur-firebug/ 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. | |||
<p class="note orange"> | |||
'''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. | |||
</p> | |||
=== FirePHP === | === FirePHP === | ||
| Line 23: | Line 53: | ||
=== FireRainbow === | === FireRainbow === | ||
[https://addons.mozilla.org/en-US/firefox/addon/9603 FireRainbow] (formerly ''Rainbow for Firebug'') - | [https://addons.mozilla.org/en-US/firefox/addon/9603 FireRainbow] (formerly ''Rainbow for Firebug'') - Provides '''JavaScript syntax highlighting''' for Firebug 1.3. | ||
=== CodeBurner === | === CodeBurner === | ||
[https://addons.mozilla.org/en-US/firefox/addon/10273 CodeBurner] - | [https://addons.mozilla.org/en-US/firefox/addon/10273 CodeBurner] - A Firefox add-on that integrates with Firebug, to extend it with reference material for CSS, HTML, and JavaScript from [http://reference.sitepoint.com SitePoint]. | ||
There's also [http://tools.sitepoint.com/codeburner/firefox/ CodeBurner for Firefox], a standalone version of the original CodeBurner for Firebug, but with an independent interface, and more dedicated search tools. | |||
=== YSlow === | |||
[https://addons.mozilla.org/en-US/firefox/addon/5369 YSlow] - YSlow analyzes web pages and tells you why they're slow based on Yahoo's rules for high performance web sites. | |||
=== Firefinder === | |||
[https://addons.mozilla.org/en-US/firefox/addon/11905 Firefinder] - Finds HTML elements matching chosen CSS selector(s) or XPath expression. | |||
=== FireQuery === | |||
[https://addons.mozilla.org/en-US/firefox/addon/12632?from=%2Fde%2Ffirefox%2Faddon%2F12632 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 | |||
=== Inline Code Finder for Firebug === | |||
[https://addons.mozilla.org/en-US/firefox/addon/9641/ Inline Code Finder for Firebug] is an add-on to Firebug, to be able to find HTML elements with any of the below issues: | |||
* Inline JavaScript events | |||
* Inline style | |||
* javascript: links | |||
=== FlashFirebug === | |||
[https://addons.mozilla.org/en-US/firefox/addon/161670/ FlashFirebug]: Debug your own SWF files inside the browser. Edit properties and inspect elements like you do to HTML. Flash files are no longer the closed components they used to be. This extension requires Firebug and the O-Minds Flash package. | |||
=== FireFile === | |||
[https://addons.mozilla.org/en-US/firefox/addon/52365/ FireFile]: 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. | |||
=== Firebug Autocompleter === | |||
[https://addons.mozilla.org/en-us/firefox/addon/firebug-autocompleter/ Firebug Autocompleter] - Firebug command line autocomplete. | |||
== See also: == | |||
* [[Themes FAQ]] | |||
* [[CSS FAQ]] | |||
* [[JavaScript FAQ]] | |||
{{CategoryDeveloper}} | {{CategoryDeveloper}} | ||
[[Category:Developer tools|Firebug]] | [[Category:Developer tools|Firebug]] | ||
[[Category:Firefox extensions|Firebug]] | [[Category:Firefox extensions|Firebug]] | ||
Latest revision as of 11:36, 8 April 2011
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.
Debugging AJAX with Firebug
Once installed, Firebug can show you the XMLHTTPrequests that happen in the background as AJAXy things occur and also what data is returned. This is pretty handy if you find that the requests are failing for no reason you can discern.
To make the most of this, it's important to make sure that the data being sent by the server is properly encoded and has the right headers. The most efficient way to do this is to use JSON for the response, rather than XML (fewer characters used to represent stuff, so faster to download) and to do so using PHP's native json_encode() function. This will make firebug show you the response in a lot more detail than if you just echoed the data as XML fragments.
To watch the XMLHTTPrequests, enable firebug, click on the Net tab and enable that too, then click on the XHR button. Now, anything that happens will show up in Firebug. To see the response data from the server, expand the line for that request using the + icon on the left, then click on the response tab. This shows the raw data but you should also have a JSON and/or HTML tab which will allow you to see it properly formatted.
- See also
Further enhancements
There are some enhancements to make Firebug even more powerful.
- See the complete list of Firebug related add-ons on the Mozilla website.
- 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
Inline Code Finder for Firebug
Inline Code Finder for Firebug is an add-on to Firebug, to be able to find HTML elements with any of the below issues:
- Inline JavaScript events
- Inline style
- javascript: links
FlashFirebug
FlashFirebug: Debug your own SWF files inside the browser. Edit properties and inspect elements like you do to HTML. Flash files are no longer the closed components they used to be. This extension requires Firebug and the O-Minds Flash package.
FireFile
FireFile: 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.
Firebug Autocompleter
Firebug Autocompleter - Firebug command line autocomplete.
