The greatest thing about Firebug is that it is browser based and if you’re using Firefox it’s just a matter of accessing the plug-in. FireBug also allows you to check you’re CSS, edit, change or disable certain lines to see the expected output. Great news for newbie CSS coders who can now practice/learn design based on hit n trial. Let’s have a look at some of these features in practice. For this tutorial I will be using Firefox version 3.05.
First let’s look at how CSS design can be viewed/improved using FireBug. The page I created looks like this:
Now right-click in the browser window and click “Inspect Element”, make sure FireBug is installed at this point.
Or as an alternative click the “Bug” image at the bottom-right corner of the browser which looks like:
A window at the bottom of the browser would appear. Click the CSS tab to view/edit the CSS directly.
Now click at each of the attributes and see how it affects the design. Double clicking the empty space also allows you to add new attributes at runtime or right click and select “new property”. I get the following output when I disable the “boxhead” attributes, observe how it is different from the previous design.
Pretty simple and easy to use eh ?. It’s an ideal tool if you wish to learn about CSS, different properties or even test your design out.
Within the same page I created a simple script that executes a loop as follows:
Open FireBug, Select the scripts tab and find the code you wish to debug, then place the break point by clicking the line number, add a watch by clicking the watch tab on the left and adding your variable, in this case it is “x “. Refresh the Page and press F8 to Continue. The image below highlights these features: