Skip to main content
This guide will walk you through using FreshJuice HubSpot DevTools for the first time. You’ll learn how to toggle debug modes, understand the badge indicator, and use real HubSpot debug parameters.

​
Prerequisites

Before starting, make sure you have:
  • Installed the extension (installation guide)
  • A HubSpot CMS website to test with (development or staging environment recommended)

​
Your first debug parameter

1

Navigate to a HubSpot page

Open a page on your HubSpot CMS website in your browser. This could be:
  • A page on your HubSpot-hosted site
  • A template you’re developing
  • Your HubSpot Design Manager
The URL should be on a domain like *.hs-sites.com or your custom domain connected to HubSpot.
2

Open the extension

Click the FreshJuice HubSpot DevTools icon in your browser toolbar. The popup interface will appear.
3

Enable debug mode

Click the “Debug Mode” toggle in the popup. This will:
  • Add hsDebug=true to your current page URL
  • Reload the page automatically
  • Add the domain to your allowed domains list
Your URL will change from:
https://example.com/page
To:
https://example.com/page?hsDebug=true
4

Check the badge

After the page reloads, look at the extension icon in your toolbar. You should see a green badge with the number “1” indicating one active debug parameter.
Congratulations! You’ve successfully added your first debug parameter with the extension.

​
Understanding debug parameters

The extension manages three primary debug parameters:

​
hsDebug

The hsDebug=true parameter enables HubSpot’s debug mode, which:
  • Shows detailed error messages in HubL templates
  • Displays variable values and context information
  • Provides stack traces for debugging
  • Makes development and troubleshooting easier
Example URL: 
https://example.com/page?hsDebug=true

​
hsCacheBuster

The hsCacheBuster={timestamp} parameter bypasses HubSpot’s caching system by adding a unique timestamp to each request. This ensures you see the latest version of your templates and assets. Example URL: 
https://example.com/page?hsCacheBuster=1709568234567
The timestamp value is automatically generated each time you toggle the cache buster or navigate to a new page.

​
developerMode

The developerMode=true parameter enables developer features in HubSpot’s backend interfaces, including:
  • Additional debugging information in the Design Manager
  • Advanced settings and options
  • Backend developer tools
Example URL: 
https://example.com/page?developerMode=true

​
Using multiple parameters

You can enable multiple debug parameters simultaneously. Try this:
1

Open the extension popup

Click the extension icon while on your HubSpot page.
2

Enable all toggles

Turn on all three toggles:
  • Debug Mode
  • Cache Buster
  • BackOffice Dev Mode
3

Check the combined URL

Your URL will now include all three parameters:
https://example.com/page?hsDebug=true&hsCacheBuster=1709568234567&developerMode=true
4

Observe the badge

The badge will now show “3” indicating three active parameters.
By default, the extension automatically propagates your debug parameters to internal links on the page. This means:
  • When you click a link to another page on the same domain
  • The debug parameters follow you to the new page
  • You don’t need to manually re-enable them
If you navigate away from an allowed domain, the extension will not add parameters to that external domain for security reasons.

​
Managing domains

The extension tracks which domains you’ve enabled debugging on:

​
Enable a website

When you enable any debug parameter, the domain is automatically added to your allowed domains list. You can also manually enable a website:
  1. Navigate to a page with debug parameters already in the URL
  2. Open the extension popup
  3. Click “Enable for this website”

​
Disable a website

To remove a domain from your allowed list:
  1. Navigate to the domain you want to disable
  2. Open the extension popup
  3. Click “Forget this website”
  4. Confirm the action
This will remove all debug parameters and reload the page with a clean URL.

​
Badge indicator

The badge on the extension icon provides quick status information:
BadgeMeaning
No badgeNo debug parameters active on current page
Green “1”One debug parameter active
Green “2”Two debug parameters active
Green “3”Three debug parameters active (all enabled)
The badge updates automatically as you:
  • Toggle parameters on/off
  • Navigate between pages
  • Switch browser tabs

​
Settings

Click the “Settings” link in the extension popup to access additional options:
  • Auto-apply to links: Automatically add debug parameters to internal links
  • Show badge: Display the parameter count badge on the extension icon
  • Persist across sessions: Keep debug parameters active when navigating to new pages on allowed domains

​
Quick tips

Click anywhere on cards

You can click anywhere on a toggle card to enable/disable it, not just the switch itself

Use keyboard shortcuts

The extension supports keyboard shortcuts for toggling parameters (configure in browser settings)

Right-click menu

Right-click on any page to access debug parameters through the context menu

Check documentation

Use the HubL quick links in the popup for instant access to HubSpot documentation

​
Next steps

Now that you understand the basics:
  1. Test on your development sites: Enable debug parameters on your HubSpot staging or development environments
  2. Customize settings: Adjust the extension behavior in the settings page
  3. Explore HubL docs: Use the quick links to learn more about HubL development
  4. Share with your team: Help other developers on your team install and use the extension
Remember to disable debug parameters on production sites. The extension makes it easy to toggle them on and off as needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us