ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2