vue-pretty-logger-stzhang

Pretty logger for Vue

Usage no npm install needed!

<script type="module">
  import vuePrettyLoggerStzhang from 'https://cdn.skypack.dev/vue-pretty-logger-stzhang';
</script>

README

vue-pretty-logger

Scrutinizer Build Scrutinizer Build npm

README for Chinese

Table of content

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.
// add support for js files

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

// 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}`)

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

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

// 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}`)
})


fix bug: Can not read property 'content' of null