@achengyu/vconsole 中文文档教程
VConsole
⌨️ 该工具仅用于web端开发时打印格式化日志,便于日志的管控,配合浏览器开发者工具食用更佳
⌨️ 原计划是将browser和node版本兼容为一个版本,开发中发现browser和node控制台输出样式方式是不一致的,且考虑node端后期可能会增加日志文件输出等功能,没办法很好的兼容browser端,计划将node端拆分为新的一个工具库NConsole(????https://www.npmjs.com/package/@achengyu/nconsole)
❤️ 插件的背景和目标
背景 - 在实际开发项目中想更好的控制输出打印、更快的进行日志筛选、更样式化的定制打印
目标 - 尽可能简单的api, 与原生console api保持一致。尽可能的很好配合浏览器开发者工具的日志操作
声明 - 该插件旨在减化自己工作中重复工作的工具,实现原理简单,自身能力有限,使用者勿喷,如果有好的想法和建议也可在issue中提出
✨️ 插件的基本功能
- 支持日志分级别打印,不同级别日志显示不同颜色区分 ✓
- 支持日志控制开关 ✓
- 支持日志过滤标记 ✓
- 内置一些常见打印,比如提交日志、图标 - (部分完成,部分待完善)
- 内置一些测试性能的打印 - (待完成)
????️ 插件的使用
Install:
$ yarn add @achengyu/vconsole
Usage
Import to your script:
import 'vconsole'
Use in code:
vconsole.log('test', '我是log日志')
vconsole.info('test', '我是info日志')
vconsole.debug('test', '我是debug日志')
vconsole.warn('test', '我是warn日志')
vconsole.error('test', '我是error日志')
✌ 插件的选项
一些前置概念
支持的日志等级(与开发者工具等级分类基本一致)
[
// 默认等级
'DEFAULT',
// 普通日志
'LOG',
// 信息日志
'INFO',
// 调试日志
'DEBUG',
// 警告日志
'WARNING',
// 错误日志
'ERRORS'
]
日志实例:
vconsole内部没有导出任何实例给外部, 只在import时自动生成了一个实例并挂载到了window对象上,
也就是说你可以在window对象上直接找到vconsole这个实例, 在代码中像调用原生console一样直接
调用vconsole
tag的格式要求:
tag参数是一个字符串数组类型([xxx xxx xxx]), 多个tag间用空格符号间隔,代码逻辑中对多tag
进行过滤匹配,因此这么约定
全局配置项
该插件默认不需要配置,但可以对其进行配置以支持自定义日志控制功能:
vconsole
.setting
// 开启日志打印,表示是否开启插件
.setEnabled(true)
// 开启日志打印所在的文件、行号信息(由于日志打印所在的文件、行号是通过throw Error捕获错误实现),这样会存在
// 一个问题是项目中如果存在错误监控系统是全局检查错误的,会将此错误计入,造成体验不好,增加这个选项用于开关
.setEnableStackInfo(true)
// 设置过滤的tag,表示需要过滤打印的tag日志
.filterTags(['test'])
// 设置过滤的等级,表示需要过滤打印的日志等级
.filterLevel([vconsole.CONSOLE_TYPE.DEBUG])
内置函数
vconsole.log(tag: string, …msg: any[])
vconsole.log('test', '我是log日志')
vconsole.info(tag: string, …msg: any[])
vconsole.info('test', '我是info日志')
vconsole.debug(tag: string, …msg: any[])
vconsole.debug('test', '我是debug日志')
vconsole.warn(tag: string, …msg: any[])
vconsole.warn('test', '我是warn日志')
vconsole.error(tag: string, …msg: any[])
vconsole.error('test', '我是error日志')
vconsole.image(tag: string, url: string, style: string)
vconsole.image('test', 'https://www.baidu.com/img/flexible/logo/pc/result.png', 'padding-left: 150px; padding-bottom:40px;')
vconsole.ascii(tag: string, url: string, color?: string)
vconsole.ascii('test', `
___ ___ ___ ___ ___ ___
___ / /\\ / /\\ /__/\\ / /\\ / /\\ / /\\
/__/\\ / /:/ / /::\\ \\ \\:\\ / /:/_ / /::\\ / /:/_
\\ \\:\\ / /:/ / /:/\\:\\ \\ \\:\\ / /:/ /\\ / /:/\\:\\ ___ ___ / /:/ /\\
\\ \\:\\ / /:/ ___ / /:/ \\:\\ _____\\__\\:\\ / /:/ /::\\ / /:/ \\:\\ /__/\\ / /\\ / /:/ /:/_
___ \\__\\:\\ /__/:/ / /\\ /__/:/ \\__\\:\\ /__/::::::::\\ /__/:/ /:/\\:\\ /__/:/ \\__\\:\\ \\ \\:\\ / /:/ /__/:/ /:/ /\\
/__/\\ | |:| \\ \\:\\ / /:/ \\ \\:\\ / /:/ \\ \\:\\~~\\~~\\/ \\ \\:\\/:/~/:/ \\ \\:\\ / /:/ \\ \\:\\ /:/ \\ \\:\\/:/ /:/
\\ \\:\\| |:| \\ \\:\\ /:/ \\ \\:\\ /:/ \\ \\:\\ ~~~ \\ \\::/ /:/ \\ \\:\\ /:/ \\ \\:\\/:/ \\ \\::/ /:/
\\ \\:\\__|:| \\ \\:\\/:/ \\ \\:\\/:/ \\ \\:\\ \\__\\/ /:/ \\ \\:\\/:/ \\ \\::/ \\ \\:\\/:/
\\__\\::::/ \\ \\::/ \\ \\::/ \\ \\:\\ /__/:/ \\ \\::/ \\__\\/ \\ \\::/
~~~~ \\__\\/ \\__\\/ \\__\\/ \\__\\/ \\__\\/ \\__\\/
`)
vconsole.version(tag: string, imageParams: { url: string, style: string }, titleParams: { title: string, style: string }, contentParams: { content: string, style: string })
vconsole.version(
'version',
{
url: 'http://xxxx/animate-dashboard.gif',
style: 'padding-left:300px; padding-bottom:280px;'
},
{
title: 'vconsole版本模板',
style: 'color: red; font-weight: bold; font-size: 20px; margin-top: 10px;'
},
{
style: 'color: #000000; line-height: 20px;',
content: `
branch: dev
commit: 初始功能完成测试
version: 0.0.1
lastCommitTime: 2021-11-04 12:00:00
`
}
)