ptg 848 Chapter 18 • An Introduction to Ajax (with JSON) 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. From the Library of WoweBook.Com ptg 18.6 Debugging Ajax with Firebug 849 Figure 18.26 The Firebug Web site. From the Library of WoweBook.Com ptg 850 Chapter 18 • An Introduction to Ajax (with JSON) 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 “Introduction 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. From the Library of WoweBook.Com ptg 18.6 Debugging Ajax with Firebug 851 18.6.1 Basic Instructions for Using Firefox 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 your cursor over one of the lines to see what’s going on. You can view CSS, the Figure 18.28 A video to teach you how to use Firebug. From the Library of WoweBook.Com ptg 852 Chapter 18 • An Introduction to Ajax (with JSON) 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. 18.6.2 What You Should Know 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. From the Library of WoweBook.Com . 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. (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 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