Use the Chrome browser to make JS commissioning and find out the click event details of the element binding

Have you encountered such a problem, we want to find an element binding click event when analyzing some of the Web front-end scripts of some large e-commerce platforms, Not that is not so easy, because some front-end script packages are more concealed, even some encryption, with traditional lookup element ID, or page source code method, may end in vain. Below I will introduce an event that uses the Chrome browser to find an element bind.

The most useful panel Sources in the Chrome development tool. The Sources panel is almost the most commonly used Chrome function panel, but also the main functional panel that solves the general problem. Usually, as long as it is developing JS error or other code issues, open Sources after reviewing the code, open Sources for JS breakpoint debugging, almost 80% code issues.

This article mainly introduces the relevant content of the CHROME browser to make JS commissioning and find out the element binding, don’t say more, come and see the detailed introduction

It is only necessary to find a binding event with three features below the Chrome browser.

2. Event Listener Breakpoints (event monitor breakpoint)

3.Call Stack (function Call stack)

1. Open a website, click “100×100” option in “Specifications”, press F12, pop up the front-end debug window, Switch to the Sources tab.

利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

2. Look to the right of the window (Event Listener Breakpoints) column, click to select the option (listen for click events).

利用chrome浏览器进行js调试并找出元素绑定的点击事件详解 3. Expand Call StackFunction call stack).

4. Then click on the icon below or press F11 to observe CallStack.

利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

5. Press the following icon or press F11 until the event is the direct event source.

All the way, must be patient. . . . . 利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

The event source has been found here! ! !

利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

The above is the full content of this article, I hope this paper has a certain reference value for everyone’s learning or work. If you have any questions You can leave a message to communicate, thank you for your support of Tumi Cloud.

利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment