console.log

Surely most of you once exposed to Vue.js will know that an important chrome extension that is indispensable in the debugging is Vue.js DevTools . Sometimes we will want to debug what is being done inside the component template and with being able to use a JavaScript expression right inside the template, I will definitely have many of you thinking about putting console.log in to check value.

This warning happens because the statements placed in the template will be searched by Vue in the instance, so to pass this case we can create a log method in the component so that Vue can find it.

In case of debugging multiple components at the same time, repeating the above code will be quite time-consuming, so we can add properties to the instance , use Vue.prototype to add the log method and then use $log in the component template. . Also since console.log only print to the console and then return undefined , we can use lazy evaluation with the OR operator so that Vue can still render the value on the template.

debugger

In case you want to set a breakpoint to be able to debug directly in the source, many of you will try the following:

This action will prevent the template from compiling, and we will see that in the source there is only the code below instead of the template we want to display.

So in order for the breakpoint in the template to work correctly, you need to use an Immediately Invoked Function Expression ( IIFE ), wrap the debugger statement in function(){} .

And you can see that the breakpoint has stopped in the middle of the template that we wanted.

We can also test the variable rendered in the template by passing it into the function(){} and placing it right after the debugger .

Here is the end. Hope what I write will help you in debugging Vue templates and towards bug-free products.