My Favourite Firefox Addon


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.

image

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

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.

easy wordpress

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.

stylesheet

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!

Related posts:

  1. Smart People Use Firefox
  2. Must Have Firefox Extensions For Bloggers
  3. Zemanta Firefox Plugin Can Read Your Mind!
  4. WP Plugin – Firefox Popup
  5. Wordpress Plugin – Enable FireFox Spell Checking in WP2.1

11 Responses to “My Favourite Firefox Addon”

  1. Andrew Pavelski on February 29th, 2008 5:52 am

    I’ve always liked Firefox better than IE — it seems to me like it runs smoother, it’s quicker, and safer… BTW>>That seems like a real cool code plugin Monika, I’m definitely going to check into it. Is it legal to take bits of code from another website and apply them to your own?

  2. Life is Colourful on February 29th, 2008 9:23 am

    This is something cool in Firefox add-ins. Even I had used it in past. Right now, I would suggest bloggers to use YSlow and find out what makes loading your site slow.

    @ Andrew: What you think, how half of the developers in the word do coding then ;)

  3. Monika Mundell on February 29th, 2008 11:34 am

    @ Andrew: sure you can. As long as you don’t copy bit by bit I don’t see a problem. I use it to teach myself on how to style certain things in my blog and it is a whole lot of fun actually learning about coding like that.

    @ Life is Colourful: The YSlow is great as well, thanks for the mention. There are so many cool addons we would have to start its own blog to name them all.

  4. Brown Baron on February 29th, 2008 11:29 pm

    That’s one of my favorites too! It’s a fantastic tool for anyone wanting to tweak their theme or looking to make their own. Nicely written :)

  5. Monika Mundell on March 1st, 2008 1:55 am

    @ Brown Baron: Thank you for the heads up. Coming from you this means a lot, ;-) since you are a bit of a tech spunk anyway.

  6. Jylan Wynne on March 2nd, 2008 3:08 am

    I agree, it is a great plugin. Which makes it a pity that I don’t use it much now.

    A few months ago I split Firefox into 2 profiles (because it was extremely slow), one with all my web developer plugins and stuff and the other one with almost no plugins just for general browsing. Now when I have a problem with code I normally just try and figure it out without loading up the other Firefox profile (and quite often quitting the current profile of Firefox with pages that I don’t want to lose loaded in it).

    A bit of a dilemma, at least untill I upgrade the computer :(

  7. Monika Mundell on March 3rd, 2008 4:57 am

    @ Jylan: Well, you should be quite alright anyway. With your talent. :-)

  8. Harish on March 4th, 2008 2:34 pm

    Thats great ! Thanks Gobala !

  9. sudipto on March 4th, 2008 2:39 pm

    I am also firefox fan like you. It’s so nice of you to mention this tool, useful indeed for a blog template guy like u.

  10. Suzie Cheel on March 6th, 2008 1:06 am

    Thank you off to download it now , will be very helpful i think ans Yslow, thanks

  11. Spy On Your Competition With Firefox' s Search Status | Blogging Tips on April 25th, 2008 1:45 pm

    [...] in February I wrote about Firebug which is one of my favourite Firefox addons. Another one that offers way more than the first [...]

Got something to say?





  • Join us On FaceBook