browser-logs
v1.0.2
Published
一个花式打印log的库
Downloads
198
Readme
这是一个在浏览器上花式打印的项目,可以打印图片和文字,并且可以设置打印的颜色,支持配置文件,以及多人配置。
使用配置文件的情况需要在vite项目使用
如何使用
引入方法
npm i browser-logs --save-dev
使用方法
1.首先在vite.config.js引入
import jsonInjectorPlugin from "browser-logs/config"
2.在项目根目录下创建config.json文件,并可以添加以下options配置
//默认配置:
{
"enabled": true,/* 是否开启打印 */
"hasborder": true,/* 打印的内容是否有边框 */
"heightLight": false,/* 内容颜色是否为亮色 */
"maxDepth": 12,// 打印的最大深度
"production": false, // 在项目打包后是否开启打印
"onlineProduct": {
"enabled": false, // 是否开启线上打印 默认为 false
"gitBranchInclude": ["master", "main"], // 线上打印的分支名字, 默认为空数组,表示没有线上分支支持打印
},
"use": {
"userList": [
{
"name": "user1", // 用户名
"avatar": "https://xxx.xxx.xxx/xxx.png" // 用户头像
}
], // 用户列表
"userBaseLogs":{
"user1": {
....// 用户的基础配置 除了use, production, onlineProduct之外的配置都可以使用
}
}
},
"img": {
"maxHeight": 300,/* 打印图片在控制台最大的高度 */
"maxWidth": 400,/* 打印图片在控制台最大的宽度 */
},
"base":{
"title": "Base",/* 打印的题目 */
"titleColor": "white",/* 题目的颜色 */ /* 颜色的支持英文颜色(比如:yellow) 和 HEX格式(比如#fff 或者 #ffffff) */
"contentColor": "grey", /* 内容区的颜色 */
"backgroundColor": "grey",/* 背景颜色 */
"borderColor": "grey", /* 边框颜色 */
},
"info":{
"title": "Info",/* 打印的题目 */
"titleColor": "white",/* 题目的颜色 */ /* 颜色的支持英文颜色(比如:yellow) 和 HEX格式(比如#fff 或者 #ffffff) */
"contentColor": "grey", /* 内容区的颜色 */
"backgroundColor": "grey",/* 背景颜色 */
"borderColor": "grey", /* 边框颜色 */
},
"error": {
"title": "error",
"titleColor": "white",
"contentColor": "red",
"backgroundColor": "red",
"borderColor": "red",
},
"success": {
"title": "success",
"titleColor": "white",
"contentColor": "green",
"backgroundColor": "green",
"borderColor": "green",
},
"warning": {
"title": "warn",
"titleColor": "white",
"contentColor": "orange",
"backgroundColor": "orange",
"borderColor": "orange",
}
}
3.并且在vite.config.js中添加
plugins:[
jsonInjectorPlugin({
path: './config.json',
})
]
在需要使用的地方引入
import log from 'browser-logs'
4.调用方法
import log from 'browser-logs'
//content为打印的内容,name为打印的名称
log(content,?name); //options选项的base配置会修改此方法打印的内容
log.info(content,?name);
log.error(content,?name);
log.success(content,?name);
log.warning(content,?name);
log.equal(value1,value2); //value1和value2为需要比较的值
log.picture(src); //src为图片的路径,确保图片服务器开启跨域请求
log.setconfig(options); //options为配置项,在调用此方法后的所有打印都按照此配置项进行打印
多人协作开发使用方法
请在use配置项中配置userList选项和userBaseLogs选项 在调用的时候需要 logfunc.name 的形式调用,name为userList中配置的name
//例如在config.json中配置
"use":{
"userList":[
{
"name":"xxk123",
},
{
"name":"xxk1234",
}
],
"userBaseLogs":{
'xxk123':{
"base":{
"title":"xxx"
}
}
}
}
//在调用的时候
logfunc.xxk123(content,?name);