Allan Jardine | Reflections | Visual Event

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

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



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



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



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



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



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

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

関連エントリ

• ウィンドウサイズ変更ブックマークレット
• WEBデザイナ/開発者が覚えておくと便利なブックマークレット集
• 既存WEBサイトからワイヤーフレームを生成し、デザインワークに役立てられうブックマークレット「Wirify」
• フォームの入力ボックスを動的にリサイズできるブックマークレット