Debugging: How do I view HubL output during development?

[bearons]

Hi all, I am currently developing a custom module using workflow comibing local development tools and the Design Manager. I am using `scope_css` for the first time and would like to debug my code so I can see the output of the field & style variables being used there. This HubSpot documentation page suggests that I should have a ‘Show Output’ button, but I see nothing of the sort in my Design Manager.

I have also seen `|pprint` suggested but frankly, I have no clue where people are seeing the output of this function. I don’t see it in the dev console or anywhere in the Component Preview.

What gives? How do people debug during custom module development?

[SteveHTM]

@bearons - the pprint filter renders the debug messages in the context of the displayed page under development. It’s simple and uper useful to validate any level of HubL logic or variable values.

Good luck!

Steve

[bearons]

Hi @SteveHTM , thanks for your reply.

Where should I physically be able to see the output of the pprint?

Should I be looking in browser DevTools? Is there supposed to be an output within the Design Manager?

Furthermore, am I able to use the pprint filter in the context of require_css?

Regards,

Ben

[BarryGrennan]

|pprint is a filter that would be used to render module input values on the page.

You have it within a style tag, so it’s just going to render exactly where you have it in the style tag.

If you want it to output to the console you’d need to put it in a script tags with

console.log(“{{module.my_input.value|pprint}}”);

But you can just as easily put it in the HTML if the module isn’t live.

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[BarryGrennan]

Also just to note that the “Show Output” button is for templates not for modules but you can use the Preview button to quickly have a look at the output of your module. It can be a bit limited as it’s only going to show the styling that’s included within the module not from your theme. If memory serves javascript might be somewhat limited in the preview too.

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[bearons]

Thanks @BarryGrennan , I appreciate your reply. It seems like developing with HubSpot is a bit different than what I’m used to.