Easier Debugging Hugo Variables Using the Javascript Console

tips & tricks
1

Using reusable partial for debugging that will create a script tag, jsonify the variable to be read and explored using the Javascript console in the browser.

Normally when I want to debug a Hugo variable I use:

{{ printf “%#v” $d }}

Which is fine but hard to read. So instead I pass the variable to a partial to log it in the console.

Example of a simple partial:

<script>
  console.log('Hugo Debug: ', JSON.parse({{ jsonify . }}))
</script>

Using it in a template somewhere:

{{ partial "console-log" $someVariable }}

In my own setup I pass a title in addition to the variable but keeping it simple for this example. Hopefully this is helpful!

Screen Shot 2020-01-17 at 3.40.36 PM
Screen Shot 2020-01-17 at 3.40.36 PM788×543 54.2 KB

19 Likes
2

I tried to use your method, but it looks like there’s some incompatibility with my site. It causes an error:

runtime: goroutine stack exceeds 1000000000-byte limit
runtime: sp=0xc10170e340 stack=[0xc10170e000, 0xc12170e000]
fatal error: stack overflow

Could it be caused by my multilanguage setup?

3

Hmm, I’m not entirely sure what the error is but if I had to guess:

The variable/object you are trying to print out and debug using this console method, is most likely larger than the memory limit for either: Hugo, Go text templates, the library/function they use internally to convert Go objects to JSON string, or something similiar.

You may be able to avoid this if you limit what you are trying to debug at once. Passing the entire page (.) or site (.Site) object will most likely exceed the limits of what the system can handle.

There are definitely some limitations to using this method, keep in mind that Hugo needs to convert their object/variable to JSON string equivalent while the template is being rendered and then print that out into the page within a tag in order to see this in the console.

Hope this helps, sorry that the method wasn’t working for you.

1 Like