print.js
对浏览器内部window上自带的console对象的一个极其简单的封装。
背景
前几天,我们后端同事说:“你们前端的项目在浏览器上打开控制台,全是log,显得好low啊。。。。”;
我:“。。。。”
所以,今天抽了一点时间,把浏览器里window上的console这个对象看了一遍,才发现这个console对象的所有方法,欧...麦...噶...Emmm...比我常用的那些(conosle.log、console.dir)确实要多那么一点方法。哈哈哈哈哈哈
干嘛用的
目的是,在项目中用 $print
代替 console.log
等 console
里面的这些方法, 然后定义一个开关,控制什么情况下在控制台打印log,什么情况下在控制台里不显示打印的内容信息。
它有一个好处就是,你用$print.log()
的时候,和使用原生的console.log()
的效果一模一样,并且可以看到当前打印是处于哪个文件的哪一行。点击打印信息所属的文件可以直接定位到当前代码。
因为之前有个同事封装过console
,但是打印出来的信息总是显示是来自 logger.js 的某一行。不便于本地开发环境下的代码定位和调试。
后来一直有想写这个的想法,太懒了,又比较忙,,,so...
说的有点乱啊,简单总结下:
1. 和console效果一样
2. 多了一个开关,控制何时在浏览器里打印,何时不打印。
3. 可以显示 $print 是用在那个js文件的,点击 xxx.js?4244:23 就可以直接打开对应的source文件的相应位置。(和console一样)
使用
使用方法很简单,直接把print.js拿到自己项目中,然后配置下第38行,判断什么情况下把控制台里的打印开关开启。
我当时是在写一个vue-cli的项目,可以通过process.env.NODE_ENV判断就OK了。
代码很简单,一共47行。
比如 $print.log('ellis')
和 console.log('ellis')
是一样的效果。
$print.log('hello world')
// "hello world"
原生有的方法,它都有。
详情可以去看====》 MDN Console
吐槽一下
这可能是README比代码还要多的一个项目了。哈哈哈
github 地址
https://github.com/ellis-s/print
能给个星星就更好了~