In Figure 1-3, the Console tab is selected. JavaScript error messages, Ajax calls, Profile
results, and command-line results appear in the console. Objects can be expanded to view
properties, error messages can be clicked to view the offending line in the source, Ajax calls
can be expanded to view request and response information, and profile results can be analyzed
to discover where errors might be occurring.
CHAPTER 1 n THE STATE OF JAVASCRIPT 8
Figure 1-3. The Firebug console
The HTML, CSS, and Script tabs enable you to view the current state of each of those elements.
You can also make changes and view them live in the Firefox window. Keep in mind
that those changes are only temporary and will be lost when you refresh the page or close the
window. The original files are never touched.
The DOM tab enables you to view the DOM tree and all its properties. The Net tab, as
seen in Figure 1-4, shows all file requests and how long each took to load. You can use this
information to determine where certain bottlenecks might be occurring.
Figure 1-4. The Net tab in Firebug
CHAPTER 1 n THE STATE OF JAVASCRIPT 9
On the main toolbar is the Inspect button, which is very useful, and you will probably use
it constantly (at least, I do!). When you click the button, you can then move your mouse anywhere
on the HTML page. Firebug highlights which element you are currently hovering over.
It also highlights that element in the HTML tab.
Pages:
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48