Example of logging Laravel Livewiure component state

example.html

    <script src="{{ asset('js/app.js') }}"></script>

    <script>
        let logComponentsData = function () {
            window.livewire.components.components().forEach(component => {
                console.log(component.name);
                console.log(component.data);
            });
        };
        document.addEventListener("livewire:load", function(event) {
            logComponentsData();

            window.livewire.hook('afterDomUpdate', () => {
                logComponentsData();
            });
        });
    </script>

Updated version for Livewire 2.x

<script>
    let logComponentsData = function () {
        Livewire.components.components().forEach(component => {
            console.log("%cComponent: " + component.name, "font-weight:bold");
            console.log(component.data);
        });
    };

    document.addEventListener("livewire:load", function(event) {
        logComponentsData();

        Livewire.hook('message.processed', (message, component) => {
            logComponentsData();
        });
    });
</script>

Updated version for Livewire 3.x (untested)

<script>
    let logComponentsData = function () {
        Livewire.components.components().forEach(component => {
            console.log("%cComponent: " + component.name, "font-weight:bold");
            console.log(component.data);
        });
    };

    document.addEventListener("livewire:init", function(event) {
        logComponentsData();

        Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
            logComponentsData();
        });
    });
</script>

Thanks @Braunson!