用chrome浏览器调试js 了解元素绑定点击事件的详细说明

前言

你遇到过这样的问题吗？我们在分析一些大型电商平台的Web前端脚本时，要找到一个元素绑定的点击事件并不是那么容易的，因为有些前端脚本是比较隐蔽的，甚至有些加密脚本可能会被传统的查找元素ID或者页面源代码的方法白白发现。接下来，我将介绍使用chrome浏览器查找元素绑定的事件。

Chrome开发工具中最有用的面板来源。Sources面板几乎是最常用的Chrome功能面板，也是解决一般问题的主要功能面板。通常，只要开发遇到js错误报告或其他代码问题，在查看代码后发现什么也没有，打开Sources进行js断点调试，就可以解决几乎80%的代码问题。

本文主要向您介绍使用chrome浏览器调试js以及查找元素绑定点击事件的相关内容。下面的话就不多说了，我们一起来看看详细的介绍吧

使用chrome浏览器的以下三个功能可以轻松找到绑定事件。

1.来源(源代码)

2.事件侦听器断点(事件侦听器断点)

3.调用栈(函数调用栈)

举个栗子：

1.打开一个网站，点击“规格”中的“100x100”选项，按F12，弹出前端调试窗口，切换到“来源”选项卡。

2.查看右侧窗口(事件监听器断点)列，并选择点击选项(监听点击事件)。

3.展开调用堆栈。

4.然后单击以下图标或按F11观察呼叫堆栈。

5.一直按下下面的图标或F11，直到发现事件是直接事件源。

一直按下去，耐心点。

我们在这里找到了事件来源！

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。