Stuff happens and you want to know what that stuff was. One nice thing about UI Builder (UIB) is that everything works using the same basic foundation. In this case I take advantage of the fact that all client scripts are responding to events to make a generic script that I can re-use to inspect the details of anything happening on my page, and easily remove once I've learned what I need to.
Create a new "Debug Event" script
1. Create a new script to help us inspect the payload of events. Click the "<>" icon in the bottom left in UIB and create a new client script called "Debug Event" and use the following code.
function handler({api : { state, context }, event, helpers, imports}) {
console.log(event.name, {event, state, context});
}
2. Attach this script to pretty much any event. In this example I am attaching it to "Field value changed" on the "Standard record" data resource on a Standard Record Page.
3. Execute the page and open the browser inspector. In this example I am going to change the "Justification" field and tab out, then look for the event name in the console.
You'll see the objects available to inspect, and in this case I can drill down to see how the field "justification" changed.
Note that some of these are of type "Proxy". For those you can drill into the underlying object using the Target, such as with the state object.
You can attach it to anything--a UI event (e.g. button click), a data resource event or a page event. This can give you nice insight into what's available.
