From today on, debug the script to stay away from Alert

I don't know how many people like me, web development in a few years, countless JS Code, debugging scripts only use the alert method.

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 HTTPS request details (You can use the fiddler settings to intercept HTTPS information, but the personal information is not valuable)The entire process is in the form of Ajax, and the result is: an error occurs anywhere. clicking the button does not respond, 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>                <td><input type="text" id="start" name="start"/></td>            </tr>            <tr>                <td>End:</td>                <td><input type="text" id="start" name="end"/></td>            </tr>

So, change it and find that there are still mistakes. Check again!

In the callback method provided by Google, there is a parameter response, but like other callbacks, the parameter is often an object and cannot be started without knowing the attribute. Therefore, console. log is used for callback parameters.

function writeResponse(response) {    console.log(response);    var creator = response.creator.email;    var calendarEntry = response.htmlLink;    

............

}

Then, you can get the following error message in the console:

The error message shows that you need to log on. Therefore, add the logon code, test it, and complete the process!

I often encounter minor errors such as repeated values and spelling mistakes during encoding, while console. log allows me to quickly locate problems. In the preceding example, there are only three JSON object attributes, 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.

 

Note: The jndream and Bluescreen prompts that console. Log reports an error in the browser of the old version. Therefore, remember to delete the debugging information.