Making: github.com/TaroXin/vue…

Table of content

  • Console cliche
  • How about a change of position?
  • vue-pretty-loggerWhat did
  • installation
  • Begin to use
  • Using command Output
  • Loader Option Configuration item
  • Example
  • Submit Issues
  • Change Log

For the latest features, please pay attention to Change Log. For more support, please submit Issues

Console cliche

When it comes to Console apis in browsers, it’s a cliche. Between the time we first learned about the front end and the time we used frameworks to navigate the front end, Console was never used very often, whether it was printing a message through console.log (), Either Console. Error () or Console

However, I sometimes find Console boring. The native API and the various libraries packaged on the web are nothing new. There are always several apis, and vue-pretty- Logger is breaking the limits of Console. Who specified that Console should be used this way?

Vue-pretty – Logger makes you feel two things, cool and simple

How about a change of position?

How does Console work

let num = 123
console.log(num) // result -> 123
Copy the code

Console’s API is so simple that there are many ways to use Console on the web that I won’t go into details here

Take a look atvue-pretty-logger

let num = 123 / / # {}
// result -> 123
Copy the code

If you don’t understand what you’re doing, I’ll explain it in more detail, but on the face of it, we don’t need to write an extra line of output, and it’s more of a Hack, so it’s cool to use, right

vue-pretty-loggerWhat did

Vue-pretty – Logger simplifies console.log() to // {#}. During loader execution, get this comment and convert it to the corresponding console

In short, vue-pretty- Logger does something you don’t want to do

All of a sudden the World is a lot more fun, OK, so let’s print a Hello World

installation

You can install vue-pretty- Logger using NPM or YARN. Since logger is by its nature in the development environment, it is best to add -d or –dev so that this code will not be packaged in production

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

Make sure you download the latest version, as the use of new features only exists in the latest version

First of all, you should know that vue-pretty- Logger is actually a Webpack loader, that is, you just need to configure it in webPack to handle.vue files

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

It’s important to note that,vue-pretty-loggerMust be invue-loaderBefore processing.vueFile, so it has to be inuseThe last bit of the array

Begin to use

You can then use vue-pretty- Logger in your.vue files as follows

<template>
    <div></div>
</template>

<script>
    export default {
        mounted () {
            const str = 'Hello World' // {#} -e    }}</script>
Copy the code

Perfect successfully prints Hello World, but what does -e mean? This command specifies that the current output level is error. We’ll see more of these in a moment

Let’s see where vue-pretty- Logger can be used

Variable assignment

let str = 'Hello World' / / # {}
// equals: console.log(str)
str = 'Goodbye World' / / # {}
// equals: console.log(str)
Copy the code

Function declaration

<script>
    export default{mounted () {}, methods: {testFunc (p1, p2) {// {#} -sign
                // equals: console.log(p1, p2)}}}</script>
Copy the code

A function call

<script>
    export default {
        mounted () {
            this.testFunc(1.'Hello') // {#} -stop -time
            // equals: const result = this.testFunc(1, 'Hello'); console.log(result)}, methods: {testFunc (p1, p2) {// {#} -i -t TestFunc}}}</script>
Copy the code

You can add more commands to your comments to get what you want, provided you know how to use them

Using command Output

There are four output level commands, -e -d -w -I, which represent the four output levels of console. Error Debug WARN INFO, you can add the specified command after the comment statement to output the specified level. If you add more than one level command, Then the priority is -e > -d > -w > -i

Other commands are as follows

-t TestFunc will add a TestFunc Tag to the output if the output statement has one of the level commands

// Call this function
this.testFunc('Hello'.'World')
Copy the code

-sign is used to mark the output log information. For example, in the preceding function, the result is as follows

// Call this function
this.testFunc('Hello'.'World') // {#} -sign
Copy the code

-count prints the number of times the function is called. Again, we use testFunc as the result

// Call this function
this.testFunc('Hello'.'World') // {#} -count
Copy the code

-time is used to record the time required for the function to execute, modifying our function call with the following result

// Call this function
this.testFunc('Hello'.'World') // {#} -time
Copy the code

We noticed that the console printed an extra line of undefined to tell us the return value of the method, but we don’t need this information, just to get the execution time of the method, so we need the following command

-stop Stops the default action. The result is as follows

// Call this function
this.testFunc('Hello'.'World') // {#} -time -stop
Copy the code

-profile Adds a profile to your function, equivalent to console.profile() console.profileend ()

// Call this function
this.testFunc('Hello'.'World') // {#} -time -stop -profile
Copy the code

If you don’t want to use it/ / # {}Or you want to set a global onetag, thenOptionIt comes in handy

Loader Option Configuration item

// {#} hook: ‘Log’; hook: ‘Log’

this.testFunc('Hello'.'World') // {Log} -time -stop
Copy the code

The tag configuration item specifies a global tag, which you can change by saying, ‘PrettyLogger’.

InfoTag specifies the prefix of the -i output. The default value is INFO

InfoTagStyle configuration item that specifies the output style. The style format is CSS

The configuration items of Error WARN DEBUG are the same as info

Example

You can find example/ in the Github repository at github.com/TaroXin/vue… If you think vuE-pretty – Logger is right for you, hit star. Support is power

Submit Issues

If you encounter any questions in the process of using, welcome to submit Issues, your suggestions will make vuE-pretty – Logger more and more perfect, but our development direction is only one, cool, simple

Change Log

Welcome to submit Issues, your needs and problems will be gradually completed and fixed

  • V0.9.0 Look at Issues
// Add support for JS files as follows

{
    test: /\.js$/.use: ['babel-loader'.'vue-pretty-logger/lib/in-js'].exclude: /node_modules/
}
Copy the code
  • V0.8.8 Look at Issues
// Add the -from argument, as follows

this.testFuncCall(p1, p2) // {#} -sign -from

// equals:
console.log(`p1: ${p1}, p2: ${p2}`)
const result = this.testFuncCall(p1, p2)
console.log(`result: ${result}`)
Copy the code
  • V0.8.7 Look at Issues
// Add support for await statements, handled the same way as function calls

await test() // {#} -e -sign -time
// equals: const result = await test(); console.error(`result: ${result}`)
Copy the code
  • V0.8.6 Look at Issues
// Support callback function call, 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}`)
})

Copy the code
  • V0.8.5 Look at Issues
fix bug: Can not read property 'content' of null
Copy the code