JS Event Debug-Find the event where the HTML element is bound and where the binding code is located

In daily web development debugging, it is often necessary to know which events are bound by one of the specified page elements and where to bind the code, and here are three ways to track the events on the page.

1. Use Firefox to debug

We can use the Firefox debug tool to find the specified element and then view the events panel

2. Debugging with Chrome

Right-click on the element you want to check to select the view element, then the Style tab will appear in the right panel, switch to the Eventlistenrs tab, and you can see the associated event binding information. Click the right-most file name to jump to the location of the event definition code in the script file. However, this method is not always available and is mentioned below.

3. Check event binding information using Visual event in Chrome Web Store

The above two methods, when we locate the code location to define the event, if we use the JS library (such as jquery) then the debugging work will become complex, the program will often lead us to the jquery library, In this case it is still inconvenient to find the event in the line of which the file was AddEventListener. This is the time for Visual Event to be unveiled ...

After you install Visual event, a visual event icon appears on the toolbar. Then open the page we want to debug, on the toolbar, click on his eyes-like eye icon, all the HTML elements of the page that are bound to the event are covered by a translucent blue mask layer, and the mouse moves to the corresponding element to see the event binding information.

Just now, in the use of JS Library, the visual event is still very useful, the following list it supports the name of several libraries and version information:

• DOM 0 Events
• JQuery 1.2.x +
• YUI 2.6.x (2.x might work!)
• MooTools 1.2.x
• Prototype 1.6.x
• JAK (Events 2.2)
• Glow

Get Visual Event

Location of Visualevent on GitHub: https://github.com/DataTables/VisualEvent

Location of visualevent on Chrome webstore: Https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim

This article references

http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

Http://www.sprymedia.co.uk/article/Visual+Event