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
能给个星星就更好了~