JavaScript Debugging methods

First, Console.log and debugger debugging methods

Both of these methods make our general favorite debugging method

Once this line of code is executed, Chrome stops automatically at execution time.

You can even use conditional statements to make judgments so that you can run them only when you need them.

if (thisthing) {    debugger;}

There is another drawback to these two methods, some people describe their two words used dirty, hahaha haha

(The reason why he was dirty is mainly because after debugging to delete this code)

Second, console.table method to debug

When encountering an object, we need to see his value, generally we will use the Console.log method;

But when it comes to an object with a more complex structure, the result of the output is not easy for us to observe, and this time we use the Console.table method.

var animals = [    {animal: ' Horse ', Name: ' Henry ', age:43},    {animal: ' Dog ', Name: ' Fred ', age:13},    {anima L: ' Cat ', Name: ' Frodo ', age:18}]; Console.table (animals);

Iii. methods of Console.time and Console.end

It can be useful to know exactly how long a piece of code will take, especially if you are debugging a slow loop.

You can even set multiple timers by assigning a label to the method. Let's see how it works:

Console.time (' Timer1 '); var items = []; for (var i = 0; i < 100000; i++) {   Items.push ({index:i});} console.timeend (' Timer1 ');

　　

Iv. Console.trace Method--Get stack trace information for a function

The order in which the functions are executed--to make it easier for you to understand your own code, like a specific menu for your own customization

var car; var func1 = function () {    func2 ()} var func2 = function () {    func4 ()} var func3 = function () {} var func4 = function () {    car = new car ();    Car.funcx ();} var Car = function () {    This.brand = ' Volvo ';    This.color = ' red ';    This.funcx = function () {        this.funcy ();    }    This.funcy = function () {        This.funcz ();    }    This.funcz = function () {        console.trace (' Trace car ')    }} func1 ();

　　

V. Debug (FuncName)--Quickly find the function to debug

Used in the console debug(funcName) , the code stops when the incoming function is reached.

This debugging method is quick, but the disadvantage is that it does not apply to private functions or anonymous functions.

But except for private and anonymous functions, this could be the quickest way to find a debug function.

(Note: This function and console.debug function are different things.) )

var func1 = function () {    func2 ()}; var Car = function () {    this.funcx = function () {        this.funcy ()};     This.funcy = function () {        This.funcz ();    }} var car = new car ();

　　

Vi.Blackbox script-- block irrelevant code during debugging

Now, we often introduce multiple libraries or frameworks into our applications.

Most of them are well tested and relatively free of traps.

However, the debugger still enters files that are not related to debugging tasks.

The solution is to mask scripts that do not require debugging. Of course, you can include your own scripts as well.

Seven, in the complex commissioning process to find the focus

In more complex debugs, we sometimes want to output a lot of rows.

The thing you can do is to use more console functions to maintain a good output structure,

console.log, console.debug, console.warn, console.info, console.error

But sometimes, some Javascrip debugging information is not what you need.

Now, you can beautify the debugging information yourself.

When debugging JavaScript, you can use CSS and customize the console information:

Console.todo = function (msg) {    console.log ('% c% s% s% s ', ' color:yellow; background-color:black; ', ' – ', MSG, ‘–‘);} Console.important = function (msg) {    console.log ('% c% s% s% s ', ' Color:brown; font-weight:bold; text-decorat ion:underline; ', '-', MSG, '-');} Console.todo ("This was something that's need to being fixed"); Console.important (' This is a important message ');

　　

In console.log() , you can set a %s string, set a %i number, %c set a custom style, and so on, there are many better console.log() ways to use it.

If you are using a single-page application framework, you can create a style for the view message, create another style for the model (models), collection (collections), Controller (controllers), and so on.

Maybe you can use your imagination like Wlog,clog and Mlog!

JavaScript Debugging methods