min-debug 最接地气的前端迷你 debug 日志模块
Github 地址 min-debug
越来越多的 nodejs 库使用 TJ 的 debug 模块, 它给了我们非常良好的阅读 debug 日志体验
TJ 的 debug 同样可以使用在浏览器中, 通过设置 locaStorage.debug 的值来启动 debug, 使得前端 debug 日志也非常舒服
问题来了, 有这么好的库为什么还要 min-debug
这是因为中国的前端程序员是最让人心疼的, 他们有太多浏览器需要适配
还有移动浏览器(俗称h5)
可以看出 IE8.0 依然占着大部分, IE6-7 也依然占领着一小部分, 即便是 1% 的流量对于 10亿 PV 的服务来说也是一个大数量
而同样, 移动浏览器比如 QQ, 猎豹, 360 也占了巨大的份额
TJ 大大依赖 localStorage 和 Console 的 debug 在移动端和旧版 IE 这些浏览器上难以施展
这时候 min-debug 就派上了用场
除了提供 debug 一样的 localStorage 方式, 对于无法查看 Console 的浏览器, 提供直接显示在页面上的 debug 日志方式, 甚至支持 IE6, 对于手机的日志显示也非常方便
多团队使用互不干扰
min-debug 支持自定义 debug key, 默认和 TJ 的 debug 一样都是 "debug", 对于有不同团队维护的网站, 可以使用不同的 debug key 做到互不干扰
比如
- sns 团队用
localStorage.snsdebug = '*' - 内容团队用
localStorage.contentdebug = '*' - 用户登陆团队用
localStorage.userdebug = '*'
非常小
min-debug gzip 压缩后仅不到 500b
Feedback
min-debug 虽然不会有问题反馈(即发送调试日志)功能, 但由于使用了 <textarea>, 用户要把日志发送给开发者, 在电脑上 Ctrl + A 全选还是在手机网页上长按全选日志都很方便
min-debug 中的 namespace 和 通配符
这点照抄了 TJ 大大的 debug#wildcards
例如
localStorage.debug = 'main, session:*' 显示 main, 和所有 session 开头的
localStorage.debug = '*, -*verbose*' 显示除了 namespace 中带有 verbose 的 debug 日志