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

大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的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,直至发现事件是直接事件源。

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

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

原文地址:https://www.cnblogs.com/jonlan/p/9583358.html

时间: 2024-11-05 20:26:19

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

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

chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装后无法使用,出现vue.js not detected提示的解决办法 找到插件的安装目录: (可以通过id搜索ID:nhdogjmejiglipccpnnnanhbledajbpd) C:\Users\liangsuya\AppData\Local\Google\Chrome\User Data\Def

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

日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试 我们可以使用firefox的debug工具,找到指定元素,然后查看事件面板 2.使用chrome调试 在要检查的元素上单击右键选择查看元素,然后,右边的面板中会显示style标签,切换到EventListenrs标签,可以看到相关的事件绑定信息.点击最右边的文件名称还可以跳转到事件定义代码在脚本文件中的位置.不过这种方法并非总是可用,下面

Google Chrome浏览器扩展的调试

1)      查看扩展程序的详细信息和ID 通过Chrome 浏览器的“ 工具->更多工具->扩展程序”,打开chrome://extensions页面,选中右上角的“开发者模式”,可以查看扩展程序的详细信息(如名称.概述.占用空间大小.版本和权限等)和ID. 2)      查看扩展程序的popup页面 通过Chrome 浏览器的“工具 ->更多工具->扩展程序”,打开chrome://extensions页面,选中右上角的“开发者模式”(必须在开发者模式下才能够看到调试菜单项

fastclick.js解决移动端(ipad)点击事件反应慢问题

参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 上班做项目的时候碰到一个移动端项目,其中有个小游戏,相当于天上掉馅饼,用户需要点击馅饼获得.游戏做好之后在pc端测试是没问题的,安卓手机上测试也是没问题的,但是部分苹果手机就出现了问题,用户点击馅饼没有反应. 后来调试的时候,我让这些馅饼静止在屏幕上,这些苹果手机用户就可以点击了.才发现是因为点击

jquery on()绑定的点击事件在js动态新添加的元素上无效

js生成的元素绑定事件必须使用live,但新版的jq,已经淘汰了live,可以用on方法代替,但必须注意写法. $('.class').on("click",function(){--});相当于$('.class').bind("click",function(){--});$(document).on("click",'.class',function(){--});相当于$('.class').live("click",

如何最快速的找到页面某一元素所绑定的点击事件,并查看js代码

比如我要查看银行账号这个标签所绑定的事件. 操作过程中使用的是谷歌浏览器?第一步:在该元素上右键→检查 第二步:点击Event Listeners 这样就能看到该元素绑定的所有事件了 第三步:展开click,我们可以看到该元素所绑定点击事件的方法就在 jquery-ui-1.8.16.custom.min.js的第46行和 distribute.js的第12行 第四步:分别点击进去 光标停留处就是触发点击事件时执行的方法 如果想直接打开该js文件并修改代码,可以使用快捷键Ctrl+Shift+R

通过Chrome浏览器进行android调试/Remote Debugging on Android with Chrome

The way your web content behaves on mobile can be dramatically different from the desktop experience. Remote debugging with Chrome DevTools lets you debug live content on your Android device from your development machine. Remote debugging on Android

js调试--查找dom对象绑定的函数

点击最右侧的js文件. 选中函数upload_pic_box,右击,选择在控制台中调试,或者在控制台直接输入该函数 点击最后一行代码会打开该函数所在的js文件

js方式找出数组中重复数最多的那个数,并返回该数以及重复次数

function findNum(a){ var result = [0,0]; for (var i = 0; i < a.length; i++) { for (var j = 0,count = 0; j < a.length; j++) { if (a[i]==a[j]) { ++count; }; }; if(count>result[0]) { result[0] = count; result[1] = a[i]; }else if(count==result[0]&