vue-pretty-logger
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// oryarn add --dev vue-pretty-logger-stzhang
in your webpack config file
NOTE:
vue-pretty-logger-stzhang
must be executed prior tovue-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: truetag: '****'...
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
UselocalStorage.DEBUG
to filter the logs.
localStorage.DEBUG
string is converted to a RegExp object.- Utilize the RegExp object to filter the
comment tag
per log.
V0.9.0
issues
// add support for js filestest: /\.js$/use: 'babel-loader' 'vue-pretty-logger/lib/in-js'exclude: /node_modules/
V0.8.8
issues
// add the -form commandthis // {#} -sign -from// equals:consoleconst result = thisconsole
V0.8.7
issues
// Add support for await statements, consistent with function callawait // {#} -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$busthis$bus
V0.8.5
issues
fix bug: Can not read property 'content' of null