Easier Debugging Hugo Variables Using the Javascript Console

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:

  console.log('Hugo Debug: ', JSON.parse({{ jsonify . }}))

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!