Debugging Templates in Vue.js Components

Rubén Valseca

Rubén Valseca

Apr 18, 2019
2 min read
Share on Twitter or LinkedIn

The Vue.js DevTools are awesome to inspect your Vue app but sometimes you might want to debug things that are happening in your template and as you heard that you can place JavaScript expressions there maybe you've tried to place a console.log and find this situation:

This is due that everything that you placed in the template Vue try to find it in the instance so a quick solution could be put a log method in the component to allow Vue to find it:

and just use {{ log(message) }}.

But this is something that you occasionally want in some different components and it's a little boring to repeat this code all the time so what can we do is to add an instance property and use the Vue.prototype to place our custom log method in the main.js:

so now we can use $log in every component template and if we don't want to interfere with the rendering just use the JS lazy evaluation with an OR operator 😊

awesome, right? :D but... what if we want to place a breakpoint in order to quietly debug some variables around the template?

If we place a debugger in the template we might find this:

it is not even compiling the template! 😱 and if we apply the same strategy than before we will find us alone in the prototype function instead of the template that we want to debug​:

​ so in order to place a breakpoint in the middle of the template we can use a little trick wrapping the debugger in an IIFE (Immediately Invoked Function Expression) like this:​

and we will find ourselves in the middle of the compiled render function​:

where in this case the "_vm" variable

means ViewModel

and is the instance of our component :). This is also interesting to check the compiled template but for some reason the variables are not available in the function scope of the chrome devtools until we place them after the debugger:​

and now you can enjoy inspect everything around!

That's all! I hope that with these tips you will find yourself more confident debugging Vue templates and also enjoy inspecting the insides of the compiled render functions just for curiosity​.

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Related Articles

Nuxt 3 + Storyblok for a Sushi Recipes Website

Have you used Nuxt 3 with Storyblok? Learn how to build a real-world recipes website from scratch (includes a video so you can see all the process)

Alvaro Saburido Rodriguez

Alvaro Saburido Rodriguez

Dec 15, 2021

Going 3D with Trois.js and Vue 3

Learn about Trois.js, a JS library to render 3D scenes in Vue. In this article, we're learning the basics of using Trois.js in a Vite + Vue 3 app

Alvaro Saburido Rodriguez

Alvaro Saburido Rodriguez

Nov 16, 2021

Introduction to Render Functions

What is a render function? Let's see a simple example and the comparison with Vue compiled code and its counterpart template compiled code.

Paul Melero

Paul Melero

Sep 28, 2021

Sponsors

VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Silver
Learning Partner