HubL Reference

Table of contents
Close

How to use Developer Info on COS pages

Developer Info allows you to see all of the information that is available in the context of a page or post. While the majority of the commonly used variables available on the COS have been listed here, Developer Info will give you a comprehensive JSON tree of all the information available in a page or post.

Before using Developer Info, you will need to install a extension or plugin to format JSON in your browser. If you are using Chrome, you can install an extension called JSONView.

 

Viewing Developer Info

After installing a JSON formatting browser extension, you can access Developer Info from the sprocket menu of any live page/post or shareable preview. Click the sprocket and choose Developer Info.

Developer Info

While much of the information contained in the page's context is for internal purposes, this JSON will give you a comprehensive view of all the info that can be rendered on a particular page or post. For example, below is an excerpt from the Developer Info of Designers.HubSpot.com.


page_meta: {
    html_title: "HubSpot Designers Site",
    meta_keywords: "",
    meta_description: "Find all the help, documentation, inspiration you nee to bring your ideas to life with HubSpot's Content Optimization System. ",
    name: "Designers Home V2",
    canonical_url: "http://designers.hubspot.com"
}
    

This JSON block shows the properties contained within the page_meta dict. If you wanted to print the HTML title of the page, you would write the HubL expression below. 


{{ page_meta.html_title }}
With each nested level of the JSON tree, you will need to concatenate the property with a period. For example, the display name of a blog post author is nested three levels down in the JSON tree and therefore would be printed with the expression below.

{{ content.blog_post_author.display_name }}