大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的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. .Net Core 2.0 生态(1).NET Standard 2.0 特性介绍和使用指南

    .NET Standard 2.0 发布日期:2017年8月14日 公告原文地址 前言 早上起来.NET社区沸腾了,期待已久的.NET Core 2.0终于发布!根据个人经验,微软的产品一般在2.0时 ...

  2. 【HANA系列】SAP HANA XS使用Data Services查询CDS实体【二】

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Dat ...

  3. AIX mount nfs 文件系统失败

    报 mount: 1831-008 的错,配置系统参数后恢复. 操作系统版本为: # oslevel 6.1.0.0 LOG如下: # mount 192.168.240.69:/xyz/xvdh2/ ...

  4. Python实例---模拟微信网页登录(day5)

    第六步: 实现发送/接受消息---day5代码 settings.py """ Django settings for weixin project. Generated ...

  5. VS2015 无法启动 IIS Express Web 服务器 解决方案

    VS2015 IIS Express 无法启动Web 解决方案 [亲测已成功] 1.我的电脑—管理—事件查看器—Windows日志—应用程序: 详细信息会提示你:[模块 DLL C:\Program ...

  6. sublime text 中 .vue文件中的scss语法无法高亮bug怎么解决

    如题,在vuejs的单文件组件中,.vue 结尾的文件里面使用scss的时候,无法高亮.因为 sublime默认是不带sass语法高亮的,安装 sublime SCSS语法高亮包即可. 方法如下:   ...

  7. Python之对象的永久保存模块---pickle

    经常遇到在Python程序运行中得到了一些字符串.列表.字典等数据,想要长久的保存下来,方便以后使用,而不是简单的放入内存中关机断电就丢失数据. 这个时候Pickle模块就派上用场了,它可以将对象转换 ...

  8. 使用POI读写Word doc文件

    使用POI读写word doc文件 目录 1     读word doc文件 1.1     通过WordExtractor读文件 1.2     通过HWPFDocument读文件 2     写w ...

  9. dp 动态规划 之C - Apple Catching 简单基础

    终于开始写dp了,还很不熟练 It is a little known fact that cows love apples. Farmer John has two apple trees (whi ...

  10. 转载 Net多线程编程—System.Threading.Tasks.Parallel

    .Net多线程编程—System.Threading.Tasks.Parallel   System.Threading.Tasks.Parallel类提供了Parallel.Invoke,Paral ...