5 extensions for Firebug

Analysis of 5 add-ons for the Firebug extension, with which to extend the Firebug functionalities and aids for web developers.

UPDATED: Firebug is already integrated into the Firefox Developer Tools, so these extensions aren’t really necessary or have been transformed to work outside of Firebug. We have removed invalid links.

As we should already know, Firefox is a browser that delights developers, mainly because it has a large number of useful extensions for programmers and designers of web pages, which once installed offer us a multitude of aids for web development, fast and no headaches. In the manual that we have been publishing on .com, we have already reported various essential extensions for developers.

Now in this article we are going to show a series of extensions that are installed on top of another Firefox extension called Firebug, that is, they are extensions of an extension. Firebug is perhaps the most interesting Firefox extension for developing web pages, since it offers a multitude of utilities for analyzing web pages and searching for errors and layout problems, etc. If you want to know about this essential extension, check out the article about .

As I said, there are various plugins for Firebug, created by other extension developers, which are installed separately and which further increase the benefits for website builders. Let’s see the most interesting below:

YSlow

This Firebug extension is used to control the loading of a web page and to know the download time of each of the elements that compose it, so that we can analyze the speed or slowness of our page. In addition, it offers various information and advice to improve the development of our website and optimize loading times.

See also  How to create an alias of a command in Linux (Ubuntu)

To find more information in Spanish

firecookie

This extension for Firfebug is used to control the cookies that register the different websites that we visit in the Firefox browser. It is a very useful extension when we are working with cookies and we want to know if they are being saved correctly in the system.

Basically what it does is display a list of cookies that have registered the domain we are visiting, from which we can see the name of the cookie, the value it has and other properties such as its expiration dates.

In addition, it allows from Firebug to control the operation of Firefox with respect to cookies, to always accept or reject them, delete cookies for a website, create cookies for a site, etc.

To use this extension you have to enable the Firebug “cookies” panel for the domain with which you work.

This extension does not exist, but you can find other similar extensions in the Firefox catalog.

Inline Code Finder

This extension allows you to view inline code within a web page, which perhaps could be placed elsewhere to optimize the page’s code. Online codes are those that are inserted in the HTML tag itself and that, to be more “clean” and consistent in programming, could be written in a different place.

For example, it detects and shows the CSS styles inserted with the style attribute in the HTML tag itself, the event handlers coded in the HTML tags themselves, through attributes like onclick, onmouseover, etc., or Javascript links. As we may know, it is more correct to write CSS styles in separate CSS declarations, rather than style attributes, and as far as Javascript events are concerned, it is better to write them in scripts, separate from the HTML tags themselves. The Firebug Inline Code Finder extension helps us find all these “misplaced” codes in the HTML of the web we are viewing.

See also  Node JS example with HTTP module

This extension, it should be said, that is available to work within Firebug and also as a completely independent extension.

This extension no longer exists.

pixel perfect

It is an extension that allows you to superimpose an image on any web page, on top of the page itself, so that we can see how it would look within our design. For example, we could test how a band would look with an image in the header of our website, without having to alter the page, simply overlaying the image.

But what Pixel Perfect is really designed for is to superimpose our web design, which we may have created in an image with a program like Photoshop, over the design created in HTML and see how similar or different they are from each other. So that we can adjust the design of our page to the last pixel.

For install

FirePHP

This extension is for working with the Firebug console from PHP. By means of some PHP functions, it is possible to make Firebug receive messages in the console, which the developer can view in Firebug itself.

Actually, the FirePHP extension is designed for Ajax applications, which are complicated to be able to display data on the screen and do debugging, because the response that PHP must give is in XML and/or JSON and it is difficult to dump content in those formats. of variables or other things that help us debug in PHP. Since messages sent to FirePHP go another way (in data sent in the Ajax response header, called X-FirePHP-Data), they don’t interfere with responses from Ajax functions.

See also  Constructor overloading in PHP

To use this extension you have to enable the Firebug “net” panel.

For install

To get

More experimental Firebug extensions

These are not the only Firebug extensions, as the truth is that there are many others that are being developed. It just so happens that the other extensions are in an “experimental” state, at least at the time of writing this .com web development article. In this state they are still not recommended except for testing, but some of them look very good and I hope they will be released soon. To find other experimental Firebug extensions we can do a simple search for “Firebug” in the Firefox add-ons search engine:

Loading Facebook Comments ...
Loading Disqus Comments ...