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

大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或者页面源码方法去找,可能最后徒劳无功.下面我来介绍利用chrome浏览器来查找元素绑定的事件. 只需要通过chrome浏览器以下三个功能就可以轻松找到绑定事件了. 1.Sources(源码)2.Event Listener Breakpoints(事件监听断点)3.Call Stack(函数调用栈)…

Jquery 给Js动态新添加的元素绑定的点击事件

//one $('.class').on("click",function(){ alert('one') }); //相当于$('.class').bind("click",function(){……}); //two $(document).on("click",'.class',function(){ alert('two'); }); //相当于$('.class').live("click",function(){……

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\D…

chrome浏览器安装vue调试器vue-devtools

chrome浏览器安装vue调试器vue-devtools https://blog.csdn.net/zhangjnwei/article/details/76693053…

通过js或jq增加的代码，点击事件或其他一些事件不起作用时

通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { $('.con10').fadeOut(); $(".noshow").attr("class","show"); });…

Chrome浏览器扩展开发系列之二：Google Chrome浏览器扩展的调试

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

Java环境下 selenium webDriver + chrome浏览器搭建与调试

一.首先下载selenium webDriver jar包,下载地址如下: http://selenium-release.storage.googleapis.com/index.html 二.下载ChromeDriver 与 Chrome浏览器,这两个要对应: Chromedriver下载地址:http://chromedriver.storage.googleapis.com/index.html 浏览器下载地址:https://www.slimjet.com/chrome/google-…

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

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

FCC JS基础算法题(12):Where do I belong(数组排序并找出元素索引)

题目描述: 先给数组排序,然后找到指定的值在数组的位置,最后返回位置对应的索引.举例:where([1,2,3,4], 1.5) 应该返回 1.因为1.5插入到数组[1,2,3,4]后变成[1,1.5,2,3,4],而1.5对应的索引值就是1.同理,where([20,3,5], 19) 应该返回 2.因为数组会先排序为 [3,5,20],19插入到数组[3,5,20]后变成[3,5,19,20],而19对应的索引值就是2. 我自己做的有两种思路,第一种,先进行排序,然后比大小找出索引值,代码:…

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

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

【转】用JS完成手机短信验证按键点击事件

原地址:https://gitee.com/RainVanilla/codes/i7jske4wdogvnb0apmfx571 试了一下,效果还可以,留着备用! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手机接收验证码按钮</title> <script type="text/javascript" src=&q…

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

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

说说chrome上的JS调试

步骤:审查元素 ->source->选择js文件 ->设置断点 ->触发函数 ->进入调试点step over 到elements目录下双击某一块代码还可以立刻修改,ctrl+s后就可以保存并进入sourse继续调试…

chrome浏览器测试js函数

1.直接在console中写入代码 2.既要写函数,又要写执行函数的代码. 不关闭网页,函数能够在内存中存活很久浏览器都能记住函数. 当然,在其他页面无效.…

通过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…

chrome下的js调试

console输出对象信息:console.log(object[,object,.....])…

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

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

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

js Dom为页面中的元素绑定键盘或鼠标事件

html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange 域的内容改变在事件触发中,this表示对当前dom对象的引用 1.html事件,在html元素上直接绑定事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q…

js动态创建的元素绑定事件

新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("cancelable");…

angular JS中使用jquery datatable添加checkbox点击事件

'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $scope.isSelected = function (obj,index, id) { var checkbox = obj.target; checkbox.checked ? $scope.selected.push(id) : $scope.selected.splice(index,1);…

js中 ajax动态新增节点无法触发点击事件

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件. 其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最好的方式还是通过给类名绑定一个click事件. 方法一:使用live: live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数.通过live()函数适用于匹配选择器的当前及未来的元素.比如,通过脚本动态创建的元素. 代码示例: $('.demo1').live('cl…

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

https://blog.csdn.net/jmd88888888/article/details/70919378…

js多个<ul>相应不同的点击事件

$('ul').on("click","li#left",function(){ currentProvince = $(this).text().replace(/[0-9]/ig,""); $(this).siblings().removeClass('choose'); $(this).addClass('choose'); refreshTypeByProvince(currentProvince); refreshOrderCountB…

js提交数据时需判断是点击事件还是回车键

使用回车键实质还是点击事件==回车时将焦点聚居在某个标签上. Html代码: <div id="btlogin" class="btlogin"></div> 用于提交数据触发的按钮 JavaScript代码: 先判断是否是回车键: //回车键 document.onkeydown = function (e) { if (!e) e = window.event; //火狐中是 window.event ) { var btlogin =…

js动态添加的元素绑定事件

最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断点击了哪个,然后做相应的操作,第二种是通过事件委托的原理来处理,事件委托将一个事件侦听器实际绑定到整个容器,然后在单击它时能够访问每个列表项,这种更高效一些具体的代码实现如下: 第一:onclick <body> <button onclick="AddJob()"&g…

JS 点击事件学习总结

废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在整理一下,方便之后的阅读和复习. 正文片: 1.PC上的点击事件. PC端用户通过鼠标和网页进行互动操作,此时我们用鼠标一类的事件的情况会有许多.因此在PC端我们多用mouse事件或者click事件来进行相关逻辑的编写. 事件的发生依照事件六中的先后顺序来进行的,对于鼠标垫额交互事件来说,事件的先后…

移动WebApp利用Chrome浏览器进行调试

详细的请看这个(HBuilder是我长期使用,而且值得支持的国内前端开发编辑器) http://ask.dcloud.net.cn/article/151 http://ask.dcloud.net.cn/article/69 对于上面教程要注意的问题: 1,不需要考虑run in device问题,因为他们的软件设计改变了. 2,你必须要新建一个“移动App”,我这里的是h5+. 我主要是分析我遇到的问题: 同时,我用的软件是JDK8,SDK 23的版本. 如果出现问题,你自己再重新下载SDK…

Chrome浏览器 Console调试台的简单使用

打开调试台方法1:在chrome浏览器中打开网页,按下F12,点击下图框选内容. 方法2: 浏览器中鼠标右键选择查看网页源代码后,再按上图操作. 调试台的功能 (因为是第一次使用这个调试台,只能罗列一些简单的功能,但用于调试JavaScript代码足够了.) 1.console.log(name); // 作用是在调试台中显示name的值(在js中调用) <script type="text/javascript"> var name='Hbuilder'; conso…

用mac的chrome浏览器调试Android手机的网页

一.参考链接 read chrome remote debugging documentation 调出开发者选项二.设置android 在安卓4.2及更新的版本中,默认情况下,[开发者选项]是隐藏的.要启用[开发者选项],设置 -> 关于手机 -> 版本号,对着版本号点击7次. 设置 -> 开发者选项 -> USB调试三.连接手机和电脑 1.用数据线,mac转接头把android和mac连接起来:2.打开android的chrome浏览器中需要调试的网页:3.打开mac的ch…

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