JavaScriptはイベント購読型の処理が多いです。DOMをクリックした際のイベントであったり、変数の変化をウォッチして処理が行えます。しかし、そういったコードが散在していると、どこでイベントを購読しているのかが分からなくなります。
そこで使ってみたいのがJavaScript Trackerです。JavaScriptのイベント処理を一覧し、ハンドリングできるGoogle Chrome機能拡張です。
JavaScript Trackerの使い方
DOMを選択すると、そこに紐付いているイベントが要素、振る舞いなどを一覧してくれます。
そこから実際のコードを辿ることもできます。
動作デモです。
JavaScript TrackerはjQueryにも対応し、DOMイベントの収集ができます。スタイルを変更するイベントも分かります。そしてそこからコードを辿ってデバッグが可能です。これはフロントエンドエンジニア必携のツールではないでしょうか。
JavaScript TrackerはGoogle Chrome用のオープンソース・ソフトウェア(MIT License)です。
MOONGIFTの関連記事
コメント