はじめに
LaravelのbladeファイルでAlpine.jsを使った開発をしており、書いた処理がうまく動かないときに「x-dataの中身をみたい」という場面がありました。
そんなときにデバック用で便利なツールがあったのでご紹介です。
結論
以下のChromeの拡張機能を入れる。
使い方
いつも通り開発者ツールを立ち上げると、ネットワークやアプリケーションの他に「Alpine.js」が追加されていると思います。
例えばbladeファイルで<div x-data="{ activeTab: 'buttonA' }">のようにx-dataを定義しているとします。
ボタンをクリックするとx-on:clickでx-dataを操作するようにしており、開発者ツールで見るとx-dataの中身が変化していることがわかります。
こんな感じでサクッと確認できますし、手軽に導入できるのでオススメです