console-log-advanced
Description
console-log-advanced is an npm package for JavaScript logging. It enhances console logging in front-end frameworks like Vue, React, and Angular. It provides detailed information in development mode and deactivates logs in production mode for optimized performance.
Installation
You can install Console Log Advanced using:
npm i -S console-log-advanced
pnpm i -S console-log-advanced
yarn add console-log-advanced
Config
Importing the package
// in project utils/logger.ts
import ConsoleLogAdvanced from 'console-log-advanced';
const clg= new ConsoleLogAdvanced({ isDevelopMode: true });
export default clg
The isDevelopMode
option determines the activation of the logger in different modes. Set it to true
to enable logging during development and false
to disable logging in production. This feature ensures that logs are only active during the development phase for better performance in production environments.
Usage
import clg from '../utils/logger.ts';
const foo = { name: "foo", age: 32, isEdit: true };
clg.logger({
name: "foo",
value: foo,
path: 'src/index.js',
line: '56',
comment: `This is an optional comment.`,
date: '2023-July-12',
time: '21:17:38',
collapsed: true,
isActive: true,
});
The logger()
method has the following parameters:
-
name
(required): The name or title of the log. -
value
(required): The value or content of the log. -
path
(optional): The path of the file where the log is being logged. -
line
(optional): The line number in the file where the log is being logged. -
comment
(optional): Additional comment or description for the log. -
date
(optional): The date of the log. -
time
(optional): The time of the log. -
collapsed
(optional): Whether to collapse the log group in the console. Default istrue
. -
isActive
(optional): Whether the log is active or not. Default istrue
.
These parameters allow developers to customize the log output by providing relevant information such as log name, value, file path, line number, comments, date, and time. Additionally, developers can choose to collapse log groups in the console and control the activation status of individual logs.
Example Output
isDevelopMode = true
--------------------- Start foo ----------------------------->
Path: logger.js
Line: '56'
Date: '2023-July-12'
Time: '21:17:38'
Type: Object
Name: foo
{name: 'foo', age: 32, active: true}
comment: This is developer comment
isDevelopMode = false
Sorry we are in production mode..
VSCode Snippet
"logger": {
"prefix": "-logger",
"body": [
" clg.logger({",
" name: \"${1:Variable}\",",
" value: ${1:Variable},",
" path: '$RELATIVE_FILEPATH',",
" line: '$TM_LINE_NUMBER',",
" date: '${CURRENT_YEAR}-${CURRENT_MONTH_NAME}-${CURRENT_DATE}',",
" time: '${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}',",
" comment: `${2:comment}`",
"})"
],
"description": "Logger full"
}
WebStorm Snippet
clg.logger({
name: "$VAR",
value: $VAR,
path: '$FILEPATH$',
line: '$LINE$',
date: '${YEAR}-${MONTH}-${DAY}',
time: '${HOUR}:${MINUTE}:${SECOND}',
comment: `${COMMENTS}`,
isActive: $isActive,
})
License
MIT
License
Console Log Advanced is MIT licensed.
Contribution
Contributions are welcome! If you find any issues or want to contribute to the project, please create a pull request or submit an issue on the GitHub repository.
Credits
Console Log Advanced is developed and maintained by Amir Maghami.
Support
If you need any assistance or have any questions, please contact maghami.a1987@gmail.com.
Happy logging!