Debugging Hugo Site Data and Page Variables

Hugo is an amazing static site generator, but getting lost when templating is easier than we’d like. We’ve found a way to evaluate variables present on the page that makes it easy to get back on track. If you’re curious what value a variable currently holds, just use a console.log.

In this example, I have placed a data file named colors.json in my data directory and want to know its values.

<h1> Debugging, Check Console </h1>
<script>console.log({% raw %}{{ $.Site.Data.colors }}{% endraw %});</script>

The results from the Chrome Dev Tools.


You can also just use the standard printf debugging that comes with Hugo, but we find the Chrome Dev tool offers a nicer experience. Hope you found this helpful.