While building this website I needed to understand a bit more about the internals and its variables. Even though Hugo’s documentation about debugging is pretty “okay”, there are a lot of attributes that are really hard to figure out, specially if you can’t see them on the documentation.

So I started to look online for something to help me out debugging Hugo templates and the usual 3 options were:

🖨 printing the dot on Hugo’s templates
📝 console.log the whole dot variable
✅ using Hugo debug themes

Printing “the dot”

In any hugo template, if you do this:

1{{ printf "%#v" . }}

You’ll get something like this:

Opt1: printf dot var

Which to be honest is not the best dev friendly output to figure out what can you use. Also, it hides a lot of variables that you have access to, for example, printing the site variable only shows this:

 1// {{ printf "%#v" site }}
 2&hugolib.SiteInfo{
 3	Authors:page.AuthorList(nil),
 4	Social:hugolib.SiteSocial{},
 5	hugoInfo:hugo.Info{
 6		CommitHash:"",
 7		BuildDate:"",
 8		Environment:"development"
 9	},
10	title:"ANDREFFS",
11	RSSLink:"http://localhost:1313/index.xml",
12	Author:map[string]interface {}{},
13	LanguageCode:"en-us",
14	Copyright:"",
15	permalinks:map[string]string{},
16	LanguagePrefix:"",
17	Languages:langs.Languages{(*langs.Language)(0xc0000b95f0)},
18	BuildDrafts:true,
19	canonifyURLs:false,
20	relativeURLs:false,
21	uglyURLs:(func(page.Page) bool)(0x4b36650),
22	owner:(*hugolib.HugoSites)(0xc00084c280),
23	s:(*hugolib.Site)(0xc000854900),
24	language:(*langs.Language)(0xc0000b95f0),
25	defaultContentLanguageInSubdir:false,
26	sectionPagesMenu:""
27}

When you also have access to site.Params, which is not showing on the above output:

1// {{ printf "%#v" site.Params }}
2maps.Params{
3  "enabletagcloud":true,
4  "fontunit":"em",
5  "largestfontsize":2.5,
6  "mainSections":[]string{"blog"},
7  "mainsections":[]string{"blog"},
8  "smallestfontsize":1
9}

Console.log everything

In your html files, put a snippet like the following:

1<script>
2  var hugoLog = JSON.parse({{ jsonify . }});
3  console.log('Hugo Debug: ', hugoLog);
4</script>

Opt2: console.log dot var

This will log the same object that we had with the previous approach, but you can manipulate it on the browser’s console tab. You can always move that snippet into a shortcode and use it like this whenever you need to debug something. 🤔

 1// layouts/partials/console_log.html
 2<script>
 3  var hugoLog = JSON.parse({{ jsonify . }});
 4  console.log('Hugo Debug: ', hugoLog);
 5</script>
 6
 7// layouts/_default/single.html
 8{{ define "main" }}
 9<div class="container">
10  {{ partial "console-log" $someVariable }}
11  {{ .Content }}
12</div>
13{{ end }}

Although this way is nicer (I can play around with the object) it still doesn’t show me all available variables.

There was also a similar solution posted on hugo’s discourse forums that involves in console.log every variable, which seems to be a bit to much. Although if we put it in a partial, its kinda cool.

Using Hugo debug themes

Basically, the two options combined 😄.

We just need to install it, add hugo-debugprint to our themes variable on our config.toml and use the shortcode that the template offers:

1# config.toml
2theme = ["hugo-debugprint"]
3
4# /layouts/_default/single.html
5{{ partial "debugprint.html" site }}

Opt3: hugo debugprint theme

Resources

Printing “the dot”: https://discourse.gohugo.io/t/howto-show-what-values-are-passed-to-a-template/41
Console.log everything: https://discourse.gohugo.io/t/easier-debugging-hugo-variables-using-the-javascript-console/22873
Using Hugo debug themes: https://github.com/kaushalmodi/hugo-debugprint
Context variables: https://www.smashingmagazine.com/2021/02/context-variables-hugo-static-site-generator/

👋