Due to most log beautification plugins not being able to locate the code line, I implemented this library myself.
- This is a further beautification and encapsulation of the "console" object, including console. log console.info、console.warn、console.error。
- It can display the number of rows where the log is printed, add custom console printing prefixes, and beautify the content (web side rule reference) https://developer.mozilla.org/en-US/docs/Web/API/Console Node environment reference https://zh.wikipedia.org/wiki/ANSI%E8%BD%AC%E4%B9%89%E5%BA%8F%E5%88%97) ), can close console printing at any time, supports node environment.
Please check the effect on the console.
npm i beautify-console-log --save
or
yarn add beautify-console-log
- Simple use
- For the convenience of use (and compatibility with older versions), I define parameters as multiple types. For example, when configuring with 'config', you can pass in a 'type' value of 'LogType' type, or pass in strings such as' info ',' log ',' warn ', and' error '`
import BeautifyConsole from "beautify-console-log";
const log = BeautifyConsole.getInstance();
//The usage is consistent with the normal console.info()
Log.info(1234, '4', [3, 5]);
or
import BeautifyConsole from "beautify-console-log";
const log = new BeautifyConsole();
log.info(111111);
or
const log = new BeautifyConsole();
//The usage is consistent with the normal console.info()
Log.info(1234, '4', [3, 5]);
Or directly use the dist/index. js
file
<script src="./dist/index.js">
<script>
const log = BeautifyConsole.default.getInstance()
log.info(1234, '4', [3, 5])
// OR
const log2 = new BeautifyConsole.default()
log2.error(111)
</script>
const log = BeautifyConsole.default.getInstance()
log.info(1234, '4', [3, 5])
log.log(1234)
log.close().warn('no show')
log.open().log('show log')
log.error(1234)
log.setPadStartText({
title: "hello world ->",
logType: LogType.info,
}).log(1234)
If you want to turn off redundant logs in the generation environment, you can configure it as follows:
import BeautifyConsole from "beautify-console-log";
import { LogType } from 'beautify-console-log/lib/beautify-console/model';
const log = BeautifyConsole.getInstance();
/**
* Vite uses import.meta.env MODE retrieves the environment
*/
log.config({
title: 'custom title',
type: process.env.NODE_ENV === 'product' ? ['error'] : ['log', 'info', 'warn', 'error']
})
log.info(1234, '4', [3, 5]); // Will not display printing
Or
import BeautifyConsole from "beautify-console-log";
import { LogType } from 'beautify-console-log/lib/beautify-console/model';
const log = BeautifyConsole.getInstance();
/**
* Vite uses import.meta.env MODE retrieves the environment
*/
if (process.env.NODE_ENV === 'product') {
log.close().open(LogType.error);
}
log.info(1234, '4', [3, 5]); // Will not display printing
- initial configuration
const log = BeautifyConsole.getInstance();
import { LogType } from 'beautify-console-log/lib/beautify-console/model';
log.config({
title: 'example pad start text', // Log header content filled on the left
type: ['error', 'warn'], // Display partial log types, only display logs of "error" and "warn" types
})
log.info(1234, '4', [3, 5]);
log.log(1234, '4', [3, 5]);
log.warn(1234, '4', [3, 5]);
log.error(1234, '4', [3, 5]);
- Supported console types
const log = BeautifyConsole.getInstance();
Log.info(1234, '4', [3, 5]);
Log.log(1234, '4', [3, 5]);
Log.warn(1234, '4', [3, 5]);
Log.error(1234, '4', [3, 5]);
- Add custom console log headers
const log = BeautifyConsole.getInstance();
log.setPadStartText({
title: "hello world ->",
logType: LogType.info,
}).info(1234,'4 ', [3, 5])
- Close log Close the corresponding console log types when passing in parameters, and close all types without passing them. supports chain calling.
// ...
const log = BeautifyConsole.getInstance();
log.close(LogType.info);
log.close(LogType.log);
log.close(LogType.warn);
log.close(LogType.error);
log.close();
log.close().open(LogType.error);
// or
log.open(LogType.error).open(LogType.log).open(LogType.warn).open(LogType.info);
// or
log.close(LogType.error).info('closed error');
log.close(LogType.error).error('closed error');
// or
log.close(LogType.error).open(LogType.info);
log.close(LogType.error).open(LogType.info).info('info...');
- Open log Open the corresponding console log types when passing in parameters, and open all types without passing them. supports chain calling.
// ...
const log = BeautifyConsole.getInstance();
log.open(LogType.info);
log.open(LogType.log);
log.open(LogType.warn);
log.open(LogType.error);
log.open();
log.open().close(LogType.info);
//or
log.open(LogType.error).open(LogType.log).open(LogType.warn).open(LogType.info);
// or
log.open().info('closed error');
log.open(LogType.error).error('closed error');
// or
log.close(LogType.error).open(LogType.info);
log.close(LogType.error).open(LogType.info).info('info...');
param | type | description |
---|---|---|
param | BaseConfig | |
├──title | String? | Custom log header, do not display custom log header when the value is empty |
└──type | LogType[] | ('info' 、 'log' 、 'warn' 、 'error')[] | The type of log displayed, set to only display the corresponding log type(LogType.info 、LogType.log 、LogType.warn 、LogType.error 、"info" 、"log" 、"warn" 、"error" ) |
import BeautifyConsole from "beautify-console-log";
import { LogType } from 'beautify-console-log/lib/beautify-console/model';
const log = BeautifyConsole.getInstance();
log.config({
title: 'custom title',
type: [LogType.info, LogType.error, 'log']
})
// The usage method is consistent with the normal console.info
log.info(1234, '4', [3, 5]);
// OR
const log2 = new BeautifyConsole();
log2.info(111111);
The usage method is consistent with the normal console.log
import BeautifyConsole from "beautify-console-log";
const log = BeautifyConsole.getInstance();
log.log(1234, '4', [3, 5]);
log.log({
"name": "chengzan"
});
The usage method is consistent with the normal console.info
import BeautifyConsole from "beautify-console-log";
const log = BeautifyConsole.getInstance();
log.info(1234, '4', [3, 5]);
log.info({
"name": "chengzan"
});
The usage method is consistent with the normal console.warn
import BeautifyConsole from "beautify-console-log";
const log = BeautifyConsole.getInstance();
log.warn(1234, '4', [3, 5]);
log.warn('warn');
The usage method is consistent with the normal console.error
import BeautifyConsole from "beautify-console-log";
const log = BeautifyConsole.getInstance();
log.error(1234, '4', [3, 5]);
log.error('warn');
After using log.close()
to close the log, you can use log.open()
to open the corresponding log type. When opening all types of logs, no parameters are passed (support chain calling).
type | description |
---|---|
LogType | "info" | "log" | "warn" | "error" |
LogType.info 、LogType.log 、LogType.warn 、LogType.error 、"info" 、"log" 、"warn" 、"error" , Or not transmitted |
import BeautifyConsole from "beautify-console-log";
import { LogType } from 'beautify-console-log/lib/beautify-console/model';
const log = BeautifyConsole.getInstance();
log.open() // Open all types of logs
// OR
log.open(LogType.info) // Open the info log
// OR
log.open(LogType.info).open('error') // Open the info log
Closing logs allows you to close all logs or a certain type of log.
type | description |
---|---|
LogType | "info" | "log" | "warn" | "error" |
LogType.info 、LogType.log 、LogType.warn 、LogType.error 、"info" 、"log" 、"warn" 、"error" , Or not transmitted |
import BeautifyConsole from "beautify-console-log";
import { LogType } from 'beautify-console-log/lib/beautify-console/model';
const log = BeautifyConsole.getInstance();
log.close() // Close all types of logs
// OR
log.close(LogType.info) // Close the info log
// OR
log.close(LogType.info).open(LogType.log)
Set the text content and style of the log header
param | type | description |
---|---|---|
param | PadStartText | |
├──title | String | Custom log header |
├──logType | LogType | "info" | "log" | "warn" | "error" |
LogType.info 、LogType.log 、LogType.warn 、LogType.error 、"info" 、"log" 、"warn" 、"error"
|
└──style | PadStartStyle | |
├──color (ColorType | 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'purple' | 'cyan' | 'white') |
ColorType.black ,ColorType.red ,ColorType.green ,ColorType.yellow ,ColorType.blue ,ColorType.purple ,ColorType.cyan ,ColorType.white
|
|
└──bgColor (ColorType | 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'purple' | 'cyan' | 'white') |
ColorType.black ,ColorType.red ,ColorType.green ,ColorType.yellow ,ColorType.blue ,ColorType.purple ,ColorType.cyan ,ColorType.white
|
import BeautifyConsole from "beautify-console-log";
import { LogType, ColorType } from 'beautify-console-log/lib/beautify-console/model';
const log = BeautifyConsole.getInstance();
log.close() // Close all types of logs
// OR
log.close(LogType.info) // Close the info log
// OR
log.close(LogType.info).open(LogType.log)
log.setPadStartText({
title: "hello world ->",
logType: LogType.info,
style: {
color: ColorType.yellow,
bgColor: ColorType.purple,
}
}).log(1234)
// OR
log.setPadStartText({
title: "hello world ->",
logType: LogType.info,
style: {
color: 'black',
bgColor: 'purple',
}
}).log(1234)
After setting custom log headers or closing some logs, you can reset them through log.reset()
.
import BeautifyConsole from "beautify-console-log";
import { LogType } from 'beautify-console-log/lib/beautify-console/model';
const log = BeautifyConsole.getInstance();
log.config({
title: 'custom title',
type: [LogType.info, LogType.error]
})
log.reset() // 打开所有类型日志
log.info('reset log')
{
type?: LogType[] | ('info' | 'log' | 'warn' | 'error')[]
title?: string
}
{
color?: ColorType | 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'purple' | 'cyan' | 'white';
bgColor?: ColorType | 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'purple' | 'cyan' | 'white';
}
{
color?: ColorType | 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'purple' | 'cyan' | 'white';
bgColor?: ColorType | 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'purple' | 'cyan' | 'white';
}
{
title: string;
logType: LogType | 'info' | 'log' | 'warn' | 'error';
style?: PadStartStyle;
}
{
black = 90,
red = 91,
green = 92,
yellow = 93,
blue = 94,
purple = 95,
cyan = 96,
white = 97,
}
{
info = "info",
warn = "warn",
error = "error",
log = "log",
}
import BeautifyConsole from "beautify-console-log";
import { formatConsoleStr } from 'beautify-console-log/lib/utils';
// node.js
log.info(formatConsoleStr('string=%s number=%d', 'string', 1).join(''))
// browser
log.info(...formatConsoleStr('string=%s number=%d', 'string', 1))
-
Fork warehouse
-
Create a new Feat_Xxx branch
-
Submit Code
-
Create a new Pull Request