On the downside, they??™re
almost always browser-specific. That means that testing in some browsers might prove more
difficult, especially if the problem is happening only in that browser.
DOM Inspector
When it comes to JavaScript development, Firefox is one of the best browsers to develop for.
Its DOM support is certainly one of the best, if not the best, and it also has some of the best
tools for troubleshooting. Built right in is the DOM Inspector, as seen in Figure 1-1.
CHAPTER 1 n THE STATE OF JAVASCRIPT 7
Figure 1-1. The Firefox DOM Inspector
With the DOM Inspector, you can navigate the document tree and view the various properties
for each one. In the screenshot, you can see the properties that you can access via
JavaScript. In addition, there are views for seeing which styles have been set, along with the
computed values, which are handy for seeing why a layout has gone awry.
Firebug
Firebug (www.getfirebug.com) is currently the reigning champion of JavaScript and CSS
debugging tools. It is by far the most powerful and flexible tool to have in your arsenal.
Firebug takes the DOM Inspector to a whole new level. Once installed, the interface panel
is accessible from the status bar. The icon (see Figure 1-2) indicates whether you have any
errors on the current page.
Figure 1-2. The Firebug check mark icon
Clicking the icon expands the interface. There??™s a lot of functionality packed into it, and
while I won??™t go into everything, I do want to highlight some key features that will help in your
debugging efforts.
Pages:
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47