Detailed explanation of how to color your JavaScript code log

Preface

When using JavaScript development projects, you can use the help of printing logs to facilitate the analysis of problems; however, when you come into contact with relatively comparative projects, the pure black log output will greatly weaken its effect; although info, wran, error and other methods will distinguish color output, they each have their own responsibilities and are inconvenient to abuse them; at this time, you need to expand some methods to color your JavaScript code logs, so that the logs can play a greater value.

To implement this function, it is actually very simple; just use string substitution and formatting functions; the following is a complete list of its format specifiers:

The first parameter passed to any record method may contain one or more format specifiers. The format specifier consists of a % symbol followed by a letter indicating the format applied to the value. The parameters following the string are applied to the placeholders in order.

For more functions and usage of console, please seeUsing the console | Google Developers;The following is a simple example of color output log:

(`%c The chain of beautiful cities: %s`, 'color: #65c294', ': A very useful website')(`%c The chain of beautiful cities: %c%s`, 'color: #65c294', 'color: #1a1a1a', ': A very useful website')

As mentioned earlier, when it comes to larger projects, in order to roughly flow from the log display code, it is best to encapsulate the method and display it in different colors for different module logs; this can greatly increase the benefits of the log to a certain extent; the following is a practical solution for this:

const _gLogColorObj = {
 moduleA: '#009ad6', // Cyan moduleB: '#65c294' // Ruozhu color}

const _gConsole = (theme, args) => {
 const regStr = `%c@λ~${()}: ${_gGetMatchStr(args)}`
 const color = _gLogColorObj[theme]
 (regStr, `color: ${color}`, ...args)
}

const _gRegMatchObj = {
 object: '%o',
 function: '%o',
 number: '%i',
 string: '%s',
 undefined: '%s',
 boolean: '%s'
}

const _gGetMatchStr = args => {
 const cMatchArr = []
 for (let key in args) {
 (_gRegMatchObj[typeof args[key]])
 }
 return (' ')
}

const $log = {
 moduleA: (...args) => {
 _gConsole('moduleA', args)
 },
 moduleB: (...args) => {
 _gConsole('moduleB', args)
 }
 // You can define more methods here to distinguish different modules;}

In the above code, based on the table driver method, color your JS code log output based on the designed module name (Eg: moduleA) and the established color value, and specify the module where the log is located; this way, the log output can be clearer.

Summarize

The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.