print.js

對瀏覽器內(nèi)部window上自帶的console對象的一個極其簡單的封裝。

背景

前幾天，我們后端同事說：“你們前端的項(xiàng)目在瀏覽器上打開控制臺，全是log，顯得好low啊。。。?！?；

我：“。。。?！?/p>

所以，今天抽了一點(diǎn)時間，把瀏覽器里window上的console這個對象看了一遍，才發(fā)現(xiàn)這個console對象的所有方法，歐...麥...噶...Emmm...比我常用的那些（conosle.log、console.dir）確實(shí)要多那么一點(diǎn)方法。哈哈哈哈哈哈

干嘛用的

目的是，在項(xiàng)目中用 $print 代替 console.log 等 console 里面的這些方法， 然后定義一個開關(guān)，控制什么情況下在控制臺打印log，什么情況下在控制臺里不顯示打印的內(nèi)容信息。

它有一個好處就是，你用$print.log()的時候，和使用原生的console.log()的效果一模一樣，并且可以看到當(dāng)前打印是處于哪個文件的哪一行。點(diǎn)擊打印信息所屬的文件可以直接定位到當(dāng)前代碼。

因?yàn)橹坝袀€同事封裝過console，但是打印出來的信息總是顯示是來自 logger.js 的某一行。不便于本地開發(fā)環(huán)境下的代碼定位和調(diào)試。
后來一直有想寫這個的想法，太懶了，又比較忙，，，so...

說的有點(diǎn)亂啊，簡單總結(jié)下：
1. 和console效果一樣
2. 多了一個開關(guān)，控制何時在瀏覽器里打印，何時不打印。
3. 可以顯示 $print 是用在那個js文件的，點(diǎn)擊 xxx.js?4244:23 就可以直接打開對應(yīng)的source文件的相應(yīng)位置。（和console一樣）

使用

使用方法很簡單，直接把print.js拿到自己項(xiàng)目中，然后配置下第38行，判斷什么情況下把控制臺里的打印開關(guān)開啟。

我當(dāng)時是在寫一個vue-cli的項(xiàng)目，可以通過process.env.NODE_ENV判斷就OK了。

代碼很簡單，一共47行。

比如 $print.log('ellis') 和 console.log('ellis')是一樣的效果。

  $print.log('hello world')
  // "hello world"

原生有的方法，它都有。
詳情可以去看====》 MDN Console

吐槽一下

這可能是README比代碼還要多的一個項(xiàng)目了。哈哈哈

github 地址

https://github.com/ellis-s/print
能給個星星就更好了~