前の記事 ≪:画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit...
次の記事 ≫:かなりいい感じのWordPressテーマ20

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

2011年04月12日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Allan Jardine | Reflections | Visual Event

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

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



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



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



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



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



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

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

関連エントリ
関連の記事検索:JavaScript, ブックマークレット, bookmarklet
スポンサード リンク

By.KJ : 2011年04月12日 10:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)