文档章节

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

p
 peakedness丶
发布于 2018/11/25 11:23
字数 619
阅读 15
收藏 1

大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的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标签。

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

前端全栈学习交流圈:866109386 面向1-3经验年前端开发人员 帮助突破技术瓶颈,提升思维能力

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

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

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

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

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

© 著作权归作者所有

p
粉丝 58
博文 142
码字总数 204859
作品 0
长沙
私信 提问
查看html元素绑定的事件与方法的利器

WEB标准提倡结构、表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,我们很难搞清楚最后在哪些元素的哪个动作绑定了事...

百变茄
2014/02/24
120
0
利用google浏览器开发者工具调试网页(详)

前端程序员或者在校大学生正在开发网页,如果想要测试或者通过测试优化网页结构,该怎么办呢?这就需要用到一款工具,chrome浏览器的开发者工具?本文写给尚不熟悉这个开发者工具的同学们或者...

开源oschina
2015/01/09
198
0
Introduction to Chrome Developer Tools——阅读笔记

最近对Chrome开发者工具十分关注,因此学习了不少相关文章。这里是HTML5ROCKS上的文章Introduction to Chrome Developer Tools的阅读笔记。注:下面的内容不是一对一地翻译,而是摘录和个人学...

小微
2013/01/16
344
0
作为Web开发人员,我为什么喜欢Google Chrome浏览器

在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器。 在Chrome出来的时候,我就喜欢上它的简洁、快速,无...

紫地瓜
2012/09/17
433
2
【Chorme】前端调试工具之Chorme专篇

【相关来源】 Browser-Sync:响应式Web开发调试利器 开发者调试工具Chrome Workspace Chrome中的 workspace 工具(官方) Chrome调试工具developer tool技巧 【Chrome开发,debug的使用方法。...

呢喃的猫咪
2013/02/27
473
1

没有更多内容

加载失败,请刷新页面

加载更多

Android多点触控技术,实现对图片的放大缩小平移,惯性滑动等功能

https://blog.csdn.net/nugongahou110/article/details/50668925

shzwork
24分钟前
5
0
数据仓库知识积累

1、数据仓库专题(6)-数据仓库、主题域、主题概念与定义 https://blog.csdn.net/hadoopdevelop/article/details/45296981 2、数据仓库基本知识 https://blog.csdn.net/zzq900503/article/de...

sunny小喵
43分钟前
4
0
018、Kubernetes安装前的准备

本次安装采用 Ubuntu Server X64 18.04 LTS 版本安装 kubernetes 集群环境,集群节点为 1 主 2 从模式,此次对虚拟机会有些基本要求,如下: OS:Ubuntu Server X64 18.04 LTS(16.04 版本步...

北岩
46分钟前
4
0
redis 不同数据结构的使用场景?

1. string string 类型也就是 key-value 类型 常用命令:get、set、incr 应用场景:string 是最常用的一种数据类型 2. list 常用命令:lpush,rpush,brpop,blpop 应用场景:作为消息队列,因为...

happywe
59分钟前
7
0
PG jdbc

import java.sql.DriverManager;import java.sql.Connection;import java.sql.SQLException;import java.sql.ResultSet;import java.sql.Statement; public class PG{ public stat......

MtrS
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部