Ajax Debugging Technology IE article __ajax

Source: Internet
Author: User
Tags blank page

Ajax technology in Web development is one of the most common development technology, because of some of the outstanding characteristics of the majority of programmers to become a priority to use one of the technologies. Ajax can be locally refreshed from the server to crawl data, to give users a good experience, while the traditional page refresh using redirects or forwarding, the need for a full page refresh, during the refresh will appear a blank page. Ajax technology from the birth to the present has become quite stable, but also appeared a lot of open source framework, such as the well-known Jquery,ext JS framework, these frameworks can not only be a good solution to the problem of local refresh, there are many benefits, such as: Browser feature mask, Use these frameworks without considering browser compatibility issues; Rapid development of the functional interface, EXT JS provides a rich user control, the use of these controls, you can quickly develop the required functional interface.

Ajax brings many benefits to programmers at the same time, but also to the development and commissioning of software has brought a lot of difficulties, software debugging is a software development process of a sledgehammer, with good this sledgehammer, we can in the development process to solve the problem. This article mainly explains how to debug AJAX programs using the browser's debugger.

1 debugging AJAX programs using IE's debugger

In IE9 above version, has built-in debugging tools, IE9 The following version, the need to install themselves, we can search on the Baidu IE Debugging tools, download their own, this article is not elaborated.

Browser Debugging tools can do a lot of things for us, such as viewing HTML code, viewing the network status of resources, console, script debugging, and so on, we will explain these features in turn. Press the F12 key to open the IE debugging tool. The following figure:

1.1 HTML Debugging

HTML tabs allow you to view HTML elements, any HTML element and hidden elements that appear in the interface can be viewed here, bringing great convenience to debugging HTML code, and using the small arrows "click to select Elements" to quickly select and position elements.

Below we use the small arrows to locate the "Consumer project management" menu with the following results:

In the small window on the right you can modify the style, and can immediately take effect in the browser, this way to debug the style, you can not change the code, the style after the change of the corresponding code, eliminating the frequent changes in the code and the trouble of publishing code.

1.2 Network resource debugging

Network Resource Debugger is a very important debugging steps in Ajax debugging, using the network resource debugger, you can quickly locate server-side problems, such as servers 500 exceptions, pictures can not download (404), server timeout, performance testing and so on. Network debugging requires familiarity with several common HTTP states, and the following are common HTTP status tables:

200

The request was successful and the response header or the data body that the request expects will return with this response

304

Document not changed

404

Resource not Found

500

Server exception

The following figure is the Network debugging window:

There are two types of data formats that Ajax uses, one is XML, and the other is JSON, because JSON is an array of key-value pairs, much smaller than XML and faster to transfer, so the JSON array is more widely used in Ajax, We can use the Network debugging tool to view the JSON array return is correct, take http://localhost:8080/MCS/queryMenu this URL as an example, click the URL, you can expand the URL details, including the request headers, request body, response body, Cookies, initiators, timing information, switching the selector card to the Response body column, you can see the response's JSON array, which is the data source for the AJAX program. The following figure:

1.3 Script Debugging

The core of Ajax is Java script, in the process of scripting, usually encounter a variety of problems, a variety of service-side languages such as Java, C #, C + + and so on have their own debugger, can be process-by-step and sentence-by-step debugging, for program development has brought great convenience, A lot of puzzling questions, look at the stack moment to understand that, since the debugger in software development is so important, then Java Script has no debugger in the end. Of course we do. However, IE launched the debugger later than Firefox, IE6 version of the debugger is very difficult to use, but the subsequent version of IE has been enhanced to IE9, debugger functions can also have a comparison with Firebug, I think probably because Firefox is open technology system reasons, Because Firebug itself is also a netizen to write open source software, and IE is always open source, so IE debugger is generally by the Microsoft officially launched, perhaps Microsoft Human Resources Limited reason, so the introduction of the debugger than the market other browsers late. Because the Windows operating system in China is the mainstream operating system, where everyone in the development of Web programs is also using IE as the main browser, so the Web program in IE browser compatibility is particularly important. The Scripting debugger for IE, like any other language, needs to set breakpoints first. Switch debugger to Script tab, and in the script you need to debug to set a breakpoint, double-click the code corresponding to the line, here, we set a breakpoint on line 32nd, and then start Debugging, click a menu, the program into the debug state, and a high yellow background display, the following figure:

You might ask, what if my code is huge and it's hard to find. We can add the Debugger keyword in the code, debugger can hit a breakpoint in the code, if you need to hit more than one breakpoint, with multiple debugger can, we look at, with debugger interrupt point and in the debugger directly interrupt point is the same effect. The following figure:

1.4 Console

The role of the console is mainly used to output error messages, any script program errors will be displayed in the console, so the console is a debugging script is one of the important tools, we can also output their own information in the console, I think most programmers like to use alert output debugging information, In fact, this approach also has a very inconvenient place, if the programmer after debugging the program forgot to delete the alert statement, and the deployment of the code to the production environment, will affect the customer experience. So the best way to do this is to output directly from the console, and we can enter the custom debugging information in the console by adding the following code to the script:

Console.info ("This is a debugging information");

Screenshot of console:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.