ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌

Allan Jardine | Reflections | Visual Event

ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。
JavaScript で開発していて、jQuery等の各種フレームワークや、on〜 を使ってイベントを埋め込むことは多いですね。
後になって、どこにイベントがあるのかをすぐ見える化し、どのような処理が記述されているのか、確認することのできるブックマークのご紹介です。

当サイトにはそれほどイベントが組み込まれていませんので、Yahoo! Japanのトップページで試してみます。

ブックマークレットを起動すると、グレーアウトされ、エレメントの上にイベントが設定されていることを分かりやすく示してくれます。

拡大してみたところ。アイコンの形状によってイベントの種類(onclickとかonkeydown)を出し分けています。以下の青い部分はクリックイベント。

カーソルを合わせるとイベント部分のコードが表示されます。

どのフレームワークによって実装されているのか?という点も正確ではないかもしれませんが、分かるようになっているようです。

JavaScript のコードでは、どこでも自由にイベント定義できる上、フレームワークごとに書き方が違っていたりしてコードを見て確認するのは大変な場合がありそうですが、見える化することでどういう処理が実行されるのか簡単に確認出来ますね。

開発用に覚えておいてもよいかもしれません。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中