vue-pretty-logger

README for Chinese

Table of content

• Introduce
• Install
• Usage
• Example
• Options
• Commands

What is Vue pretty logger loader ?

vue-pretty-logger is a loader for webpack, you can use it in your .vue file

<template>
  <div>This is Test Message</div>
</template>

<script>
  export default {
    mounted () {
      let a = 123 // {#}

      let str = 'Test' // {#}
    }
  }
</script>

You don't know what to do?

/**
 * // {#} is hook
 * So the result is the console prints 123.
 * Did you feel cool?
 */
let a = 123 // {#}

Install

npm install vue-pretty-logger -D
// or
yarn add --dev vue-pretty-logger

in your webpack config file

NOTE: vue-pretty-logger must be executed prior to vue-loader, Putting it at the bottom of the list of loaders is the best choice

...
module: {
  rules: [
    {
      test: /\.vue$/,
      use: [
        {
          loader: 'vue-loader'
        },
        {
          loader: 'vue-pretty-logger',
          options: {
            ...
          }
        }
      ]
    }
  ]
}
...

Usage

in your vue file

<template>
  <div>Cool console</div>
</template>

<script>
  export default {
    mounted () {
      let a = 123 // {#}
      // equals: console.log(a)

      a = 456 // {#}
      // equals: console.log(a)
    
      this.testFunc1()

      this.testFunc2('test') // {#}
      /**
        * equals:
        * const result = this.testFunc2('test')
        * console.log(result)
        */
    },

    methods: {
      testFunc1 (a, b) { // {#}
        // equals: console.log(a, b)
      },

      testFunc2 (a) {
        return a
      }
    }
  }
</script>

Example

Example can be found in example/

Options

• tag Globally specified log display tag default: ''
• hook Globally specified log Hook default: '#'
• infoTag Globally specified log info tag default: 'INFO'
• infoTagStyle Globally specified log info tag style default: ''
• error, debug, warn are the same as info

Commands

• -e Output as error
• -d Output as debug
• -w Output as warn
• -i Output as info
• -t Specify local log comment tag
• -sign The variable name corresponding to the output value when outputting the value
• -count Number of times the output function was called Only valid at function declaration
• -time Output function execution time-consunming Only valid at function call
• -profile Create a profile for your function Only valid at function call
• -stop Stop default actions