Is there a way to debug into the rendering of a content type?

I have a content type and would like to bind a couple of css classes based on a selected field. The select field has the following options defined in the form:

<field name="foo_bar" formElement="select" sortOrder="10">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="default" xsi:type="string">foo</item>
        </item>
    </argument>
    <settings>
        <dataType>text</dataType>
        <label translate="true">Some Select</label>
    </settings>
    <formElements>
        <select>
            <settings>
                <options>
                    <option name="0" xsi:type="array">
                        <item name="value" xsi:type="string">foo</item>
                        <item name="label" xsi:type="string" translate="true">Foo</item>
                    </option>
                    <option name="1" xsi:type="array">
                        <item name="value" xsi:type="string">bar</item>
                        <item name="label" xsi:type="string" translate="true">Bar</item>
                    </option>
                </options>
            </settings>
        </select>
    </formElements>
</field>

In my master template I have the binding:

<div class="some-class"
     css="'some-other-class lg:another-class': data.main.attributes().foo_bar == 'foo'"
></div>

In the content type definition I have added the attribute:

<element name="main">
    <attribute name="name" source="data-content-type" />
    <attribute name="appearance" source="data-appearance" />
    <attribute name="foo_bar" source="data-foo-bar"/>
</element>

But the classes are not rendered.

I already tried to use the field directly but that did not help:

<div class="some-class"
     css="'some-other-class lg:another-class': data.main.foo_bar == 'foo'"
></div>

In order to verify that the binding in general works I replaced the condition with trueand then the class is correctly applied:

<div class="some-class"
     css="'some-other-class lg:another-class': true"
></div>

So my question is now how I can debug what is actually stored in data.main at the time of rendering. When I put a console.log into the binding it will execute only on page load, not on rendering. While that console.log helped me resolve my issue (the key in attributes is the actual attribute name so I can access it via data.main.attributes()['data-foo-bar']), it would be nice to know if there are any other debugging techniques.