JS Event Debugging-Find HTML element-bound events and where the binding code is located

Source: Internet
Author: User
Tags jquery library

In daily web development debugging, you often need to know which events are bound by a specified page element and where the code is bound, and here are three ways to track events on a page.

1, the use of Firefox debugging

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

2, the use of Chrome debugging

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

3. Check event binding information with Visual event in the 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) 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 file in which the line AddEventListener the event. It's time for Visual Event to shine ...

After visual event is installed, the toolbar has an icon for visual event. Then open the page we want to debug, on the toolbar, click on his eyes like the eye icon, all the HTML elements of the page bound events are covered by a translucent blue mask layer, the mouse moved to the corresponding elements to see the event binding information.

Just said, in the use of JS Library, visual event is still very good, the following list of the several libraries it supports the name 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



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.