https://stackoverflow.com/questions/10464844/is-there-a-way-to-auto-expand-objects-in-chrome-dev-tools

expandedLog.ts

var MAX_DEPTH = 20

export var expandedLog = (obj: Record<string, unknown>, depth: number = 0) => {
    var [[name, item]] = Object.entries(obj)
    if (depth < MAX_DEPTH && typeof item === 'object' && item) {
        var typeString = Object.prototype.toString.call(item)
        var objType = typeString.replace(/\[object (.*)\]/, '$1')

        console.group(`${name}: ${objType}`)
        Object.entries(item).forEach(([key, value]: any) => {
            log({ [key]: value }, depth + 1)
        })
        console.groupEnd()
    } else {
        var itemString = `${item}`
        if (typeof item === 'string') {
            itemString = `"${itemString}"`
        }
        console.log(`${name}: ${itemString}`)
        return
    }
}

var structure = { a: "A", b: "B", arr: [200, 400] }
expandedLog({ structure })
expandedLog({ watchThis: structure.arr })