JQuery: Novice to Ninja- P9:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | Images and Slideshows 97 situation where your code fails to do what you expect it to. Figuring out exactly what s going on at any given moment in your code can be frustrating. Sometimes you need to know if a certain function is being called or what the value of a variable is at a specific point in time. Traditionally this sort of debugging is often achieved with the trusty old alert method. For example if you need to to know what value the code has stored in the top variable you type alert top . But this interrupts the flow of the program and forces you to close the alert before continuing. And if the code you re interested in is in the middle of a loop you might wind up having to close a lot of alerts. Thankfully web development tools are constantly advancing and if you use the excellent Firebug plugin for Firefox introduced back in Chapter 2 you can take advantage of the built-in debugging options. One of Firebug s most handy features is the console where instead of alerting the value of variables you can use the command chapter_04 01_lightbox excerpt top left Just open the Console tab of Firebug you may need to enable it first and you ll see the values displayed. No more annoying alert windows You can specify as many variables or expressions as you would like in a single statement by separating them with commas. The outputs generated by different types of log statements are depicted in Figure two simple string outputs a multivariable output consisting of two numbers and a jQuery selection. JJ Console HTML CSS Script DOM Net Clear Profile The calculated position is 440 A jQuery selection divftliqhtbox html body divp Figure . The Firebug console 98 jQuery Novice to Ninja If the variable is a JavaScript object you can even click on it in the console to examine its contents. If it is a DOM node or jQuery object clicking on it will highlight it on the page and jump to it in the Firebug DOM will save your sanity
