About javascript debugging and javascript

About javascript debugging and javascript

Recently, we know that the web Front-end has become very heavy a few years ago. Various js frameworks, various objects, and more projects will extract public modules.

The UI display of these modules is the same, but the background logic is different. For example, when we are doing business travel, there is usually a cost-center js public module, the customer enters the cost center when booking a ticket, which is distributed on the online, offline, and app booking terminals. This facilitates monthly settlement with the customer's company in the future.

We also know that the project is bigger and more complicated. After SOA is realized, many problems arise. Just like a theory in the web, all front-end data is untrusted, why isn't the interface data of the other team? In the past, when the project was small, it won't be so unconfident, and it will only record the logs when the Logic error occurs, normal business processes are rarely recorded. After all, info logs are not beautiful, but also consume server bandwidth and the web performance.

However, the project is too big. When you encounter a strange bug in the project one day, you can trace the interface line by line with the help of incomplete logs, but there are too many parameters, the interface parameter data cannot be restored accurately, but you are confident that it is definitely a problem returned by the interface, but you cannot get the complete message. At this time, you cannot find the interface provider, that was helpless at that time. I thought it would be better to have logs on each line.

With the lessons learned, the trend of recording process logs is becoming increasingly prevalent, and finally a major event at the beginning of the year is brewing. I am confused about a lot of things. The web backend is like this, does the current heavy front-end need to record logs? We know that since it is a common js module, this module must have encapsulated some methods by itself. It is definitely not allowed for a third-party program to operate on its own text nodes, as shown below:

Copy codeThe Code is as follows:
<! -- Third module -->
Company: <input type = "text" id = "company" value = "xxx Co., Ltd."/>
Employee name: <input type = "text" id = "username" value = "zhangsan"/>
<! -->
<Script type = "text/javascript">
// Cost center
Var costCenter = (function (){
Var company = (document. getElementById ("company") | "") & document. getElementById ("company"). value;
Var username = (document. getElementById ("username") | "") & document. getElementById ("username"). value;
Var result = {
GetInfo: function (){
Return {company: company, username: username };
},
Validation: function (){
Return Boolean (company & username );
}
};
Return result;
})();
</Script>

To simplify the operation, the Third-Party UI provides the UI node of the company name and employee name, and encapsulates a costcenter class to provide the read method. As you can see, my pre-program only needs to read the costCenter. just get info and it also plays the role of encapsulation.

But the problem occurs here. In actual project practice, the value cannot be obtained in the costcenter due to various reasons. Of course, it may also be a common ui bug.

However, at the time, you were not sure whether the value was actually obtained, but you could not logically get the value. In principle, you could not prevent the order from being submitted, so in order to thoroughly track the bug, write a logCenter Singleton class to record logs. This method is usually used to record logs in js.

<1> ajax

This method is easy to think of, but if you use native xmlhttprequest, you also need to consider browser compatibility, but if you do not use native, you need to use third-party frameworks, such as jquery, however, there are still many companies that do not use jquery, so this should be used based on actual needs.

Copy codeThe Code is as follows:
// Log Center
Var logCenter = (function (){
Var result = {
Info: function (title, message ){
// Ajax operation
$. Get ("http://xxx.com", {"title": title, "message": message}, function (){
}, "Post ");
}
};
Return result;
})();

<2> image

Our dom has an object called image, so we can dynamically assign values to its src to request the background url. At the same time, we need to pass the title and message information in the url, this dynamic image. the src method does not need to consider the compatibility of the browser, which is very good.

Copy codeThe Code is as follows:
// Log Center
Var logCenter = (function (){
Var result = {
Info: function (title, message ){
// Ajax operation
$. Get ("http://xxx.com", {"title": title, "message": message}, function (){
}, "Post ");
},
Info_image: function (title, message ){
// Image
Var img = new Image ();
Img. src = "http://www.baidu.com? Title = "+ title +" & message = "+ message +" & temp = "+ (Math. random () * 100000 );
}
};
Return result;
})();

The above is the main content of this article. We will continue to explore it in the future.