Học JavaScript qua ví dụ part 96 docx

18.6 Debugging Ajax with Firebug Firebug see Figure 18.26 is a Firefox extension that lets you debug and profile your Ajax, HTML, CSS, JavaScript, and DOM applications by using tabbed br

18.6 Debugging Ajax with Firebug

Firebug (see Figure 18.26) is a Firefox extension that lets you debug and profile your

Ajax, HTML, CSS, JavaScript, and DOM applications by using tabbed browsing and a

console for errors and log messages Firebug appears either as a separate window or as

a small panel at the bottom of your browser The FireBug console can log all Ajax

requests live, and allows you to inspect the responses that are normally invisible You

can see the value of the XMLHttpRequest object, the server’s status, the readyState, and

so on and with the Script debugger step through the your program line by line or stop

at specified breakpoints watching the changes in real time Firebug’s inspectors allow

you to see the CSS rules and watch DOM nodes as they are being created, modified, and

removed by JavaScript in real time Firebug’s Script tab contains a powerful debugger

that lets you pause JavaScript execution on any line You can then step forward

line-by-line to analyze how the state of the program changes in real time Firebug also lets you

specify the circumstances under which a breakpoint is triggered and lets you browse

code as well as edit it

Figure 18.25 After parsing the JSON string.

Figure 18.26 The Firebug Web site.

If you want to test your pages in Internet Explorer, Opera, and Safari, the solution is

Firebug Lite, a JavaScript file you can insert into your pages to simulate some Firebug

features in browsers that are not named Firefox Firebug Lite creates the variable

“fire-bug” and doesn’t affect or interfere with HTML elements that aren’t created by itself Go

to http://getfirebug.com/ for more information.

Figure 18.27 shows Firebug in its own window with breakpoints The yellow arrow

on the left is the line that is currently executing The problem: Firefox returns an HTTP

status of 0 instead of 200 By placing the cursor on the status variable, Firebug will show

that the value is 0 The pane at the bottom of the Firebug window monitors the value of

variables, breakpoints and the state of the program’s stack The little blue arrow to the

left of the Console tab lets you step through the program one line at a time The red dots

to the left of the program are breakpoints obtained simply by clicking on a line number

Firebug comes with full documentation and there are a number of tutorials on the Web

to help you understand how to use it most effectively For an excellent video

demonstra-tion on using this debugger with Ajax, see “Introducdemonstra-tion to Debugging AJAX

Applica-tion with Firebug” on YouTube at http://www.youtube.com/watch?v=W4jXAaEMp2M (see

Figure 18.28)

Figure 18.27 Setting breakpoints with Firebug Putting the cursor on a variable shows its value.

Step 1 From the Firefox browser window where your program output is displayed,

Go to the Tools menu in your browser menu bar Under Add-ons, click on Firebug and a new window will pop up Click Open Firebug

Step 2 The Firebug screen will be split in two parts: the upper half will be the web

page you are displaying and the lower half will be Firebug displaying the code behind the Web page you are watching By selecting the feature of the program you want to check (i.e., HTML, JavaScript, the DOM, and the NET) you can scroll through the program code looking for that

Step 3 Click on the different sections of the site (always on the bottom half of the

screen) and on top notice how the area you clicked is highlighted That will help you identify the bugs

Step 4 You can set breakpoints by clicking on any line in your code and then moving

Figure 18.28 A video to teach you how to use Firebug.

DOM tree, and check to see what is happening on the network There are more features than can be covered in this text, but the Firebug documentation and online help are excellent if you want to use this tool to help you identify the bugs in your program

This chapter focused on Ajax, making asynchronous server requests using JavaScript

The main idea was that the browser fetched small pieces of content from the server

bypassing the normal request/response cycle Rather, Ajax represents a communications

layer allowing a page to be updated without interrupting the user’s interaction with the

page After studying this chapter, you should understand:

1 What Ajax stands for

2 Why use Ajax

3 What asynchronous means

4 How to create an XMLHttpRequest object.

5 How to handle browser differences

6 How to initialize the XMLHttpRequest object.

7 How to send a request to the server

8 How to check the state of the server request

9 How to get the response from the server

10 How to get and display the contents of a text file

11 How to get and parse the contents of an XML file

12 How to handle GET and POST requests

13 How to use the DOM and an XML object

14 The advantages of using JSON

15 How to get and parse JSON data

16 How to get and install the json2 library.

17 What Firebug is used for