大家有没有遇到这样的一个问题，我们在分析一些大型电子商务平台的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. OneAPM大讲堂 | Java 异常日志记录最佳实践

    [编者按]本文作者是 Casey Dunham.Casey 是一位具有 10 多年经验的专业软件开发人员,以其独特的方式应对应用安全问题而闻名.本文系国内 ITOM 管理平台 OneAPM 工程师编译 ...

  2. Sql 查询结果 根据某个字段值 变更另外一个字段值 case when

    SELECT CASE THEN '*******' ELSE Plate END AS Plate, CarType FROM Cars;

  3. January 20th, 2018 Week 3rd Saturday

    We may encounter many defeats but we must not be defeated. 我们可能会失败很多次,但决不能被打败. As long as we are con ...

  4. January 09th, 2018 Week 02nd Tuesday

    Use the smile to change the world. Don't let the world change your smile. 用你的笑容去改变这个世界,别让这个世界改变了你的笑容 ...

  5. 英语初级学习系列-00-Name-介绍自己

    1. 询问名字 常用句子 1. Hi, may I have your name, please? 2. Could you please tell me your name? 3. Will it ...

  6. Python进阶（三）

    匿名函数 匿名函数有个限制,就是只能有一个表达式,不用写return,返回值就是该表达式的结果.用匿名函数有个好处,因为函数没有名字,不必担心函数名冲突.此外,匿名函数也是一个函数对象,也可以把匿名函 ...

  7. Treiber Stack介绍

    简介 Treiber Stack在 R. Kent Treiber在1986年的论文Systems Programming: Coping with Parallelism中首次出现.它是一种无锁并发 ...

  8. 【ArcGIS】安装ArcEngine 10的顺序

    Step1.安装VS 2010Step2.安装ArcGIS Desktop(不可跳过这步),如果直接安装ArcEngine,将出现如下错误提示因此必须首先安装ArcGIS Desktop或者ArcGI ...

  9. vue框架简介

    MVVM框架概述 什么是vue 是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue 的核心库只关注视图层 vue的兼容性 Vue.js 不支持 IE8 及其以下版本,因 ...

  10. 理解OSI参考模型

    在一个视频网站上不小心搜到网络知识的视频,突然以前大学的没有真正接受的知识点,一下子豁然开朗,赶紧整理了下笔记. 一.OSI参考模型 自下而上:物理层(物理介质,比特流).数据链路层(网卡.交换机). ...