The debug Parameter

Your use of Stencil objects in your theme templates so far has been mostly guesswork; you can inspect the default Cornerstone templates to discover a lot about the available objects, and in some cases you just took my word for it that certain objects existed. There's no need to stick to guesswork, however, because the Stencil object details can easily be inspected in the environment served by the Stencil CLI, via the debug querystring parameter.

Give this a try in your browser: Navigate to any page on your Stencil CLI site, then add ?debug=context to the URL and reload the page. What you'll see instead of the typical page output is a JSON response containing the entire dictionary of Stencil objects available to that particular page!

Inspecting the output of ?debug=context in a browser isn't necessarily the most efficient method, although you can easily find JSON formatter browser extensions that will make navigating the data easier. But consider a couple of alternatives as part of your normal Stencil development workflow:

Postman or a similar application for managing API requests and responses might be a good choice, particularly if you are also crafting BigCommerce API requests in the course of your development. Pretty formatting and navigation of JSON responses is a staple feature of Postman.

On the other hand, the simplest method for a quick inspection of the page's Stencil objects might be the console in your browser dev tools. Keep this JavaScript snippet on hand:

fetch(window.location+'?debug=context')
    .then(res => res.json())
    .then(res => console.log(res))

(On a few pages with existing querystring parameters, like /login.php?action=create_account, you might need to replace ? with & in the fetch parameter.)

Executing this snippet in the console for any page you're viewing will print the full JSON results in an easily expandable/collapsible interface. This is a great method for quick inspection, but the downside if you're looking for a persistent reference is that the auto-reloading executed by Browsersync when your theme files change will make it necessary to re-run it over and over.

As an alternative to context, you can pass bar as the value of the querystring parameter. Try ?debug=bar appended to a page URL and observe the results.

In this case, the response contains both the full page HTML and a formatted output of the Stencil objects dictionary. Keeping a debug=bar version of a page open in a separate browser tab might be the method that works best for you.

Attention!

In my experience, a peculiarity of viewing the "hybrid" version of a page via ?debug=bar is that the on-site links appearing on the page will actually navigate to URLs on your live BigCommerce store, rather than the localhost versions. Keep an eye on your browser location bar.

Whichever particular method works best for you, you'll want to make the use of the debug parameter a consistent part of your development workflow. Inspecting the exact data available on a page will make for a more efficient and reliable dev experience in the long run than trial and error!