利用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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
js常用代码段收集
Oct 28 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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
PHP新手上路(六)
2006/10/09 PHP
加强版phplib的DB类
2008/03/31 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
python爬虫常用的模块分析
2014/08/29 Python
Python抽象类的新写法
2015/06/18 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python机器学习之神经网络(二)
2017/12/20 Python
PyQt5实现简易计算器
2020/05/30 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
python conda操作方法
2019/09/11 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
承诺书的格式范文
2014/03/28 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
公司前台接待岗位职责
2015/04/03 职场文书