A brief discussion on debugging javascript_basic knowledge

I have been complaining a lot recently. As we all know, the web front-end has become very heavy compared to a few years ago. There are various js frameworks, various objects, and when there are too many projects, public modules will be extracted.

The UI display of these modules is the same, the difference is the background logic. For example, when we do corporate travel, we usually have a js public module for the cost center, which customers fill in when booking air tickets. This cost center is distributed in online, offline and app booking terminals, which also facilitates monthly settlement with client companies in the future.

We also know that as the project gets bigger and more complicated, and becomes SOA, many problems arise. Just like a theory in the web, all front-end data is untrustworthy, so the interface of the other team Data is not the same. When the project was small in the past, I would not be so unconfident, and would only record logs when there were Logic errors. Normal business processes were rarely recorded. After all, the info logs did not look beautiful, and they would also Consuming server bandwidth will also drag down web performance.

But the project is getting bigger. When you encounter a strange bug in the project one day, you rely on the incomplete logs and finally trace the interface line by line with the naked eye. However, there are too many parameters and you cannot accurately restore the interface. Parameter data, but you are 100% confident that it must be the interface return problem, but you can't get the complete message. At this time, you can't find the interface provider. At that time, you were helpless. It's better to think about it every time. It would be nice to have logs for every line.

After learning the lesson, the trend of keeping process logs became more and more popular, and eventually it led to a big event at the beginning of the year. A lot of things were said in a confused way. If the web backend is like this, then the current front-end needs to be the same. Keep a log? We know that since it is a public js module, this module must have encapsulated some methods. It is definitely not allowed for third-party programs to operate its own text nodes, such as the following:

Copy code The code is as follows:

Company:
Employee name:

In order to simplify the operation, the third-party UI provides UI nodes for company names and employee names, and encapsulates a costcenter class to provide reading methods. As you can see, my reservation program only needs to read costCenter.getInfo. , and also plays a role of encapsulation.

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

But at that time you were not very sure whether the value was really obtained, but logically even if the value was not obtained, in principle you could not prevent the order from being submitted, so in order to thoroughly track the bug, I wrote a logCenter singleton class to record logs. This method is usually used to record logs using js.

<1> ajax

This method is easy to think of, but if you use the native xmlhttprequest, you also need to consider browser compatibility. But if you don’t use the native one, you have to rely on a third-party framework, such as jquery, but after all, there are still many companies that don’t use it. jquery, so this should be used according to actual needs.

Copy code The 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

There is an object called image in our dom, so we can achieve the purpose of requesting the background URL by dynamically assigning a value to its src. At the same time, we need to pass the title and message information in the URL. This dynamically adds value to the image. The .src method does not need to consider browser compatibility issues, which is very good.

Copy code The 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 discuss it in depth in the future