Click on the front youdao public number to view the past articles

As a Web developer, debugging code with console.log should be routine. But the console provides many other ways to help you debug better.

As shown in the figure, console also has the following methods.

These methods can be divided into two categories:

  • Standard characteristics
  • Non-standard features

Standard characteristics

The following seven methods are available in a production environment.

  • According to the information
  • A placeholder
  • grouping
  • form
  • Timing function
  • assertions

1. Display information

  1. The console. The log (" this is the log ")Output General information
  2. The console. The info (" this is the info ")Output suggestive information
  3. The console. Warn (" this is a warn ")Output Warning Message
  4. The console. The error (" this is the error ")Output error message

The console displays the following

2. Placeholders

The above four methods of displaying information can all use printF-style placeholders. There are fewer types of placeholders, and only the following four are supported.

  • %sstring
  • %d %iThe integer
  • %fFloating point Numbers
  • %oobject

The sample

console.log('this color is %s', "red"); Console. log("%d year %d month % I day ", 201,5,25) console.log(" PI is %f",3.1415926) let dog = {name: "小 white ", color: "white" } console.log("%o",dog);Copy the code

The console displays the following

Three, grouping

If there is too much information, it can be displayed in groups.

Console. group(' user info '); Console. log(' name: Li Bai '); Console. log(' Work: Acmen'); // Nest console.group(' address '); Console. log(' Fujian '); Console. log(' Xiamen '); Console. log(' Siming '); console.groupEnd(); console.groupEnd();Copy the code

Collapsed groups can also be replaced by console.groupcollapsed () if you want to collapse groups by default

Four, tables,

Display data in tabular form.

Console. table([{id: 12987122, name: '2016-05-02', time: '2016-05-09'}, {id: 12987125, name: '2016-05-09'}])Copy the code

5. Timing function

Console.time () and console.timeend (), the amount of time it takes to run a string of code.

Six, assertions

Console.assert () is used to determine whether an expression or variable is true. If the result is no, a message is printed to the console and an exception is thrown.

Non-standard features

This feature is non-standard, so try not to use it in production!

First, performance analysis

Analyze the running time of each part of the program to identify problems.

Suppose we have a function Foo() that calls two other functions funcA() and funcB(), of which funcA() is called 10 times and funcB() once.

function Foo() {
  for (let i = 0; i < 10; i++) {
    funcA(1000)
  }
  funcB(10000)}function funcA(count) {
  for (let i = 0; i < count; i++) {}
}

function funcB(count) {
  for (let i = 0; i < count; i++) {}
}
Copy the code

This method is no longer valid in new browsers.

Second, the console. Dir ()

Console.dir () displays all of an object’s properties and methods.

Iii. Counter

Console.count () is used to count how many times it is called.

reference

  • MDN console
  • The correct way to open console
  • Chrome DevTools console and command menu
  • How to use the JavaScript console: going beyond console.log()