Firefox is a great browser. It is relatively safe from bugs and has the bonus of giving us tons of added functionality if we choose to want it. Since doing the switch from IE7 last year to Firefox I have not regretted this and love it with a passion.

Since there are so many addons we can choose,it is easy to get confused on what to choose and what not.

Therefore I wrote this post to show you my very own favourite Firefox addon.

The reason being that I can learn more and more about stylesheets and coding and tamper with my own WordPress blogs while learning without stuffing up the code.

Firebug gives me a ton of features which allow me to see code on any website I’m currently browsing. If I want to know how a certain image is pulled from the stylesheet I can open Firebug by going to the tools section in Firefox, then Firebug and Inspect Element. You can see this in the screen shot above.

How to inspect an element

Now to inspect an actual element on a website I navigate to this and click on the “Inspect Element” line as shown while the actual site is open.

Below is a screenshot on what will happen if look at this website Easy WordPress and try to see the size of the header image.

Not only will I be able to see which reference in the stylesheet is pointing to the header, but I’ll also have the information on HTML which would be found in the actual header.php file in your WordPress admin.

To actually see this result you will have to click on the actual element you are trying to inspect. It is kind of like hovering until you see the red floating border appear and then clicking your mouse which will set it at that position.

Don’t worry, you won’t be changing any code on the actual website!

Here is the actual reference from the stylesheet again found in the bottom right corner of the image above.

The code on here tells us that the header image is 960px wide and 110px high. Naturally this is only a small example and could actually also be found out by right clicking on it and then looking at properties.

Non coders (those who haven’t formally learned coding) often get confused on what code needs to be changed in order to add a certain function. Using Firebug will allow you to learn in your own time as you can actually click on this section of Firebug (the stylesheet) and change code.

Doing this will change the layout of the blog (again only in theory not actually). Once you know exactly what to do to make it right, you simply log into your own blog and change the code accordingly.

But don’t forget – always make a backup before you tamper with any code!