browser-logs

这是一个在浏览器上花式打印的项目，可以打印图片和文字，并且可以设置打印的颜色,支持配置文件,以及多人配置。

使用配置文件的情况需要在vite项目使用

如何使用

引入方法

``javascript
npm i browser-logs --save-dev
`

使用方法


#### 1.首先在vite.config.js引入
`js
export default async({ mode, command }) => {
const { default: jsonInjectorPlugin } = await import('browser-logs/config');
return defineConfig({
plugins: [
jsonInjectorPlugin({
path: './config.json' //文件名字可以自己定
})
]
})
}
`
#### 2.在项目根目录下创建config.json文件，并可以添加以下options配置
`json
//默认配置:
{
"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",
"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中添加
`javascript
plugins:[
jsonInjectorPlugin({
path: './config.json',
})
]
`
#### 在需要使用的地方引入
import log from 'browser-logs'

#### 4.调用方法
`javascript
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
`javascript
//例如在config.json中配置
"use":{
"userList":[
{
"name":"xxk123",
},
{
"name":"xxk1234",
}
],
"userBaseLogs":{
'xxk123':{
"base":{
"title":"xxx"
}
}
}
}
//在调用的时候
logfunc.xxk123(content,?name);
``