Now let’s learn how to use firebug:
There are two ways to install firebug
- Open firefox, go to Tools > Addons > Get Addons and then search for firebug. Now click on Install. Restart firefox after installing
- Or you can go to getfirebug.com and click on “Install Firebug for Firefox” button.
The short cut key to view the firebug windows is “F12”. Or alternatively you can also click on the firebug icon from the status window.
This is the most powerful feature of firebug. Through this, you can directly get the source of that particular element. You can know all about that element, which style sheet is it using, which link its pointing to, what HTML is it using, etc. Inspecting about an element means knowing all about that particular selection.
To inspect an element simply right click on the element which you want to inspect and click on “Inspect Element”. Or you can also press “F12” and click on the “inspect” icon and then move your mouse to any element and then you’ll be able to see a blue rectangle surrounding that element and its code in the firebug window.
Click on “+” to expand that line. You can edit the text or experiment with the coding here only and the changes will be displayed in the website directly. Also you can select any line and click on “Edit” and a new window will open where you can further edit that code or text.
Here you can minutely change each and every element you wish. Editing in this window is too easy.
Notice the Style window in the right side. It shows you which CSS file is being used by this element. Just hover the mouse over style.css and you can also know about its location. This is very useful if you want to know the location of that particular style sheet. When you hover the mouse over the color element in this window, visualization is shown of that color, this live preview gives you a idea of how that color looks like.
In the HTML window, click on “layout”. This is very useful feature to see the measurements of the navigation window and to know about padding, border and margin of a website. Below is a an example.
If you just want to know about the loading time of images, then click on “Images” and it will show you just the loading time of images on your webpage.
Through this firebug plugin, you can edit live websites, preview how it looks, inspect the elements and do just about everything you wish to. This plugin is a real solution to web developer’s problems. Just try it.