イベントリスナーを表示する方法

[アーティクル]
02/19/2013

DOM エクスプローラーの [イベント] タブには、DOM 要素に関連付けられているイベントが表示されます。最上位のノードは、アクティブなサブスクライバーがあるイベントを表します。最上位のノードには、特定のイベントのために登録されたイベントリスナーを表すサブノードが含まれます。イベントリスナーの表示に加えて、このタブを使用して、JavaScript コード内のイベントリスナーの場所に移動できます。

[イベント] タブの一覧は動的です。アプリの実行中にイベントを追加すると、新しいイベントが一覧に表示されます。DOM 要素でないコード要素 (xhr など) のイベントリスナーは、[イベント] タブには表示されません。

イベントリスナーを表示するには

Visual Studio で、分割アプリケーションプロジェクトテンプレートを使用する JavaScript アプリを作成します。
Visual Studio でテンプレートを開いた状態で、デバッガーの [デバッグ] ツールバーの [デバッグの開始] ボタンの横にあるドロップダウンリストの [シミュレーター] をクリックします。次の一覧が表示されます。
F5 キーを押して、アプリをデバッグモードで実行します。
Visual Studio に切り替えます (Alt + Tab キーまたは F12 キーを押します)。
DOM Explorerで BODY 要素をクリックします (または方向キーを使用して要素を選択します)。
DOM エクスプローラーの右側にあるウィンドウで [イベント] タブをクリックします。

次の図に示すように、BODY 要素のアクティブサブスクライバーがあるイベントが表示されます。

これらのイベントのイベントリスナーに移動するには、関連付けられた JavaScript ファイルのリンクをクリックします。