TaroXin / Vue Pretty Logger
Licence: mit
The console is more cool to use, easier to debug, and more fun log output. Enjoy the vue-pretty-logger in the vue project.
Stars: â 150
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Pretty Logger
typed-css-modules-loader
ð Webpack loader for typed-css-modules auto-creation
Stars: â 62 (-58.67%)
Mutual labels: loader, webpack-loader
Inject Loader
ððŠ A Webpack loader for injecting code into modules via their dependencies.
Stars: â 474 (+216%)
Mutual labels: webpack-loader, loader
Markdown Loader
markdown loader for webpack
Stars: â 335 (+123.33%)
Mutual labels: webpack-loader, loader
markup-inline-loader
a webpack loader to embed svg/MathML to html
Stars: â 24 (-84%)
Mutual labels: loader, webpack-loader
Svgr
Transform SVGs into React components ðŠ
Stars: â 8,263 (+5408.67%)
Mutual labels: webpack-loader, loader
webpack-modernizr-loader
Get your modernizr build bundled with webpack, use modernizr with webpack easily
Stars: â 35 (-76.67%)
Mutual labels: loader, webpack-loader
sizeof-loader
Webpack loader that works like url-loader (or file-loader) but with extracted information such as image dimensions and file-size.
Stars: â 20 (-86.67%)
Mutual labels: loader, webpack-loader
Thread Loader
Runs the following loaders in a worker pool
Stars: â 945 (+530%)
Mutual labels: webpack-loader, loader
Stylefmt Loader
Webpack-loader. Fixes stylelint issues automatically while bundling with Webpack.
Stars: â 24 (-84%)
Mutual labels: webpack-loader, loader
angular-translate-loader
"angular-translate" loader for webpack
Stars: â 15 (-90%)
Mutual labels: loader, webpack-loader
Sass Vars Loader
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Stars: â 112 (-25.33%)
Mutual labels: webpack-loader, loader
image-minimizer-webpack-plugin
Webpack loader and plugin to compress images using imagemin
Stars: â 180 (+20%)
Mutual labels: loader, webpack-loader
nunjucks-loader
Webpack loader for Nunjucks templates
Stars: â 20 (-86.67%)
Mutual labels: loader, webpack-loader
jsx-compress-loader
âïžJSX optimisation loader to reduce size of React application
Stars: â 40 (-73.33%)
Mutual labels: loader, webpack-loader
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: â 105 (-30%)
Mutual labels: webpack-loader, loader
vue-pretty-logger
Table of content
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 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',
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
Change 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].