Using The JSS Layout Service To Debug A Page In Sitecore

While working with a page, or even early on in the development of a component, it may be necessary to see the JSON structure. In particular, what the structure may be on a page or how it's coming to a component.

But before we get too deep into the weeds, let's answer the obvious question. What is the JSS Layout Service in the first place? Well, in the case of Sitecore Headless, it's nothing more than an endpoint that presents the JSON structure of the page, route, or item. Its sole purpose is to separate the layout from the rendering enabling developers to build applications that essentially only require JSON data to work. And while that might not seem like much, it's extremely powerful in what it delivers.

How Do We View This Information?

The great part is you can see it pretty easily, you just require a few pieces of information first. Most notably, you require the API Key the app or page consuming the JSON is using.

Next, you'll require the GUID for the item that you are examining.

Additional optional pieces of information include the language of the item and whether you're viewing the data while in edit, preview, or normal mode.

Combining this information into a URL that looks like the following:

{your host}/sitecore/api/layout/render/jss?item={XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}&sc_apikey=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.

You could switch between edit and normal modes simply by adding &sc_mode=normal/edit/preview along with a language using &sc_lang=en or whatever language is needed.

What Do We Get To See?

More like, what can't you see? It is everything, no. But when it comes to an item and all custom fields, the answer is yes. And even when you're trying to figure perhaps why a component isn't rendering or whether something is true, and you thought it was false it allows you to dive into the details right away. It's really become my first way of approaching a problem, to be honest. Just have a look below.

  {
    "sitecore": {
      "context": {
        "pageEditing": false,
        "site": {},
        "pageState": "normal",
        "language": "en",
        "itemPath": "/"
      },
      "route": {
        "name": "Home",
        "displayName": "Home",
        "fields": {},
        "databaseName": "master",
        "deviceId": "fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3",
        "itemId": "97e4e222-fe33-4117-a8a4-32343d4d4e44",
        "itemLanguage": "en",
        "itemVersion": 1,
        "layoutId": "96e5f4ba-a2cf-4a4c-a4e7-64da88226362",
        "templateId": "fa869e7a-bb40-4f5a-84e2-72eb43a60f6c",
        "templateName": "App Route",
        "placeholders": {
          "jss-header": [],
          "jss-main": [
            {
              "uid": "320db8e6-e227-44e2-aea3-7b4b716f63c9",
              "componentName": "Card",
              "dataSource": "{5090DED5-6D57-450F-BB7E-14E1DB4BCC4B}",
              "params": {},
              "fields": {
                "aField": {
                  "id": "d9ebb293-27f5-400f-992f-71c7f5d03779",
                  "url": "/Data/site/card1",
                  "name": "default",
                  "displayName": "Card 1",
                  "fields": {
                    "value": {
                      "value": "a value from a droplink"
                    }
                  }
                }
              }
            }
          ],
          "jss-footer": [
            {}
          ]
        }
      }
    }
  }