How to silently check a jQuery variable value using Firebug

It feels like I’ve learned a lot about jQuery in the last little bit. One thing I tend to do a lot of (especially during the development phase) is to check to make sure that a variable’s value is what I am expecting. Instead of dumping it to the webpage where the whole world can see it, you can dump it to what is called the console of your web browser. While I tend to be more of an IE guy I love the tool called Firebug. This tool is an add-on for FireFox and allows you to do some pretty nifty things.

Now that you have required software installed on your machine we can start coding.

Open your editor and let’s have some fun creating some variables and posting their values to the console which FireBug can read. Let’s look at these code examples.

xhtml

There are 4 li items in this xhtml code.

jQuery

This jQuery code should be read:

Line 1 – When the document is ready run some jQuery Code.

Line 2 – Create a variable called “i”. “I” =’s the number of list items (li) in the menu class.

Line 3 – Dump the value of “I” to the console. In our example you will see there is 4 list items. We would expect that the output is the #4.

If you don’t already have FireFox open right now. Please open up FireFox and make sure that FireBug is open on the bottom of the screen. I believe the FireBug shortcut key is F12. Once you open firebug it should automatically be on the console tab. You will only see one number if you did things correctly. That is the number “4”. If you were to change the number of list items to 5, this number would change to 5 etc.

What happens if you add another list item? AS you can see the console is now at 5 just as you would expect!