8.1 Using Firebug plugin for firefox

Mozilla firefox is required in order to use this plug in.
Firebug is a great tool for web development, you can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Donwload firebug from the address www.getfirebug.com Some functions of firebug :

• Inspect and edit HTML
• Tweak CSS to perfection
• Visualize CSS metrics
• Monitor network activity
• Debug and profile JavaScript
• Execute JavaScript on the fly
and many more..

We will use it here only for the CSS part.

More specifically for the CSS part, Firebug tells you everything you need to know about the styles in your web pages, and if you don't like some value, you can make changes and watch the effect instantly. Go to your website using firefox then press the firebug icon at the bottom right of firefox window and enable firebug for your website. In the figure fig:65 you can see how to enable firebug.

fig:65 Enabling FireBug

Now by pressing the CSS tab you can see the actual CSS file of your web site and you can modify it on the fly ! For example, we changed the at the main div the background color to c0c0c0 and we got the silver color on the screen. Figure fig:66

fig:66 Modifying CSS With FireBug

When you finish with your testings, remember to save your changes at your CSS file since firebug works on the RAM of the client browser. The changes are not saved nor can be viewed from other visitors. If you want to make the CSS changes permanent save your modified CSS and upload it at your web server via ftp.
Now you can disable firebug from your web site by pressing the 'Disable' voice at firebug menu. Figure fig:67

fig:67 Disabling FireBug

Firebug is a potential tool that you have to learn since it debugs your HTML pages and helps you doing things on the so called 'run time' (like running directly javascripts). Please take a deeper look at FireBug if you have the time it will help you to become a better and more wiser webmaster.