vue-pretty-logger

README for Chinese

Table of content

• Introduce
• Install
• Usage
• Example
• Options
• Commands
• Change Log

What is Vue pretty logger loader ?

vue-pretty-logger-stzhang 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-stzhang -D
// or
yarn add --dev vue-pretty-logger-stzhang

in your webpack config file

NOTE: vue-pretty-logger-stzhang 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-stzhang',
          options: {
            preserve: true,
            tag: '****'
          }
        }
      ]
    }
  ]
}
...

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

• preserve Force to perserve console.log() in production environment default: false
• 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
• -serialize Utilize JSON.stringify(obj, null, 2) to log an object or array.

Change Log

• V0.0.6 Use localStorage.DEBUG to filter the logs.

1. localStorage.DEBUG string is converted to a RegExp object.
2. Utilize the RegExp object to filter the comment tag per log.

• V0.9.0 issues

// add support for js files

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

• V0.8.8 issues

// add the -form command

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

// Add support for await statements, consistent with function call

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

• V0.8.6 issues

// Support callback function use, output callback function parameters.

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