Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / jQuery / How to silently check a jQuery variable value using Firebug

Oct 22, 2010 By Jared Heinrichs Leave a Comment

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.

One of these things is to view the console postings.

Let’s look at how this is done:

NOTE – You must download and install these apps in this order.

  1. Firefox Download
  2. Install and Open FireFox
  3. Using FireFox download FireBug and install.

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

image

There are 4 li items in this xhtml code.

jQuery

image

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.

image

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

image

Filed Under: jQuery Tagged With: How To

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design