Professor X and the Sheer Awesomeness that is Firebug

Welcome to the second part of the quest for beautiful add-ons for the Mozilla Firefox browser!

Before you read this post, please be so kind to read the post I wrote on Sunday, about Professor X and the Pleasure of Firefox Add-ons and about the basics of Mozilla Firefox and my discovery of add-ons.

You might remember that I found this beautiful list of the ‘25 Time Saving Mozilla Firefox Addons for Web Designers and Developers’ from the CrazyLeaf web design blog.

I already presented Professor X to you, a lovely tool to have a glance behind the source code of a website without confusing you with too much details and too foreign HTML commands.

Now, I want to show you other gorgeous add-ons which will help you to understand webdesign and even enable you to change the settings.

And here comes the infamous ‘Firebug’ into existence.

It is said to be able to modify images via CSS and one can change the HTML and therefore, also the design of the website.

You might remember the procedure of installing Professor X, which I presented to you in my last blog. If not, feel free to read it a second time.

Whe you have started Firefox again, you will have Firebug and the little Firebug icon in the menu section ‘Tools’.

Also, you have different options to use your Firebug.

You now have the posibility to display the add-on bar as small line underneath your browers window. That way you can open the Firebug display whenever you want it.

I played a little bit with the different menue bars in Firefox, and decided to remove the bookmark bar and employ the add-on bar. To change these settings, you need to go to ‘View’ and then to ‘Symbol bars’.

Only with changing the little ticks in front of the different bars, you can turn your Firefox window into something completly different!

Isn’t that gorgeous?

Now what can you do with Firebug?

Well… I might be geeking out a little bit and I have to admit that while writing this post I was talking with my friends via Facebook and they can defininitly tell you that I went crazy like mad, because I loved using Firebug.

I was literally squeeing so hard and clapping my hands together that my mother asked me what was wrong.

Now, before I could go crazy and knew how to use Firebug, I had to search for tutorials that would explain, how this application was working.

I found this beautiful web tutorial called ‘Using Firebug To Tell Stories’   which was written by Martha Burtis, who is apparently some kind of teacher, who is giving her class an assignment.

Her post gave me the most important things to know, after which followed my own research.

She is telling her pupils, that the best thing when trying out Firebug, is searching for a website with few pictures and few videos.

I decided to use Wikipedia.

Now, you can search for any article you like. Because I am a movie geek I searched for the X-Men movies , in order to keep my topic from my first post. 😀

When you have your favourite Wikipedia article in front of you, you can either click on the little Firebug  icon on the right hand side corner of your add-on bar or you can go to ‘tools’ and put your cursor over the term Firebug; then you can click ‘open Firebug’.

 I found that out by playing around a little bit, so don’t be afraid to play with the settings as well.

After opening Firebug, you will have the Firebug interface in the lower part of your window:

On the right hand side, you have different options to get information about the programming code of the website. I tried to find out the meaning of them by myself to understand them better. Feel free to search for tutorials, if you feel that my following explanations are not accurate enough.

You will find the headers for ‘Style’, where things like the background colour and the font type are shown, the header ‘Computed’ where you will find a table with the most important parts of the website, like text, background or layout and the corresponding values. The other two headers are ‘Layout’ and ‘DOM’. Layout is quite self explicatory and DOM  is a thing which I already encoundered in computer science at school. It is a programming language- independent convention that can be used in different platforms, to change elements within the used programming language.

The left hand side, however, is where the fun begins.

Like on the right hand side, there are different sections, the two most important ones being HTML and CSS, so we can have the basic building blog in the form of HTML and a formating and layout tool in the form of CSS.

 Let the show begin!

The only thing that I learnt from Martha Burtis’ blog was that I had to right-click on any element on the page and clock ‘Inspect Element’ (or in German ‘Element untersuchen’.)

And then my own personal research began and I have to tell you, it was soo much fun!

Click on the text and chose ‘Inspect Element’. After some trying, I found out that ones has to put the cursor over the left side of the Firebug interface. When doing this very slowly, you will see that the real text on the webside is changing its colour.

Look at this example:

