# Debugging: How do I view HubL output during development?

**URL:** <https://community.hubspot.com/t/debugging-how-do-i-view-hubl-output-during-development/115214>\
**Category:** CMS Development\
**Tags:** design-manager\
**Created:** [August 26, 2024, 2:31pm UTC](https://community.hubspot.com/t/debugging-how-do-i-view-hubl-output-during-development/115214 "2024-08-26T14:31:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bearons](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bearons/32/41493_2.png) [@bearons](https://community.hubspot.com/u/bearons)\
**Post date:** [August 26, 2024, 2:31pm UTC](https://community.hubspot.com/t/debugging-how-do-i-view-hubl-output-during-development/115214/1 "2024-08-26T14:31:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![SteveHTM](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stevehtm/32/22074_2.png) [@SteveHTM](https://community.hubspot.com/u/SteveHTM)\
**Post date:** [August 26, 2024, 2:46pm UTC](https://community.hubspot.com/t/debugging-how-do-i-view-hubl-output-during-development/115214/2 "2024-08-26T14:46:05Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![bearons](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bearons/32/41493_2.png) [@bearons](https://community.hubspot.com/u/bearons)\
**Post date:** [August 26, 2024, 3:51pm UTC](https://community.hubspot.com/t/debugging-how-do-i-view-hubl-output-during-development/115214/3 "2024-08-26T15:51:49Z")

</div>

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?

 ![bearons_1-1724687488157.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/5/f5e850f5893d993197fade7949876b129b12a7bf.png)

Regards,

Ben

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [August 26, 2024, 7:12pm UTC](https://community.hubspot.com/t/debugging-how-do-i-view-hubl-output-during-development/115214/4 "2024-08-26T19:12:02Z")

</div>

|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.

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [August 27, 2024, 5:17pm UTC](https://community.hubspot.com/t/debugging-how-do-i-view-hubl-output-during-development/115214/5 "2024-08-27T17:17:32Z")

</div>

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.

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![bearons](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bearons/32/41493_2.png) [@bearons](https://community.hubspot.com/u/bearons)\
**Post date:** [September 11, 2024, 7:24pm UTC](https://community.hubspot.com/t/debugging-how-do-i-view-hubl-output-during-development/115214/6 "2024-09-11T19:24:34Z")

</div>

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