🐞
Stimulus debug mode 使い方
Stimulus v3 フレームワークを使ってて、
どのイベントが先に発火するのか知りたくなるときがありました。
例えば、ValueChangedイベントがconnect初回読み込み時も走るのか、など。
そんなときに便利なのが「デバッグモード」です。
デバッグモードにすることで発火するイベント名をコンソールログ出力できます。
これを知らなかった私は、確認したいメソッドに
console.log('hogehoge')
とわざわざ差し込んでいました。
下記スクショは、debugをオンにしたときの例です。
exampleコントローラのinitialize connectがコンソール表示されていますね。
ちなみに、exampleコントローラのソースコードは下記の通りです。
(stimulus handbookのソース拝借)
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
this.element.textContent = "It works!"
}
}
使い方はapplication.debug = trueにするだけ
Stimulusの導入環境によりますが、下記のようにApplicationインスタンスのdebugオブジェクトをtrueにするだけで使えます。
import { Application } from "@hotwird/stimulu"
const application = Application.start()
application.debug = true
もちろん、本番環境では表示したくない場合もありますよね。
その場合は、
application.debug = process.env.NODE_ENV === 'development'
のように、true/false判定を環境で入れ替えればOKです。
その他
今回の記事でカバーしきれていない部分は下記リンクを参照されるとよいかと思います。
Discussion