When you have your cursor on the space, which highlights the part of the text you want to change, click right and chose ‘edit HTML’ or in German ‘ HTML bearbeiten…’.

The window will open to reveal the HTML structure of the text. Now, you can clearly see what HTML command matches which element in the text and you can of course also edit words.

After I discovered that, I sent my friends on Facebook pictures of Wikipedia pages from their favourite actors or singers, where I included them as spouses of the respective persons.

And THIS is where the geekiness starts….

I wanted to be the wife of Chris Pine (yummy) , my favourite actor, so I searched for his wikipedia article and went to work.

As before, click on the little box, which is always in the right center of an wikipedia article about famous people and which shows a picture and describes the date of birth and the current occupation.

Do as I explained earlier and add the little section of Spouse underneath the section Years Active.

Take some time and play with it.

Look at the HTML code to see what commands you have to add.

 See the difference?

Awesome, right? Professor X would be proud!

Sadly, Firebug does not save the settings (:D). When refreshing the page, they are gone.

But wasn’t that fun??

You might want to check out more thing you can do with Firebug, like changing images and editing content. This way, you will not only have tremendous fun, but also learn how to programme with HTML and create a beautiful website!

Hopefully you have learnt as much as I did. Excuse me, for not including as many links as normal, but I did most of the research on my own!

Now, I’m off, playing with Firebug!

See you!

Sophie

Advertisements

6 thoughts on “Professor X and the Sheer Awesomeness that is Firebug

  1. Hey Sophie!
    As I was one of the girls you already presented this on facebook, I’m not surprised by how geeky this post is. But you know what, it’s fun reading it, since one can clearly see that you really enjoyed all the research and exploring the new software all by yourself. That you write from personal experience and so human makes it easier to understand all the technical terms. You advise readers to read the other blog post,too, but honestly, I was to lazy to read it. Nevertheless I could follow you, which either means that I became a geek, too, or just that you were really able to explain everything very simple but clever…?! (I’d say it’s the second)
    Did you know that firebug slows your firefox by 74%? It’s also supposed to slow down your gmail, if you want to avoid that just read this short article: http://www.techerator.com/2011/06/firebug-add-on-for-firefox-is-known-to-slow-gmail/

    So my comment: geeky but great! 😉

    btw: great screenshots! 😀

  2. Hi Sophie,

    I am really impressed how easy was to follow your toughts throgh the whole text. You relly have a talent to comprehensively explain topics that can turn out to be difficult to be understood by most people, as is the case in your post. In my blog post I explained about the Adblock addon for Firefox, as I thought that this is the most intersting plug-in, but how I by reading your post, I found out that there far more interesting ones. Thank you for enlightening me.

    In terms of outline, I think that the way you used a combination of text, screenshots and pictures is well ballanced. I wish I structured
    my post in the same way.

    Great job!

  3. Hello again…

    As I already read your first part of the article and left a comment I felt the need to also leave a few words on this part =) Again it was fun reading the article especially as one can feel your excitement in every word you’re writing! And honestly: Although I’m normally really IT-averse (you know what I mean…) I even started to get excited about this Firebug-thing myself. Somehow it all sounds like a lot of fun, very easy and not at all scary when you describe it!
    And seriously, there is no need to search for online tutorials after having read your article because you explain everything very detailed and your screenshots are perfectly supporting your descriptions. So don’t worry about not having used that many links, I think you could not have done a better job! And by the way: Thank you for the modification of my favourite musician’s Wikipedia-page… =P Great work!

  4. Oh Sophie,

    THIS IS AWESOME!
    What a wonderful experiment! It was so fun and easy to follow! I wish Firebug was around back in the days when Myspace was ‘in’ – it would have been really handy to design your page with firebug, since the preview option was not exactly accurate.. I agree with Dian – you did great on explaining something very technical comprehensively for everybody! Maybe you should think about monetizing this talent of yours somehow – I would love to read more! So, please let me know when your geeky articles will appear in some major magazine 🙂

    Thank you for this beautiful post, I’ll definitely give Firebug a try.. sometime.

  5. Pingback: Best Posts | Lots of WebWork

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s