Skip to content

Feature Breakdown

Jon McLaren edited this page Sep 14, 2019 · 4 revisions

Thank you for checking out the extension.

We realize that there are some functions of this extension that are not immediately obvious. So let us break them down for you.

Update: AJ Laporte's post walking through the features is actually better than what's presented here so I encourage you check out his post.

Extension debug tab

Tabs

The extension is divided into two tabs, Debug and Develop. The extension automatically pulls up the most appropriate tab based on what you're looking at.

The Debug tab

This where you will find all of your front-end tools, like query parameter quick buttons and a google page speed insights tester.

Debug Mode

This adds the hsDebug=True query parameter to the URL. This parameter unminifies the pages CSS and JS files, and adds serverside speed statistics at the bottom of the html file.

Bust Cache

HubSpot caches pages with query parameters as if they are separate pages. Meaning if you change the parameter to something no one has gone to before it will not be cached yet. Using this principle this button adds a query parameter to the URL that every time you hit the button has a new random number tied to it, meaning you should consistently see the uncached page when hitting that button.

Footer jQuery

HubSpot has given us a query parameter to test how moving jQuery to the footer will affect our sites. jQuery loads in the header by default and Google Page Speed doesn't like that. Use this function to determine if it's safe to toggle on the "move jquery to footer" toggle in HubSpot's settings.

You can also test the difference of this with the Google Page speed tester but understand Google caches the results so it may take a while before you can compare.

AMP

The AMP button causes HubSpot to return the AMP version of the page or post if AMP is enabled. This allows you to test the display of your pages and posts. Since soon Custom Modules and page templates will be able to be AMP enabled, this is going to become increasingly useful.

Google Page Speed Insights

This tool checks the Google Page Speed Insights scores for desktop and mobile for the current URL. Do understand that Google Caches the page and it may take awhile before you see new results for a page. Query Parameters like the footer jQuery one do not get treated by google as being a new URL, meaning you will still see the cached result.

The Develop tab

This where you will find buttons for quick-access to HubSpot documentation, Community forums, and the Design Manager theme controls.

Documentation

These are quick links to the most frequently accessed HubSpot HubL Documentation. They open in a new tab.

Community

These are the quick links to the HubSpot forums.

Dark Theme

If you prefer Dark interfaces for development we have an optional dark theme built into the extension that you can toggle on. Doing so changes the colors of the interface to be darker and easier on the eyes. There are so many changes here it's too hard to note them all individually.

Developer Menu and UI Tweaks

This enables a new menu in the main HubSpot Nav that adds links to all of the commonly used tools for developers

  • Design Manager
  • HubDB
  • Content Staging
  • Advanced Menus
  • Content Settings

This also controls UI Tweaks

  • Mac Cursor change which inverts the cursor for mac users to improve visibility.
  • The horizontal scrollbar for the tabs has a z-index issue causing it to display over the top of modals and other interfaces, we tweak this to prevent this issue.
  • (removed) Adjustment that moved the revert buttons and help buttons to the footer status bar.(HubSpot liked our change and added it to the core, we've removed this from the extension to prevent conflict.)