JavaScript Tour-Seventh stop: Talk about JS debugging

　　

Recently compared to spit groove, we all know that the Web front-end relative a few years ago has become very heavy, all kinds of JS framework, all kinds of face objects, and more projects, will extract public modules,

The UI display of these modules is the same, not the same is the background logic, for example, when we do business travel, usually have a cost center of the JS public module, the customer in the booking ticket

Time to fill out this cost center, and this cost center is distributed in Online,offline and app, such as the predetermined end, so it is convenient for late and customer company monthly settlement.

We also know that the project is bigger, complicated, and SOA, a lot of problems come, like a theory in the Web, all the front-end data is not credible, the opposing team

Interface data is not, before the project is small, not so insecure, but also only in logic error will be recorded when the log, normal business process is rarely recorded, after all

Info logs look ugly, but also consume server bandwidth, but also slow down the performance of the Web, but the project is big, when you encounter a strange bug in the project one day, you rely on the incomplete

All the log, it is easy to use the naked eye to trace back to the interface, but too many parameters, can not accurately restore the parameters of the interface data, but you also 100% of confidence is definitely the return of the interface

Problem, but can not get the complete message, at this time you can not find the interface provider, then that helpless ah, many think the best every line has a log that much good ah, have a lesson, remember the process log

Trend is becoming more and more popular, eventually brewing a big event at the beginning of the year, a lot of silly said, the Web backend so, the current heavy front is not the same to log? We know that both

If it is a common JS module, then this module certainly encapsulates some methods, it is definitely not allowed to let the third-party program to operate its own text nodes, such as the following:

1<!--third Module--2Companies: <input type= "text" id= "Company" value= "XXX Co., Ltd."/>3Employee Name: <input type= "text" id= "username" value= "Zhang San"/>4<!---->5 6<script type= "Text/javascript" >7 8     //Cost center9     varCostCenter = (function () {Ten         varCompany = (document.getElementById ("Company") | | "") && document.getElementById ("Company")). Value; One         varUsername = (document.getElementById ("username") | | "") && document.getElementById ("username")). Value; A  -         varresult = { -GetInfo:function () { the                 return{company:company, username:username}; -             }, -Validationfunction () { -                 returnBoolean (company &&username); +             } -         }; +  A         returnresult; at  -     })(); -  -</script>

To simplify the operation, the third-party UI provides a UI node for the company name and employee name, and encapsulates a costcenter class to provide a read method, and you can see that my booking program just reads

Take Costcenter.getinfo, also played a role in the package, but the problem is here, the project in combat for a variety of reasons in the costcenter can not get the value,

Of course, it may be the common UI bug, but you can not be very sure when you really get the value, but logically not get the value, in principle you can not prevent the order to submit,

So in order to completely trace the bug, wrote a Logcenter Singleton class to record the log. Usually use JS to record log with this method.

<1> Ajax

This is an easy way to think, but if you use native XMLHttpRequest, you also need to consider browser compatibility, but not native, with third-party frameworks, such as

jquery, but there are still a lot of companies that do not use jquery, so this is based on the actual need to use.

1     //Log Center2     varLogcenter = (function () {3 4         varresult = {5Infofunction(title, message) {6                 //Ajax Operations7$.get ("http://xxx.com", {"title": Title, "message": Message},function () {8 9}, "Post");Ten  One             } A         }; -  -         returnresult; the  -})();

<2>image

We have an object called image in our dom, so we can achieve the purpose of requesting a background URL by dynamically assigning its src value to the URL, plus we need to pass the title and

Message information, this dynamic way to IMAGE.SRC is no need to consider the issue of browser compatibility, very good.

1     //Log Center2     varLogcenter = (function () {3 4         varresult = {5Infofunction(title, message) {6                 //Ajax Operations7$.get ("http://xxx.com", {"title": Title, "message": Message},function () {8 9}, "Post");Ten  One             }, A  -Info_image:function(title, message) { -                 //Image the                 varIMG =NewImage (); -  -IMG.SRC = "http://www.baidu.com?title=" + title + "&message=" + message + "&temp=" + (Math.random () * 100000); -             } +         }; -  +         returnresult; A  at})();

We see that the network has a URL request, the server can querystring the parameters of the URL, and then you can happily log down, for follow-up we

Thoroughly to troubleshoot the JS front-end process information, then no one can be the passing of the buck.

JavaScript Tour-Seventh stop: Talk about JS debugging