Free Useful Add-ons To Strengthen Firebug
Firebug is probably one of the most helpful tools used when developing websites.
Specially, after JavaScript & Ajax became that much popular, it is hard to findout how we were developing & debugging without Firebug.
This great Firefox add-on, besides the ease of use & continious development by a talented team, has many features that make it a must-have like:
- working inside browser, no need to switch apps.
- being real-time, logging every request
- ability to edit code & see results instantly
- debugging JavaScript, measuring its performance & more..
It also has another feature, which is extendibility with help of Firefox add-ons.
There are various add-ons that can add more power to Firebug for creating better & faster. Here they are:
YSlow
YSlow is a Firebug add-on for analyzing web pages and getting suggestions on ways to improve the performance (parallel with the rules for high performance web pages).
YSlow grades web pages based on the predefined rulesets or a user-defined one . It also provides tools for performance analysis, including Smush.it? and JSLint.
Page Speed
Very similar to YSlow, it is an add-on by the Google team for evaluating the performance of web pages and, best of all, getting suggestions (based on “Web Performance Best Practices“) on ways to improve them.
Page Speed automatically optimizes images & provides compressed ones foruploading later.
It can also detect JavaScript and CSS loaded that actually isn?t used for decreasing the total size of these files.
Pixel Perfect
In order to easily find out how a fresh element will look with the design in general, Pixel Perfect enables web developers and designers to overlay a web composition over top of the developed HTML.
It is possible to toggle on/off any number of design elements to see if they fit well or not. And, with the opacity option, HTML below the composition can be viewed.
CodeBurner
CodeBurner offers a reference panel with a search tool for looking up HTML elements, attributes, and CSS properties.
It also provides shortcuts to view information or code samples about a selected item.
FireUnit
FireUnit provides a simple JavaScript API for doing simple test logging – unit testing and viewing within a new tab of Firebug.
FirePHP
With the help of FirePHP, it is possible to log to the Firebug console by a simple PHP method call.
Data is sent via response headers & won?t interfere with the content on the page.
For any developer who got used to the Firebug interface , this extension is great for PHP debugging.
FireRainbow
FireRainbow adds a better syntax highlighting support to Firebug & has theming support.
FireDiff
It adds a change monitor recording every change made, by Firebug and the website itself, to CSS and the DOM.
This provides a deeper look into the functionality of the website & helps keeping a record of the changes that were required to debug and tweak the page?s display.
Jiffy Firefox Extension
Jiffy Extension, using the Jiffy-Web, adds a new panel to Firebug & generates the visual view of the JavaScript time measurements. It can also output a print-friendly version of the report.
Hammerhead
It enables you to measure the loading times of webpages.
The extension has support for multiple pages & can clear caches (disk & memory) with a click for a healthier result.