Extend the Firebug Console with these 20 Useful Extensions / Add-ons

Everything that all people try to do is to make their life easier. Internet technologies do not stop amazing us with their speed and variety. There are so many tools for web design and development, they do tend to come and go and it usually depends on personal preference whether or not any tool is used. There is only one tool that has lasted the test of time and is not only universally used but also loved, and that is the Firefox extension Firebug – it is by far and away the best tool within web design.

Firebug is designed to Firebug adds a global variable named “console” to all web pages loaded in Firefox that is used by so many users all over the world.  So Firebug Console Extensions couldhelp developers debug and build web-applications and more specifically help in working with a specific page or set of pages. Following information provides you with very useful tips to help you improve your knowledge about Firebug Console Extensions and using them in your projects.

SEE ALSO: Best Tools For Cross-Browser Compatibility Check

Firebug Console – Useful Extensions

Extend the Firebug Console with these 20 Useful Extensions / Add-ons

A great thing about Firebug Console Extensions is it gives you the option to use extra opportunities and make your projects even more spectacular and interesting. You can tailor them and mold it to your needs.

1. Pixel Perfect

Pixel Perfect allows you to overlay web layouts and other design compositions onto a web page so that you can accurately (and easily) write your CSS and HTML. By being able to toggle a web composition on or off, web developers and designers can have a visual guide for pixel-perfect accuracy of the position and dimensions of web page components.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

2. Page Speed

Page Speed is an open source Firebug add-on for evaluating web page performance, giving developers suggestions on front-end performance optimizations they can carry out. Tests and evaluations are based on Google’s Web Performance Best Practicesdeveloped through Steve Sounder’s work. Make sure to read the Page Speed user guide for complete documentation of its many features.

3. CodeBurner

CodeBurner, released by SitePoint, extends Firebug to provide a built-in HTML and CSS reference. The extension also presents contextual information based on what is currently in Firebug’s CSS and HTML panels. The references are very helpful, showing you information about browser compatibility and W3C Recommendation compliance of page elements, among many other types of information.

5. Inline Code Finder

Inline Code Finder is great for hunting down inline JavaScript and CSS and is perfect for developers refactoring existing markup to separate structure (HTML) from style (CSS) and function (JavaScript). The usage of the tool is simple: it searches the entire web page for inline code and provides the developer with contextual information about the inline code it finds. The newest version gives you the ability to filter certain groups of inline code.

6. Firecookie

Developing web applications that utilize cookies can be time-consuming. Firecookie, a Firebug extension, gives you a host of options and features strictly for working with cookies. The extension allows you to view, inspect, export, and manage cookies, log cookie events (creation, deletion, etc.), and much more. The latest version of Firecookie adds several improvements such as the ability to list only cookies sourcing from a subdomain.

7. FirebugCodeCoverage

FirebugCodeCoverage is a benchmarking Firebug extension inspired by Selenium IDE for determining the percentage of your code being executed for time duration, known ascode coverage. This is typically measured during automated testing to see how well the test cases are able to thoroughly test your code (with higher percentages being your goal).

8. SenSEO

SenSEO is a Firebug extension that analyzes a web page and indicates how well it is doing for single-page whitehat search engine optimization. The extension checks for correct use of meta tags, presence of a title, headings, and other relevant criterions for optimal search engine optimization.

9. Yahoo! YSlow

YSlow evaluates a web page for performance and suggests potential places for improvements. YSlow is based on YDN’s Best Practices for Speeding Up Your Web Siteand gives you letter grades on one of the three predefined (or user-defined) rule sets. It has a handful of useful features such as displaying information and statistics about web page components, and integration of optimization tools such as JSLint andSmush.it.

10. Firefinder

Firefinder is for quickly finding web page elements that match CSS or Xpath selectors that you input as your search criteria. Firefinder is great for testing which page elements are affected by a CSS style rule as well as for highlighting and finding elements that match your searches.

11. XRefresh for Browser Refresh Automation

XRefresh is a browser plugin which will refresh current web page due to file change in selected folders. This makes it possible to do live page editing with your favorite HTML/CSS editor.
Typical usage scenario is for local web development on a machine with two monitors, the first monitor is for source code editing and the second one is fully dedicated to previewing the web page in Firefox.

12. FirePHP for AJAX Development

FirePHP enables you to log to your Firebug Console using a simple PHP method call. All data is sent via response headers and will not interfere with the content on your page.
It is ideally suited for AJAX development where clean JSON and XML responses are required.

13. FireQuery for jQuery Development

With FireQuery, jQuery expressions are intelligently presented in the Firebug Console and the DOM inspector with the elements in the jQuery collections highlighted on hover. With jQuerify you can inject jQuery into any web page.

14. CSS Usage

CSS Usage is an extension which allows you to scan multiple pages of your site to see which CSS rules are actually used.
Each time you press “Scan”, the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.

15. Firesymfony

FireSymfony is a port of the Symfony Web Debug Toolbar as a Firebug extension. Besides the normal functionality of the Symfony Toolbar, it adds new features, like Database Query, One Click copy to clipboard, or Mouse Over Partial and Component Cache Highlighting.

16. Firepicker – Color Picker

Firepicker adds a small color picker dialog when editing CSS rules in Firebug. The addon scans for values that can be parsed as CSS colors (#abc, rgb(1,2,3), blue, red etc.) and displays them in a drop-down list right below the firebug’s CSS editor box. Clicking on the color value in the drop-down brings up a color picker dialog.

17. Drupal For Firebug

Drupal for Firebug extends the Firebug module to provide Drupal specific debugging and status messages. It allows users to see the processing of the node, form, and user objects and works with the Devel module to display SQL queries and execute PHP from the Firebug window.

18. Firepath – Edit, Inspect and Generate XPath Expressions

FireXPath is a Firebug extension that adds a development tool to edit, inspect and generate XPath expressions. With this extension you can edit with auto-completion (using TAB or up and down arrows), you can also evaluate the expression on HTML or any XML documents and display the resulting evaluations in a Firebug-like DOM tree.

19. 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.

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

8 Comments
  1. Rockable Themes Dec 24, 5:15 pm

    Nice list, some of the most useful extensions for a good Web coder/designer.
    Thank you.

    Reply
    0
  2. Rufus Dec 24, 5:45 pm

    I also like Widerbug. Since I always maximize my browser windows anyway, Widerbug allows me to use some of that wasted space.
    Nice collection, thanks!

    Reply
    0
  3. aditia Dec 25, 9:05 am

    Wow really this much, before read this I only know FirePHP and Yahoo YSlow
    Thank for sharing

    Reply
    0
  4. Joshua Gruber Dec 27, 7:42 pm

    Hey, your link to firecookie is an outdated version. I think this is the right one: https://addons.mozilla.org/en-US/firefox/addon/6683/

    Reply
    0
  5. francesco Jan 12, 5:15 pm

    add colorzilla, capture fox, screengrab :)

    Reply
    0
  6. petra jordan Dec 3, 2:17 pm

    Wow really this much, before read this I only know FirePHP and Yahoo YSlow
    Thank for sharing

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters