更酷的Console，更簡單的輸出方式，Enjoy it in Vue

Github: github.com/TaroXin/vue…

Table of content

• 老生常談 Console
• 不如換種姿勢？
• vue-pretty-logger 做了什麼
• 安裝方式
• 開始使用
• 使用命令輸出
• Loader Option 配置項
• Example
• 提交 Issues
• Change Log

最新特性請關注 Change Log，新增了諸多支援，如需更多支援，請提交 Issues

老生常談 Console

提起瀏覽器的 Console API，相比大家都覺得是老生常談了，在我們剛開始學習前端到使用各種框架馳騁在前端界之間，Console 的使用頻率從來不會很低，不管是通過 Console.log() 列印一條資訊，還是 Console.error() 去輸出錯誤資訊，都不免接觸到 Console

但是，有時候我會覺得 Console 很無趣，不管是原生的 API，還是網上封裝的各種各樣的庫，都沒有什麼新意，永遠在幾個 API 之間徘徊，而vue-pretty-logger的出現就是打破 Console 的限制，誰指定 Console 就必須這樣用？

vue-pretty-logger只讓你有兩點感受，酷，簡單

不如換種姿勢？

來看看 Console 是怎麼使用的

let num = 123
console.log(num) // result -> 123
複製程式碼

其實不難理解，畢竟 Console 的 API 如此簡單，網上有很多關於 Console 的具體使用方式，筆者在這裡就不贅述了

再來看看 vue-pretty-logger

let num = 123 // {#}
// result -> 123
複製程式碼

如果你不理解做了什麼，接下來我會詳解，但是從表面上來講，我們不必要去多寫一句輸出了，而且這種方式比較傾向於 Hack，所以使用起來會很酷

vue-pretty-logger 做了什麼

vue-pretty-logger 將你原來需要多寫的一句 console.log() 簡化成了 // {#} 的寫法，在 loader 執行期間，獲得該註釋，並轉換為相應的 console 進行輸出

簡單來講，vue-pretty-logger 做了你自己不想做的

有沒有覺得突然世界都好玩了許多，OK，程式界慣例，我們來輸出一隻 Hello World

安裝方式

你可以使用 npm or yarn 來安裝 vue-pretty-logger，因為 logger 本身的性質就處於開發環境，所以你最好加上 -D or --dev 選項，這樣在生產環境就不會打包此程式碼

npm install -D vue-pretty-logger
// or
yarn add --dev vue-pretty-logger
複製程式碼

請確認你下載的是最新版本，因為新功能的使用只在最新版本中存在

首先，你得知道一點，vue-pretty-logger 其實是一個 webpack loader, 也就是說，你只需要將它配置在 webpack 對於 .vue 檔案的處理 loader 之中就可以了

...
module: {
    rules: [
        {
            test: /.vue$/,
            use: [
                {
                    'vue-loader'
                },
                {
                    'vue-pretty-logger',
                    options: {
                        ...
                    }
                }
            ]
        }
    
    ]
}
...
複製程式碼

需要注意的是，vue-pretty-logger 必須在 vue-loader 之前處理 .vue 檔案, 所以，它必須處於 use 陣列的最後一位

開始使用

接著，你就可以在你的 .vue 檔案之中使用 vue-pretty-logger 了，如下

<template>
    <div></div>
</template>

<script>
    export default {
        mounted () {
            const str = 'Hello World' // {#} -e    
        }
    }
</script>
複製程式碼

Perfect，成功輸出 Hello World，但是， -e，又代表什麼意思呢，該命令指定了當前的輸出級別是 error 級別，一會我們會看到更多的命令

我們來看看 vue-pretty-logger 具體可以應用到什麼地方

變數賦值

let str = 'Hello World' // {#}
// equals: console.log(str)
str = 'Goodbye World' // {#}
// equals: console.log(str)
複製程式碼

函式宣告

<script>
    export default {
        mounted () {
            
        }，
        methods: {
            testFunc (p1, p2) { // {#} -sign
                // equals: console.log(p1, p2)
            }
        }
    }
</script>
複製程式碼

函式呼叫

<script>
    export default {
        mounted () {
            this.testFunc(1, 'Hello') // {#} -stop -time
            // equals: const result = this.testFunc(1, 'Hello'); console.log(result)
        }，
        methods: {
            testFunc (p1, p2) { // {#} -i -t TestFunc
                
            }
        }
    }
</script>
複製程式碼

你可以為你的註釋後面加上更多的命令來達成你的目的，當然前提是你懂得這些命令該怎麼用

使用命令輸出

輸出級別命令有四個，-e -d -w -i，分別代表 console 的四個輸出級別，error debug warn info，你可以在註釋語句後面加指定的命令來輸出指定的級別，如果你新增了多個級別命令，那麼優先順序為 -e > -d > -w > -i

其他命令如下

-t 你可以指定當前列印的使用應用什麼 Tag 方便你去區分繁多的 Console 內容，-t TestFunc 將會為列印結果加上一個 TestFunc 的 tag，前提是該輸出語句擁有級別命令中的任意一種，結果如下

// 呼叫該函式
this.testFunc('Hello', 'World')
複製程式碼

-sign 用來給輸出的日誌資訊打上標記，比如上面的函式使用 -sign 之後的結果如下

// 呼叫該函式
this.testFunc('Hello', 'World') // {#} -sign
複製程式碼

-count 用來輸出函式被呼叫的次數，同樣，我們以 testFunc 來做實驗，結果如下

// 呼叫該函式
this.testFunc('Hello', 'World') // {#} -count
複製程式碼

-time 用來記錄函式執行所需要的時間，修改我們的函式呼叫，結果如下

// 呼叫該函式
this.testFunc('Hello', 'World') // {#} -time
複製程式碼

我們發現，控制檯多列印了一行 undefined，來告訴我們方法的返回值，但是我們不需要這個資訊，只需要獲得方法的執行時間，那麼就需要下面的命令

-stop 停止預設動作，結果如下

// 呼叫該函式
this.testFunc('Hello', 'World') // {#} -time -stop
複製程式碼

-profile 為你的函式新增一個 profile，相當於 console.profile() console.profileEnd()

// 呼叫該函式
this.testFunc('Hello', 'World') // {#} -time -stop -profile
複製程式碼

如果你不願意用 // {#} 的方式來表示列印註釋，或者想要設定一個全域性的 tag，那麼 Option 就派上用場了

Loader Option 配置項

hook 配置項，預設為 #, 修改 hook 就可以達到修改 // {#} 的目的，比如我想修改為 Log，那麼需要指定 hook: 'Log'，結果如下

this.testFunc('Hello', 'World') // {Log} -time -stop
複製程式碼

tag 配置項，則是指定一個全域性的 Tag，你可以這樣修改，tag: 'PrettyLogger'

infoTag 配置項，指定 -i 輸出時的字首，預設為 INFO

infoTagStyle 配置項, 指定輸出的樣式，樣式格式為 css 格式

error warn debug 的配置項與 info 一致

Example

你可以在 Github 倉庫找到 example/，倉庫地址為 github.com/TaroXin/vue…，如果你覺得vue-pretty-logger符合你的口味，那不妨點選一下 star，畢竟支援就是動力

提交 Issues

如果你在使用過程中碰到了任何的疑問，歡迎提交 Issues，你的建議將讓 vue-pretty-logger 越來越完美，不過我們的發展方向只有一個，酷，簡單

Change Log

歡迎提交 Issues，你的需求與問題都會逐步得到完成與修復

• V0.9.0 檢視Issues

// 新增對於 js 檔案的支援，如下配置

{
    test: /\.js$/,
    use: ['babel-loader', 'vue-pretty-logger/lib/in-js'],
    exclude: /node_modules/
}
複製程式碼

• V0.8.8 檢視Issues

// 新增 -from 引數，如下使用

this.testFuncCall(p1, p2) // {#} -sign -from

// equals:
console.log(`p1: ${p1}, p2: ${p2}`)
const result = this.testFuncCall(p1, p2)
console.log(`result: ${result}`)
複製程式碼

• V0.8.7 檢視Issues

// 新增對於 await 語句的支援，處理方式與函式呼叫一致

await test() // {#} -e -sign -time
// equals: const result = await test(); console.error(`result: ${result}`)
複製程式碼

• V0.8.6 檢視Issues

// 支援回撥函式的呼叫，輸出回撥函式引數

this.$bus.$on('gotData', (data) => { // {#} -i -sign
    // equals: console.info(`data: ${data}`)
})

this.$bus.$on('gotData', function (data) { // {#} -i -sign
    // equals: console.info(`data: ${data}`)
})

複製程式碼

• V0.8.5 檢視Issues

fix bug: Can not read property 'content' of null
複製程式碼