Log objects to console in UFM?

Questions
1

Often when we try to fix things using UFM, for block list item label, we are unsure what our “current” objects look like that we try to parse.

Is there a way to log objects to the javascript console somehow to more easily grasp the layout of our given objects? Or interrogate them some other way?

2

It’s not 100% the same, but when you use the Delivery API extensions package, you can enable a workspace view that displays a preview of what the page would look like in the content delivery api. Like I said, it’s not 100% acurate, but usually accurate enough for your purpose.

3

Hi @karlmacklin ,

Please try this tool, it provides a custom UFM tag {debug:dump}. When added to a block label, it taps into the Umbraco Context API and logs the live, clean data array directly to the browser console, revealing the exact property aliases available for use.

Follow the steps to create it:

Step 1: Create the Plugin Folder

In your Umbraco project, navigate to the App_Plugins folder and create a new folder called UFMDebugger.

Step 2: Create the JavaScript File

Inside the UFMDebugger folder, create a file named debug-label.component.js and paste in this code. (Note: This is written in Vanilla JS so it does not require a Vite/TypeScript build step).

import { UmbUfmComponentBase } from '@umbraco-cms/backoffice/ufm';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';

class UfmBlockDebuggerElement extends UmbElementMixin(HTMLElement) {
    connectedCallback() {
        super.connectedCallback?.();
        this.innerHTML = `<span style="color: blue; font-size: 10px; border: 1px solid blue; padding: 2px;">[Check Console!]</span>`;

        this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {

            // Subscribe to the content values stream
            this.observe(context._contentValueArray, (contentData) => {
                // This will give you the clean, structured array of your properties!
                console.log('✅ CLEAN CONTENT DATA:', contentData);
            });

            // If you also need to see your block settings data:
            this.observe(context._settingsValueArray, (settingsData) => {
                console.log('⚙️ CLEAN SETTINGS DATA:', settingsData);
            });

        });
    }
}

if (!customElements.get('ufm-block-debugger')) {
    customElements.define('ufm-block-debugger', UfmBlockDebuggerElement);
}

export class DebugLabelComponent extends UmbUfmComponentBase {
    render() {
        return `<ufm-block-debugger></ufm-block-debugger>`;
    }
}
export { DebugLabelComponent as api };

Step 3: Create the Manifest File

In the same UFMDebugger folder, create a file named umbraco-package.json and paste in this configuration:

{
  "name": "UFM Component Debugger",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "ufmComponent",
      "alias": "My.UfmComponent.Debug",
      "name": "Debug UFM Component",
      "api": "/App_Plugins/UFMComponent/debug-label.component.js",
      "meta": {
        "alias": "debug"
      }
    }
  ]
}

Step 4: Restart and Clear Caches

Because we added a new package manifest, you need to restart the application (or reload the app domain) so Umbraco registers the new extension. Once the backoffice loads, do a Hard Refresh (Ctrl + F5) in your browser to clear out any old JS bundles.

Step 5: How to Use It

  1. Go to the Settings section and open the Data Type for your Block List.
  2. In the configuration for a specific Block, set the Label field to: {debug:dump} (You can mix it with other text, like My Block - {debug:dump}).
  3. Open a Content node that uses this Block List.
  4. Press F12 to open your browser’s Developer Tools and navigate to the Console tab.
  5. Create a new block or type data into an existing block.

Every time the block data updates, the console will log the ✅ CLEAN CONTENT DATA array, showing you the exact structure and property aliases you can safely use in your {=propertyName} UFM expressions!

Here’s the output I got when tried with a simple setup:

image
image907×586 43.3 KB

Hope it helps!

4

Hi @ShekharTarare

Any objections if I took this and put it in my Umbraco.Community.Ufm.Extensions package? I think it would be useful for others.

Or, feel free to PR it yourself?…

Justin

5

Hi @justin-nevitech ,

No objections. Please take it. It would be great if it can be of any use.

1 Like