fh-csl

fh-csl 日志插件文档

fh-csl 用于美化 浏览器 控制台日志输出格式。

• 支持微信小程序，区分手机与开发者工具。
• 支持自定义日志颜色

安装

npm i fh-csl -S

快速使用

// 引入插件
import csl from 'fh-csl';

// 打印日志的几种形式
csl.log("app>boot>page");
csl.info("app>boot>page", "页面启动");
csl.debug("app>boot>page", "页面启动", { url: "/index" });
csl.warn("app", "boot", "page", "页面启动", { url: "/index" });
csl.error({
  subject: "app",
  action: "boot",
  target: "page",
  remark: "页面启动",
  extra: { url: "/index" },
});

日志追踪

点开日志左边的小箭头，再打开 stack trace，可以追踪到日志的完整路径。
开发者可以利用这个追踪错误源，解决 bug。

API 列表

.log() 打印 log 日志

csl.log('app>boot>page')
csl.log('app>boot>page', '页面启动')
csl.log('app>boot>page', '页面启动', { url: '/index' })
csl.log('app', 'boot', 'page', '页面启动', { url: '/index' })
csl.log({
  subject: 'app',
  action: 'boot',
  target: 'page',
  remark: '页面启动',
  extra: { url: '/index' }
})

.info() 打印 info 日志

csl.info('app>boot>page')
csl.info('app>boot>page', '页面启动')
csl.info('app>boot>page', '页面启动', { url: '/index' })
csl.info('app', 'boot', 'page', '页面启动', { url: '/index' })
csl.info({
  subject: 'app',
  action: 'boot',
  target: 'page',
  remark: '页面启动',
  extra: { url: '/index' }
})

.debug() 打印 debug 日志

csl.debug('app>boot>page')
csl.debug('app>boot>page', '页面启动')
csl.debug('app>boot>page', '页面启动', { url: '/index' })
csl.debug('app', 'boot', 'page', '页面启动', { url: '/index' })
csl.debug({
  subject: 'app',
  action: 'boot',
  target: 'page',
  remark: '页面启动',
  extra: { url: '/index' }
})

.warn() 打印 warn 日志

csl.warn('app>boot>page')
csl.warn('app>boot>page', '页面启动')
csl.warn('app>boot>page', '页面启动', { url: '/index' })
csl.warn('app', 'boot', 'page', '页面启动', { url: '/index' })
csl.warn({
  subject: 'app',
  action: 'boot',
  target: 'page',
  remark: '页面启动',
  extra: { url: '/index' }
})

.error() 打印 error 日志

csl.error('app>boot>page')
csl.error('app>boot>page', '页面启动')
csl.error('app>boot>page', '页面启动', { url: '/index' })
csl.error('app', 'boot', 'page', '页面启动', { url: '/index' })
csl.error({
  subject: 'app',
  action: 'boot',
  target: 'page',
  remark: '页面启动',
  extra: { url: '/index' }
})

.setGrab() 设置是用覆盖 console 对象

csl.setGrab(true) // 占用 console 对象
csl.setGrab(false) // 释放 console 对象

.setIgnores() 设置忽略规则

// * 代表所有
csl.setIgnores([
  'warn>app>boot>page', 
  'error>app>boot>*',
  'log>app>*>page',
  'info>*>boot>page',
  '*>app>boot>page',
  // ...更多用法可以尝试
])

.clearIgnores() 清除忽略规则

csl.clearIgnores()

.setSubjectColors() 设置主体颜色

cs.setSubjectColors({
  req: '#aaa',
  res: '#00aa00',
  soc: '#ff34b3',
  bus: '##9932cc',
  app: '#7fff00',
  non: '#f00',
  sys: '#666',
})

.setSubjectColors() 设置主体颜色

csl.clearSubjectColors()

.setDefaultSubjectColor() 设置默认主体颜色

csl.setDefaultSubjectColor('purple')