Jennifer Adam
It is free and open source and is available for two major implementations: first as an extension or add-on for Mozilla Firefox and second as a bookmarklet implementation called Firebug Lite.
No doubt, Firebug is fully fledged with several basic as well as advanced features; even then sometimes it needs some add-ons to enhance its functionality. We are presenting this post detailing with the topmost Firefox add-ons which are especially made for Firebug to enhance its functionality. These add-ons or extensions will make the developers’ or designer’s life easy and their work convenient. These extensions will led to extend the functionality of Firebug and add some more features to make it even more powerful. So, walk through these Firebug add-ons and make your life easier.
Pixel Perfect
Pixel Perfect is an excellent Firebug extension which allows overlying web layouts and other design compositions onto a web page so that one can accurately and easily write their CSS and HTML. It offers web developers and designers to visualize the pixel-perfect accuracy of the position and dimensions of web page components.
Page Speed
Page Speed is an open source Firebug add-on which runs performance tests based on a set of best practices known to reduce page load time and evaluate web page performance, giving developers suggestions on front-end performance optimizations they can carry out. All the tests and evaluations carried on by this add-on are based on Google’s Web Performance Best Practices developed through Steve Sounder’s work assisting developers optimizing their web pages by applying web performance best practices. It fetches content from servers, rewrites by applying web performance best practices and serves it to end users via Google’s servers across the globe.
CodeBurner
CodeBurner is an effective Firebug extension which is released by SitePoint and that makes valuable reference material for HTML and CSS; these references are very helpful, showing information about browser compatibility and W3C recommendation compliance of page elements, among many other types of information. Not only that, it also presents contextual information based on what is currently in Firebug’s CSS and HTML panels.
CodeBurner is a suite of tools for web developers that provide reference material for HTML and CSS, It is well integrated with a range of popular development environments and serve as a suite of tools for web developers providing reference material for HTML and CSS.
FireRainbow
FireRainbow is a simple Firebug extension but of great use. Powered by CodeMirror, it solely does the function of code syntax highlighting and highlights JavaScript, HTML, and CSS and facilitates web developers with the improved readability of code being reviewed or inspected in Firebug. It is well constituted with several advanced features such as color theme can be modified using Firebug’s CSS panel, Color themes available on GitHub, allows parsing in a non-blocking fashion, and much more.
Inline Code Finder
Inline Code Finder is a remarkable tool for hunting down inline JavaScript and CSS. It is a great tool to traverse through all elements in a web page, and one thing to be noticed that if it finds a HTML element with Inline JavaScript events, Inline style, or JavaScript links, it will highlight them. It is really a perfect tool developers refactoring existing markup to separate structure (HTML) from style (CSS) and function (JavaScript). It searches the entire web page for inline code and provides the developer with contextual information about the inline code it finds; also it is having the ability to filter certain groups of inline code.
Firecookie
Firecookie is an extremely useful Firefox extension for Firebug that makes possible to view and manage cookies in your browser. It is a time saver technique for developing web applications that utilize cookies and consume more time. It allows web developers to view, inspect, export, and manage cookies, log cookie events such as creation, deletion, etc and many things beyond this. The latest version of Firecookie is added with several improvements such as the ability to list only cookies sourcing from a sub domain, displaying list of cookies; each cookies in the list displayed with its basic information such as name, value, domain, path, expire date, etc.
FirebugCodeCoverage
FirebugCodeCoverage is a benchmarking Firebug extension which gives the statistics review that a percentage of how much of your code executed during a certain period of time, usually while your automated test was executing. This Firefox extension is inspired by Selenium IDE for determining the percentage of the code being executed for time duration, and which is termed as code coverage.
SenSEO
SenSEO is a Firefox add-on integrated with the popular Firebug web development tool that analyzes web pages and tells you how good they fulfill on-page Search Engine optimization criteria. This Firebug extension checks for correct use of Meta tags, presence of a title, headings, and other relevant criterions for optimal search engine optimization.
In general, SenSEO provides the overview of SEO-important web page components and analysis of on-page SEO criteria. When we talk to more advanced level then, it offers a sitemap for your website, verifies your site at Google Webmaster Tools, self host your domain to improve authority, redirect non-www domains to www domains or the other way round, surrounds your images with suitable content like headlines or paragraphs and much more than that.
Yahoo! YSlow
YSlow is a Firefox extension of great use; it analyzes web pages, evaluates a web page for performance, and suggests ways to improve their performance based on a set of rules for high performance web pages. Based on YDN’s best practices for speeding up the web site, YSlow provides grades to the web page based on one of three predefined rule set or a user-defined rule set. It is enriched with full fledged features which super charge the Firebug, a best and friendly tool for web developers. It summarizes the page’s components; displays statistics about the page, provides tools for performance analysis, including Smush.it and JSLint and offers suggestions for improving the page’s performance etc.
Firefinder
Firefinder is an eminent Firefox extension for Firebug which is used for quickly finding web page elements that match CSS or Xpath selectors matching the search criteria and allows instantly testing the CSS selectors in the page while seeing the content at the same time; matching elements will be highlighted. It has been proved as a great Firebug extension facilitating user for testing which page elements are affected by a CSS style rule as well as for highlighting and finding elements that match the search criteria. In addition to these, it also allows to auto-select elements when hovering or via the context menu.
