Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "sample analysis of console objects for Javascript debugging", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let me lead you to study and study the "sample analysis of console objects for Javascript debugging".

Different levels of log

Through different methods of the console object, you can output different levels of log information on the console, which are displayed with different flags, as shown in the following figure.

Different levels of logs

Javascript debugging console object, do you know some of its tips?

Include placeholder

Instead of always concatenating strings, you can specify the corresponding value through a% placeholder when outputting information. The supported placeholders include the following.

% s-character

% d-Integer

% f-floating point number

% o-object

Its usage can be seen through the following simple example.

Include placeholder

Javascript debugging console object, do you know some of its tips?

Print packet information

The group () method allows you to display information in groups, similar to the list structure.

Print packet information

Javascript debugging console object, do you know some of its tips?

Expression judgment

In some testing frameworks, assert assertions are often used to determine whether the value of an expression is true. There is also an assert method in the console object, which does not output any information when the assertion is true, but throws an exception directly when the assertion is false.

Expression judgment

The first two statements in the above code determine that the result is true, so no information is output, and the third statement determines that the result is false, so an exception is thrown directly.

Form printing

The console object has a table method that can directly display the data of the object type in a table.

Form printing

Function call stack information

The console.trace () method can display the information of the function call stack to view the function call process, which is generally chosen to be placed in the method body of the last executed function.

Function call stack information

Because the stack is a first-in-first-out mechanism, the first-executed method will be output later, so the above code results will be output in the order of sum, f2, F1.

Timing

It is common to count the execution time of a piece of code by getting the number of milliseconds through the Date object and then subtracting the two milliseconds.

General timing method

In the above code, the time taken to execute the intermediate code is calculated by the difference between the endTime and startTime variables, and we can see that it takes 15 milliseconds to add 100000 strings to an array.

You can also count the execution time of code snippets through the time () and timeEnd () methods of the console object. Time () and timeEnd () can receive a string as an identity, and the two methods must receive the same string, defaulting to the 'default' string if no string is passed in.

Console object timing method

The result of the above code execution is 16 milliseconds, which is roughly the same as that produced by the previous method.

Performance analysis.

Through the console.profile () and console.profileEnd () methods, you can show the time it takes for each function in your code to execute, which can be used to evaluate code performance.

We use the following test code to illustrate.

The console that opens the chrome browser will have a Javascript Profile menu bar, which can be opened in the following way if it is not available by default.

Javascript Profile

When we open this menu option, we can see how long it takes for each method to execute.

Time consumption

The above is all the contents of the article "sample Analysis of console objects for Javascript debugging". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.