HTML で要素に関連した event function (click など) を確認する – IE でようやく可能に …

HTML で要素 (Element) に関連付いている click、mouseover などのイベント (event) を調べたくなるときが多いかと思うが、その方法について記載しておく。

「何をいまさら」と思うかもしれないが、Internet Explorer 11 の F12 開発者ツール (F12 Developer Tools) でようやく可能になった。正直、いままで、この機能がなかったので、別の開発者ツールや、コンソールを使った面倒な検査をおこなっていたが、IE だけでこの辺りも可能になった。

では、手順を簡単に記載しておこう。

まず当然だが、Internet Explorer 11 (IE 11) を起動し、F12 キーを押す。(F12 開発者ツールが起動する。)

つぎに、開発者ツール上部の矢印のアイコン (下図) をクリックし、ガイドが表示されるので、HTML の中から検査したい要素の箇所をクリックする。
これも、従来、可能だったことで、特に目新しくない。

select_element

ここからがポイントだ。
HTML の要素が表示されるが、右のペインに注目していただくと、「イベント」という新しいタブが存在している。これをクリックすると、下図の通り、関連付いた JavaScript の関数が表示される。(下記では、<a /> タグに関連付いた click イベントの関数が表示されている。名前の設定されていない Anonymouse の関数も、もちろん表示される。)

view_event

ここで表示されている関数 (上図の jquery.js) はクリック可能で、クリックすると、該当の関数 (上記の場合は handle) が表示される。
さらに、一般に、表示される JavaScript は minimize されているため読みづらいが、ここで「整形出力の有効化」のアイコン (下図) をクリックすると、ちゃんと JavaScript の整形化 (beautify) もおこなってくれる。VS に貼り直したり、Online JSON Viewer や Dirty Markup などの外部ツールと組み合わせる必要もない。

beautify_javascript

新しい開発者ツールは、開発者のフィードバックをちゃんと反映しているようで、かなり良い感じだ。まだ Windows 8.1 が必要だが、他でも使えるようになったら是非おすすめしたい。

2013/09/20 追記 – IE 11 単体でのダウンロードが可能になったようです!
http://windows.microsoft.com/ja-jp/internet-explorer/ie-11-release-preview

広告