JavaScript Tracker - DOMイベントを捕捉するGoogle Chrome機能拡張
JavaScriptはイベント購読型の処理が多いです。DOMをクリックした際のイベントであったり、変数の変化をウォッチして処理が行えます。しかし、そういったコードが散在していると、どこでイベントを購読しているのかが分からなくなります。 そこで使ってみたいのがJavaScript Trackerです。JavaScriptのイベント処理を一覧し、ハンドリングできるGoogle Chrome機能拡張です。
JavaScript Trackerの使い方
DOMを選択すると、そこに紐付いているイベントが要素、振る舞いなどを一覧してくれます。
そこから実際のコードを辿ることもできます。
動作デモです。
JavaScript TrackerはjQueryにも対応し、DOMイベントの収集ができます。スタイルを変更するイベントも分かります。そしてそこからコードを辿ってデバッグが可能です。これはフロントエンドエンジニア必携のツールではないでしょうか。
JavaScript TrackerはGoogle Chrome用のオープンソース・ソフトウェア(MIT License)です。
JavaScript Tracker - Chrome Web Store pilagod/js-tracker: A chrome extension tracks front-end JavaScript that uses DOM / jQuery APIs to manipulate html dom elements (e.g., change style, attach event listener) at runtime.