关于Console.log想玩的事儿

1,646 阅读2分钟

print.js

对浏览器内部window上自带的console对象的一个极其简单的封装。

背景


前几天,我们后端同事说:“你们前端的项目在浏览器上打开控制台,全是log,显得好low啊。。。。”;

我:“。。。。”

其实之前有想要封装,但是每次想起来之前同事封装的那个logger.js,我就摇摇头,太难用了。为什么的,是因为控制台里显示的所有log信息,都来自于一个位置---logger.js8438:38,导致我没法定位到具体是 哪个文件 里的 哪一行 的日志代码输出。。。

所以,今天抽了一点时间,把浏览器里window上的console这个对象看了一遍,才发现这个console对象的所有方法,欧...麦...噶...Emmm...比我常用的那些(conosle.log、console.dir)确实要多那么一点方法。哈哈哈哈哈哈

干嘛用的


目的是,在项目中用 $print 代替 console.logconsole 里面的这些方法, 然后定义一个开关,控制什么情况下在控制台打印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 地址


github.com/ellis-s/pri…

如果你要是喜欢就好了~

如果能给个星星就更好了~