Using development tools
As this code comparison has shown, jQuery code is typically shorter and clearer than its basic JavaScript equivalent. However, this doesn't mean we will always write code that is free from bugs, or that we will intuitively understand what is happening on our pages at all times. Our jQuery coding experience will be much smoother with the assistance of standard development tools.
High-quality development tools are available in all modern browsers. We can feel free to use the environment that is most comfortable to us. Options include:
Internet Explorer Developer Tools (http://msdn.microsoft.com/en-us/library/dd565628.aspx)
Safari Web Inspector (https://developers.google.com/chrome-developer-tools/docs/overview. The tools are too involved to explore in great detail here, but a survey of some of the most relevant features will be useful to us.
Tip
Understanding these screenshots
Chrome Developer Tools is a quickly evolving project, so the following screenshots may not exactly match your environment.
When Chrome Developer Tools is activated, a new panel appears offering information about the current page. In the default Elements tab of this panel, we can see a representation of the page structure on the left-hand side and details of the selected element (such as the CSS rules that apply to it) on the right-hand side. This tab is especially useful for investigating the structure of the page and debugging CSS issues.
In addition, we can interact with this console directly from our code using the
console.log()method:$(document).ready(function() { console.log('hello'); console.log(52); console.log($('div.poem-stanza')); });Listing 1.4
This code illustrates that we can pass any kind of expression into the
console.log()method. Simple values such as strings and numbers are printed directly, and more complicated values such as jQuery objects are nicely formatted for our inspection.
This
console.log()function (which works in each of the browser developer tools we mentioned earlier) is a convenient alternative to the JavaScriptalert()function, and will be very useful as we test our jQuery code.
