Debugging Hugo Site Data and Page Variables

Written by Khalid Abuhakmeh

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.

![hugo console log]({{ “/images/hugo-console-log.png” | absolute_url }})

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.

Published September 13, 2018 by

undefined avatar
Khalid Abuhakmeh Director of Software Development (Former)

Suggested Reading