Original text: github.com/dt-fe/weekl…

1 the introduction

Mastering JS console.log like a Pro in this week’s intensive reading, learn more about Console!

2 Overview & Intensive reading

The main function of console is console printing, which can print any character, object, even DOM element, and system information, as described below.

console.log( ) | info( ) | debug( ) | warn( ) | error( )

Print characters directly, the difference lies in the different display forms:

The new Chrome console can categorize printed information:

Log () and info() correspond to info, WARN () corresponds to warnings, error() corresponds to errors, and debug() corresponds to verbose. Therefore, you are advised to use appropriate printing habits in appropriate scenarios, so that you can conduct targeted filtering when troubleshooting faults.

For example, debugging information can be output using console.debug only in the debugging environment. Even if debugging parameters are enabled, the normal view of info is not affected, because debugging information is output in verbose.

Use placeholders

  • % o – object
  • %s – A string
  • % d – the Numbers

Different types of values can be inserted in a line using placeholders, as shown below:

Add CSS styles

  • % c – style

It can be concluded that console supports complex output, comparable to HTML, but with weak input power of strings, so a placeholder + multi-entry design pattern is used to solve this problem.

console.dir( )

Output in JSON mode. Console.log () automatically determines the type and outputs the DOM tree if the content is a DOM attribute, but console.dir enforces the output in JSON mode, which can be converted to JSON output when used on DOM objects.

Output HTML elements

Output as HTML ELements:

This output structure is the same as the Elements print, and you can use console.dir() for detailed properties.

console.table

Print a table on the console as a feature enhancement. While text-only tables can be printed beautifully on the console, the browser debug console is more powerful, and console.table is just one example of its rich text capabilities.

console.group( ) & console.groupEnd( )

Next is another rich text capability, output by group:

This kind of API with side effects is clearly designed for easy reading, but in scenarios where large amounts of dynamic structured data need to be output, the need for structural transformation is a bit of a hassle.

console.count( )

Count () is used to print the number of calls, usually in a loop or recursive function. Accepts a label parameter to customize the output, which by default directly outputs 1, 2, and 3 numbers.

console.assert( )

Console version assertion tool prints the second parameter as output if and only if the first parameter value is false.

This output is error, so it can also be replaced by console.error + code-level assertions.

console.trace( )

Printing the call stack at this point is useful when printing debugging aid information.

console.time( )

Print code execution times, performance tuning, and monitoring scenarios are common.

console.memory( )

Prints memory usage.

console.clear( )

Clear the console output.

3 summary

Console provides so many output specifications that it is actually a form of development specification. After all, the closest thing to a developer is the debug console, and if your project’s print specification is different from the standard specification, the debugging information will look awkward.

As you can see, most open source libraries follow this specification well, such as three-party libraries that never output log(), correctly separate errors, warnings and debugging information, and minimize the use of CSS styles, grouping, tables, etc., because these features are intrusive and not acceptable to all users.

In contrast, the project source code is good for using some eye-catching custom specifications, as long as the rules are well executed.

One final discussion point: Console can be used for debugging, job postings, hidden menus. What other interesting ways have you seen console used? Welcome to leave a message.

The discussion address is: Intensive reading mastery console.log · Issue #228 · dT-fe /weekly

If you’d like to participate in the discussion, pleaseClick here to, with a new theme every week, released on weekends or Mondays. Front end Intensive Reading – Helps you filter the right content.

Pay attention to the front end of intensive reading wechat public account

Copyright Notice: Freely reproduced – Non-commercial – Non-derivative – Remain signed (Creative Commons 3.0 License)