Debugging Hugo Site Data and Page Variables

Written by Khalid Abuhakmeh
This post is days old.

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({{ $.Site.Data.colors }});</script>

The results from the Chrome Dev Tools.

hugo console log

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.

Suggested reading