大家有没有遇到这样的一个问题，我们在分析一些大型电子商务平台的Web前端脚本时，想找到一个元素绑定的点击事件，并不是那么容易，因为有些前端脚本封装的比较隐蔽，甚至有些加密脚本，用传统的查找元素ID、或者页面源码方法去找，可能最后徒劳无功。下面我来介绍利用chrome浏览器来查找元素绑定的事件。

只需要通过chrome浏览器以下三个功能就可以轻松找到绑定事件了。

1.Sources（源码）
2.Event Listener Breakpoints（事件监听断点）
3.Call Stack（函数调用栈）

举个栗子：

1.打开某网站，点击“规格”中的“100x100”选项，按F12，弹出前端调试窗口，切换到Sources标签。

2.看右边的窗口（Event Listener Breakpoints）栏，选择click选项（监听点击事件）。

3.展开Call Stack（函数调用栈）。

4.然后点击如下图标或按F11，观察CallStack。

5.一路按如下图标或按F11，直至发现事件是直接事件源。

一路按下去，一定要有耐心。。。。。

到这里已经发现找到了事件源！！！

如何使用chrome浏览器进行js调试找出元素绑定的点击事件的更多相关文章

  1. Jquery 给Js动态新添加的元素 绑定的点击事件

    //one $('.class').on("click",function(){ alert('one') }); //相当于$('.class').bind("clic ...

  2. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

  3. chrome浏览器安装vue调试器vue-devtools

    chrome浏览器安装vue调试器vue-devtools https://blog.csdn.net/zhangjnwei/article/details/76693053

  4. 通过js或jq增加的代码，点击事件或其他一些事件不起作用时

    通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...

  5. Chrome浏览器扩展开发系列之二：Google Chrome浏览器扩展的调试

    1)      查看扩展程序的详细信息和ID 通过Chrome 浏览器的“ 工具->更多工具->扩展程序”,打开chrome://extensions页面,选中右上角的“开发者模式”,可以 ...

  6. Java环境下 selenium webDriver + chrome浏览器搭建与调试

    一.首先下载selenium webDriver jar包,下载地址如下: http://selenium-release.storage.googleapis.com/index.html 二.下载 ...

  7. JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置

    日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工 ...

  8. FCC JS基础算法题(12):Where do I belong(数组排序并找出元素索引)

    题目描述: 先给数组排序,然后找到指定的值在数组的位置,最后返回位置对应的索引.举例:where([1,2,3,4], 1.5) 应该返回 1.因为1.5插入到数组[1,2,3,4]后变成[1,1.5 ...

  9. fastclick.js解决移动端（ipad）点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

随机推荐

  1. Django 拾遗

    1.python_2_unicode_compatible装饰器 from django.db import models from django.utils.encoding import pyth ...

  2. recovery uncrypt功能解析(bootable/recovery/uncrypt/uncrypt.cpp)

    我们通常对一个文件可以直接读写操作,或者普通的分区(没有文件系统)也是一样,直接对/dev/block/boot直接读写,就可以获取里面的数据内容了. 当我们在ota升级的时候,把升级包下载到cach ...

  3. SOAP REST

    SOAP是基于RPC原理,是传统程序的函数调用和返回在RPC中被请求和应答代替了而已. SOAP Simple Object Access Protocol,是一种严格定义的信息交换协议,用于在web ...

  4. python第三十三天－－－－静态方法、类方法、属性方法

    @staticmethod 装饰后,类中的方法转成静态方法 class a: @staticmethod def b(self): print('') 静态方法不可以访问实例变量或类变量,相当于类中的 ...

  5. C++基础学习一（基础之基础）

    开篇:做了这么多年的软件,第一次使用博客的方式记录学习过程,之前都是笔记本(都有一摞了),因为之前一直从事的都是.NET的开发工作,对C++知之甚少,但一直想了解C++这门鼻祖级的语言,现在终于下定决 ...

  6. 位运算符&与、或|、异或^

    &按照二进制位进行运算 如:运算规则:0&0=0: 0&1=0:1&0=0:1&1=1:即:两位同时为“1”,结果才为“1”,否则为0[有0则0] 3& ...

  7. python曲线拟合

    http://blog.sina.com.cn/s/blog_aed5bd1d0102vid7.html 1.多项式拟合范例: import matplotlib.pyplot as plt impo ...

  8. cx_Oracle读取Oracle数据库中文乱码问题解决

    在使用cx_Oracle模块读取Oracle数据库中的中文记录时,返回值皆为?,后google得此佳文,遂问题得以解决,特此记之. Oracle数据库版本是10g,字符集是AL32UTF8. 编写的p ...

  9. 19LaTeX学习系列之---LaTeX的总结

    目录 目录 前言 (一)本系列的章节目录 (二)快速温习LaTeX 1.介绍 2.源文件结构 3.文档的结构 4.字体的设置 5.图片的插入 6.表格的插入 7.数学公式的插入 8.交叉引用与浮动体 ...

  10. SQL Server 链接服务器连接 SQLite数据库文件

    SQL Server数据库允许通过数据库驱动程序连接各类数据库并进行操作.以下是在SQL Server 2012 R2中建立SQLite的链接服务器. 一.下载SQLite数据库的ODBC驱动程序: ...