My Favourite Firefox Addon
February 29, 2008 | By Monika Mundell |
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!
Tags: addon, addon for firefox, code, coding, firebug, firebug addon, firefox, firefox addons
Other Related Posts:
Loading ...
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?
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
@ 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.
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
@ 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.
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
@ Jylan: Well, you should be quite alright anyway. With your talent.
Thats great ! Thanks Gobala !
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.
Thank you off to download it now , will be very helpful i think ans Yslow, thanks
[...] in February I wrote about Firebug which is one of my favourite Firefox addons. Another one that offers way more than the first [...]