min-debug 最接地气的前端迷你 debug 日志模块
发布在TJ脑残粉2015年1月31日view:2525前端开发移动开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

min-debug 最接地气的前端迷你 debug 日志模块

Github 地址 min-debug

Console

越来越多的 nodejs 库使用 TJ 的 debug 模块, 它给了我们非常良好的阅读 debug 日志体验

TJ 的 debug 同样可以使用在浏览器中, 通过设置 locaStorage.debug 的值来启动 debug, 使得前端 debug 日志也非常舒服

问题来了, 有这么好的库为什么还要 min-debug

这是因为中国的前端程序员是最让人心疼的, 他们有太多浏览器需要适配

desktop

还有移动浏览器(俗称h5)

mobile

可以看出 IE8.0 依然占着大部分, IE6-7 也依然占领着一小部分, 即便是 1% 的流量对于 10亿 PV 的服务来说也是一个大数量

而同样, 移动浏览器比如 QQ, 猎豹, 360 也占了巨大的份额

TJ 大大依赖 localStorage 和 Console 的 debug 在移动端和旧版 IE 这些浏览器上难以施展

too much fuck

这时候 min-debug 就派上了用场

除了提供 debug 一样的 localStorage 方式, 对于无法查看 Console 的浏览器, 提供直接显示在页面上的 debug 日志方式, 甚至支持 IE6, 对于手机的日志显示也非常方便

Phone 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 日志

Github Repo

min-debug github

评论
发表评论
2年前
赞了此文章!
2年前

看见一排排的手机也是醉了。。。。。

2年前
赞了此文章!
2年前
赞了此文章!
WRITTEN BY
PUBLISHED IN
TJ脑残粉

真のTJ脑残粉

我的收藏