How to view event listeners

The Events tab of DOM Explorer shows the events that are associated with a DOM element. Each top node represents an event that has active subscribers. The top node contains subnodes that represent the registered event listeners for the specific event. In addition to viewing the event listeners, you can use this tab to navigate to the location of the event listener in the JavaScript code.

The list on the Events tab is dynamic. If you add an event while the app is running, the new event will appear there. Event listeners for code elements that aren't DOM elements, such as xhr, don't appear on the Events tab.

To view event listeners

  1. In Visual Studio, create a JavaScript app that uses the Split Application project template.

  2. With the template open in Visual Studio, select Simulator in the drop-down list that's next to the Start Debugging button on the Debug toolbar in the debugger. This list is shown here:

    Running in the Simulator

  3. Press F5 to run the app in debug mode.

  4. Switch to Visual Studio (Alt+Tab or F12).

  5. In DOM Explorer, click the BODY element (or use the arrow keys to select the element).

  6. Click the Events tab in the pane on the right side of DOM Explorer.

    You can now see the events that have active subscribers for the BODY element, as shown in the following illustration.

    Events Tab of the DOM Explorer

    To locate the event listeners for these events, click the associated JavaScript file links.

See Also

Concepts

Quickstart: Debugging apps (JavaScript)

How to inspect CSS rules

How to view and edit the layout