[Reprinted] from today on, debug the script to stay away from Alert

ArticleDirectory

•  
• Debugging tool-console. Log
• Debugging example: Google Calendar API
• Add a breakpoint in the browser to debug JavaScript code
• Tips-add Smart Tips When writing JS independent files in
• Conclusion

I don't know how many people like me, web development in a few years, countless JSCode, But only the alert method is used to debug the script.

I don't know how many people are like me. In a simple method, alert needs to be constantly used during development to ensure that the values are correct. One step is alert and alert is everywhere. Alert cannot be viewed in the browser every time, jump out to stop.

If you are really frustrated with me, I am glad to see this article. I am going to show you how to get rid of alert's nightmare.

Debugging tool-console. Log

Currently, mainstream browsers (chrome, IE8 and later versions, Firefox, and opera) Support console functions.

Chrome:

Ie9:

Firefox (firebug plug-in needs to be installed)

When the console. Log method is called in JS Code, the corresponding information is displayed on the console. Compared with the alert method, alert has three advantages:

1. If the parameter is an object, you can view all the attributes on the console.
2. Similar to the string. Format function in C #, String concatenation is not required.
3. No pop-up window exists, and the page experience is not affected even if it is not deleted.

Debugging example: Google Calendar API

I recently encountered a problem during the integration of googleapi. There are two conditions for Google API to submit information:

1. HTTPS protocol.
2. You need to submit data in JSON format.

I do not fully understand the differences between HTTPS and HTTP. Only through operations can I know that the listening software (such as fiddler) cannot intercept the detailed information of HTTPS requests, and the whole process is in the form of Ajax, the result is: there is an error in any part of the page. When you click the button, there is no response, but you do not know where the error is.

For the second article, I used to submit data in JSON format for the first time. In the past, I used to return JSON data.

In order to pass the entire process, I made a simple test code. The three input boxes respectively indicate the title, start time, end time, and a submit button:

The JS Code is as follows. Manually construct the JSON object tempres and send it to the Google response address:

Function makerestrequest () {var tempres = {"summary": $ ("# summary "). val (), "Start": {"datetime": $ ("# Start "). val () // "2012-03-21t10: 00: 00.000 + 08: 00"}, "end": {"datetime": $ ("# End "). val () // "2012-03-21t11: 00: 00.000 + 08: 00" }}; console. log (tempres); Gapi. client. request ({'path': '/calendar/V3/calendars/primary/events', 'method': 'post', // 'body': resource, 'body ': tempres, 'callback': writeresponse });}
 

However, after the code is complete, clicking the button does not respond, so I use console. log to view the tempres object. The result is as follows:

The figure shows that the end attribute is "undefined". Why? After confirming that the input value format is correct, the IDs of the two input boxes are repeated. The error code is as follows:

<Tr> <TD> start: </TD> <input type = "text" id = "start" name = "start"/> </TD> </tr> <TD> end: </TD> <input type = "text" id = "start" name = "end"/> </TD> </tr>
 

So, let's change it!

I often encounter such a small mistake in coding, and console. log allows me to quickly locate the problem. Here there are only three attributes of the JSON object, which can be found by alert one by one. However, if there are 10 or 20 attributes, alert will be clumsy.

Add a breakpoint in the browser to debug JavaScript code

Debugging Code cannot be separated from breakpoints. In mainstream browsers, you can add breakpoints to JavaScript code for debugging. Although the functions are similar, I prefer ie More than chrome and Firefox, it may be because you are used to.

The debugging interface of IE is shown in. The input box in the lower right corner allows you to conveniently view the value information of the current context. Similar to the "immediate window" in the debugging process of ".

Tips-add Smart Tips When writing JS independent files in

Smart Tips can greatly reduce spelling errors to improve efficiency, so I feel uncomfortable when I encounter code writing without smart prompts. However, when I create an independent JS file and use a framework such as jquery and knockout, I often do not dare to start because there is no smart prompt. For example, dependentobservable is a common method in Knockout:

This. Total = Ko. dependentobservable (function () {return this. unitprice * parseint (this. Quantity () ;}, this );
 

This method is too long to be spelled incorrectly. However, it is often difficult to locate a spelling mistake.

Therefore, the trick here is to add the following code at the beginning of JavaScript to support the smart prompts of the corresponding framework:

 
/// <Reference Path = "~ /Scripts/knockout. js "/> // <Reference Path = "~ /Scripts/jquery-1.6.4.js "// <Reference Path = "~ /Scripts/jquery. LINQ. Min. js "/>
 

After the code is added, You can encode it again:

This section has nothing to do with JS debugging, but it is helpful to reduce the code error rate through smart prompts.

Conclusion

The above is my personal experience. It describes the process of getting rid of alert. I believe there are other better JS debugging methods. If there is anything wrong, please criticize and point out.

Address: http://www.cnblogs.com/hkncd/archive/2012/03/26/2417315.html