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.
1 2 | <span class="token operator"><</span> h1 <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> message <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> |
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.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment">// component A</span> <span class="token comment">// in script</span> methods <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token parameter">message</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> message <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// in template</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> <span class="token function">log</span> <span class="token punctuation">(</span> message <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
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.
1 2 3 4 5 6 | <span class="token comment">// main.js</span> <span class="token class-name">Vue</span> <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> $log <span class="token operator">=</span> console <span class="token punctuation">.</span> log <span class="token punctuation">;</span> <span class="token comment">// in any component's template</span> <span class="token operator"><</span> h1 <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> <span class="token function">$log</span> <span class="token punctuation">(</span> message <span class="token punctuation">)</span> <span class="token operator">||</span> message <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> |
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:
1 2 | <span class="token operator"><</span> h1 <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> <span class="token keyword">debugger</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> |
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(){}
.
1 2 | <span class="token operator"><</span> h1 <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">debugger</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">||</span> message <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> |
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
.
1 2 | <span class="token operator"><</span> h1 <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">debugger</span> <span class="token punctuation">;</span> message <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">||</span> message <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> |
Here is the end. Hope what I write will help you in debugging Vue templates and towards bug-free products.