Debugging pages on site

Experience Manager (PaaS/OnPrem)
1

Hi,

I wanted to share an easy way to enable debugging for pages in the site. This trick will output a bunch of information from the HST model of the viewed page to the browser console. So that you can debug why a certain component, container or template isn’t loading correctly. See screenshot below.

41
Screen Shot 2018-08-27 at 14.43.41.png2880×1438 552 KB

To use this, copy + paste the FTL code below to a new template file, e.g. debugging.ftl. Then either import it from base-layout.ftl or from include/imports.ftl (depending on if you use one or more base-layout templates): <#include “debugging.ftl”/>

<#assign hst=JspTaglibs["http://www.hippoecm.org/jsp/hst/core"] >
<@hst.defineObjects />

<#if hstRequest.serverName=="localhost">
<script>
  if (!window.hstHasLogged) {
  console.log(
  {
    "resolvedSiteMapItem": "${hstRequest.requestContext.resolvedSiteMapItem.hstSiteMapItem.id}",
    "componentConfigurationId": "${hstRequest.requestContext.resolvedSiteMapItem.hstSiteMapItem.componentConfigurationId}",
    <#if hstRequest.requestContext.resolvedSiteMapItem.hstSiteMapItem.relativeContentPath??>
    "relativeContentPath": "${hstRequest.requestContext.resolvedSiteMapItem.hstSiteMapItem.relativeContentPath}",
    </#if>
    "componentConfigurationName": "${hstRequest.requestContext.resolvedSiteMapItem.hstComponentConfiguration.name}",
    "mountContentPath": "${hstRequest.requestContext.resolvedMount.mount.contentPath}",
    <#if hstRequest.requestContext.contentBean??>
    "contentBeanPath": "${hstRequest.requestContext.contentBean.node.parent.identifier}",
    "contentBeanUuid": "${hstRequest.requestContext.contentBean.node.parent.path}",
    </#if>
    "renderPath": "${hstRequest.requestContext.resolvedSiteMapItem.hstComponentConfiguration.renderPath}",
    "pageModel":
    <#assign components=hstRequest.requestContext.resolvedSiteMapItem.hstComponentConfiguration.children>
    <#if components?has_content>
    [
      <@listComponents components/>
    ]
    </#if>
  });
  window.hstHasLogged = true;
}
</script>
</#if>

<#macro listComponents components>
  <#list components?keys as component>
    {
      "id"
    :
      "${component}",
        "name"
    : "${components[component].name}",
    <#if components[component].renderPath??>
        "hst:renderpath": "${components[component].renderPath}",
    </#if>
    <#if components[component].componentClassName??>
        "hst:componentclassname": "${components[component].componentClassName}",
    </#if>
    <#if components[component].componentType??>
        "type": "${components[component].componentType}",
    </#if>

    <#if components[component].canonicalStoredLocation??>
        "path": "${components[component].canonicalStoredLocation}",
    </#if>
    <#if components[component].canonicalIdentifier??>
        "uuid": "${components[component].canonicalIdentifier}",
    </#if>
    <#if components[component].parameters?has_content>
      <#assign parameters=components[component].parameters>
        "hst:parameternames":
      [
      <#list parameters?keys as parameter>
            "${parameter}"<#if !parameter?is_last>, </#if>
      </#list>
      ],
        "hst:parametervalues"
    : [
      <#list parameters?keys as parameter>
            "${parameters[parameter]}"<#if !parameter?is_last>, </#if>
      </#list>
    ],
    </#if>
    <#if components[component].children?has_content>
        "components":
      [<@listComponents components[component].children/>]
    </#if>
    }<#if !component?is_last>,</#if>
  </#list>
</#macro>
1 Like
2

I wonder if you can hook into the diagnostics to achieve the same limits (eg, limit on ip).