JavaScript-CSS

JavaScript – CSS debugging using FireBug

Often while working with JavaScript people place alerts (in a debugging context) throughout the code to check whether what they’re doing is correct or not. I find that pretty annoying and while I continued doing it (placing alerts) I came across Firebug introduced to be by my friend Sergey Arakelov (www.arakelov.com). Firebug is open source multi-purpose debugger and was initially intended for Firefox as a plug-in, now it supports IE and Safari as well.

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.

Tools needed:

1) FireBug plug-in can be downloaded at: https://addons.mozilla.org/firefox/addon/1843 or visit www.getfirebug.com for other ways of using the tool other than as a plug-in for Firefox.

Install the plug-in and you’re ready to go. Open Firefox with the page containing your CSS, HTML, JavaScript.

First let’s look at how CSS design can be viewed/improved using FireBug. The page I created looks like this:

 13

Now right-click in the browser window and click “Inspect Element”, make sure FireBug is installed at this point.

2

Or as an alternative click the “Bug” image at the bottom-right corner of the browser which looks like:

3

A window at the bottom of the browser would appear. Click the CSS tab to view/edit the CSS directly.

 4

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.

5

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.

Moving on to some more functionality, let’s see how JavaScript debugging works using FireBug. Enable JavaScript debugging by selecting the “script” tag and checking the option “support for JavaScript debugging”

 6

Within the same page I created a simple script that executes a loop as follows:

<script type="text/javascript">
function test(){
var x=0;
while(x<10){
x=x+1;
}
}
test();
</script>

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:

 7

These features are very useful if you have lots of functions in JavaScript with multiple calls. Overall a great tool, highly recommended.

Advertisements

One thought on “JavaScript – CSS debugging using FireBug

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