Laravel Livewire 開発手助け用スニペット

本題

（2022年1月追記。下記の記事書きましたが、Chrome 96 から payload タブが独立して確認しやすくなりました）

Laravel Livewire の開発をする際は、AJAX 通信でどのようなデータを送ったか、結構見たくなったりします。

Developer ツールだと、Network タブで対象のリクエストをクリックして、表示されたヘッダーとかをずーっと下にスクロールして、更に Request Payload の ► 矢印を何度もクリックして展開して、ようやくデータが見られますが、正直、ちょっと大変です。

↓イメージ

ということで、以下を AppServiceProvider の boot() 内に記述すれば、livewire.log にログられるので、それを tail -f とかで見れば、楽に確認できます。（Ubuntu サーバで動作確認済み）

    public function boot()
    {
        \Livewire::listen('component.hydrate', function ($component, $request) {
            if ($this->app->isProduction()) {
                return;
            }

            $clone = clone $request;

            // 不要なものはカット
            unset($clone->fingerprint);
            unset($clone->memo['children']);
            unset($clone->memo['htmlHash']);

            \Log::build([
                'driver' => 'single',
                'path' => storage_path('logs/livewire.log'),
            ])->debug(json_encode($clone, JSON_PRETTY_PRINT));
        });
    }

ただ、tail -f storage/logs/livewire.log とか長いし（エイリアス作ればいいかも知れないけど）
せっかく動画サイトで習ったので、以下のように閲覧用コマンドを作ってみました。

web.php と同階層にある console.log に追記します。

Artisan::command(
    'livewire:log
    ',
    function () {
        $command = sprintf('tail -f %s', storage_path('logs/livewire.log'));

        \Symfony\Component\Process\Process::fromShellCommandline($command)
            ->setTty(true)
            ->setTimeout(null)
            ->run(null, []);
    }
)->purpose('Livewire の request ログを出力します。');

これで、後は、

php artisan livewire:log

とすれば、AJAX 通信時の Request ログを簡単に閲覧できます。

イメージ

[2021-12-20 14:44:38] local.DEBUG: {
    "updates": [
        {
            "type": "syncInput",
            "payload": {
                "id": "x80k",
                "name": "word",
                "value": "hoge"
            }
        }
    ],
    "memo": {
        "errors": [],
        "data": {
            "word": "ho",
            "showDeleteModal": false,
            "deleteUserId": null,
            "page": 1,
            "paginators": {
                "page": 1
            }
        },
        "dataMeta": []
    }
}

溜まったログは、適当に削除して下さい。

雑感

ほぼアイデアレベルですが、良かったら使ってみて下さい。

また、目的は異なりますが、Chrome 拡張機能の Livewire Devtools も役立ちます。
クライアント側のコンポーネントが保持しているデータ等を確認できます。