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


Posted in Javascript onJanuary 30, 2021

前言

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

Chrome开发工具中最有用的面板Sources。Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码而一无所获之后打开Sources进行js断点调试,几乎能解决8成的代码问题。

本文主要给大家介绍了关于利用chrome浏览器进行js调试并找出元素绑定的点击事件的相关内容,下面话不多说了,来一起看看详细的介绍吧

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

1.Sources(源码)

2.Event Listener Breakpoints(事件监听断点)

3.Call Stack(函数调用栈)

举个栗子:

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

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

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

2.看右边的窗口(Event Listener Breakpoints)栏,选择click选项(监听点击事件)。

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

3.展开Call Stack(函数调用栈)。

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

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

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

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

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

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

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

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

js 调试,chrome调试,找出点击事件

前接触过一个项目。点击事件,需要找出点击所触发的js函数,进行修改。js的封装性很强,而且用了一些js框架,通过源代码真的很难找到。所以只能借助强大的chrome浏览器了。

第一步:当然是打开调试页面了。

第二步:选择调试元素,找到该元素的监听事件。

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

第三步:找到你所需要的监听事件的类型,比如我需要的是点击事件,就打开点击事件,找到对应的js和方法,可能会有多个,可以选择临时移除,找到真正的那一个。

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

第四步:找到该段代码,设置断点。开始调试执行。

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

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

第五步:其他事件类似,按照此步骤即可。

常用调试快捷键

F8:运行剩余程序

F9:运行该程序,一步步运行。

F10:调试跳过该方法,执行下一步

F11:进入函数内部

shift +F11:跳出该函数,返回上一个函数

don't pause on exceptions :不要暂停异常(默认,取消之后按F8可以直接运行到异常处)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 #Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 #Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 #Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 #Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 #Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 #Javascript
element UI upload组件上传附件格式限制方法
Sep 04 #Javascript
You might like
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
global.php
2006/12/09 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
10个简化PHP开发的工具
2014/12/25 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
js对象基础实例分析
2015/01/13 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
解决python opencv无法显示图片的问题
2018/10/28 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
英语专业推荐信
2013/11/16 职场文书
《灯光》教学反思
2014/02/08 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
创意广告词
2014/03/17 职场文书
婚前财产公证书
2014/04/10 职场文书
学习作风建设心得体会
2014/10/22 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
python实现的web监控系统
2021/04/27 Python