Chrome浏览器下调试和动态修改网页JavaScript

1、js来监控复制粘贴、js监听复制粘贴事件

参见：https://www.cnblogs.com/colima/p/8479310.html

2、移除页面上绑定的事件

实际案例：有些网站（例如CSDN）复制过来的代码后面加上了一下描述信息（作者、版权等信息），每次需要删除，怎么能保证我们粘贴的代码不携带这些信息呢？解决思路：

方法1、找到copy事件在哪里调用的，然后移除这个事件。

方法2、找到copy事件在哪个元素节点调用的，跳出这个节点再复制就不会触发copy事件。

扩展知识：js原生添加和移除事件的方法使用如下

function bodyScroll(event){

event.preventDefault();

}

document.body.addEventListener('touchmove', bodyScroll, false);

document.body.removeEventListener('touchmove', bodyScroll, false);

所以，要移除某个元素上的事件，首先要拿到事件原来的对象。

在chrome上拿到某个事件的listener对象，然后移除，示例如下：

//dom节点：

var dom = $('article.baidu_pl')[0]

//拿到 copy 事件（是一个数组）的listener对象：

var listener = getEventListeners(dom).copy[0].listener

//然后移除该事件：

dom.removeEventListener('copy', listener, false)

//写成一句就是：

$('article.baidu_pl')[0].removeEventListener('copy', getEventListeners($('article.baidu_pl')[0]).copy[0].listener,false)

参考资料：https://segmentfault.com/q/1010000016272581

3、查看页面上绑定的事件

在 Console（Chrome DevTools->Console）执行如下代码即可：

getEventListeners(document) // 获取document上绑定的事件

getEventListeners($('article.baidu_pl')[0]) // 获取某个元素上绑定的事件，

getEventListeners($0) // 获取当前选中元素上绑定的事件（直接在Elements界面上选中想看的元素）

扩展知识：jQuery对象与DOM对象之间的转换

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$("#v"); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：var v=document.getElementById("v"); //DOM对象

var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

Chrome浏览器下调试和动态修改网页JavaScript相关推荐

PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页
PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页最近学习移动端网页开发的时候,遇到了一个问题,如何在真机上看到控制台输出的内容. 虽然现在的桌面浏览器提供了模拟手 ...
Chrome 浏览器客户端调试
Chrome 浏览器客户端调试在开发者界面中,你可以使用打开快捷输入Ctrl + Shift +P运行常用命令. 一.Elements 1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息, ...
Chrome浏览器及调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...
SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
chrome浏览器下“多余”的2px
箭头在调试页面的时候,发现select,input等元素在chrome浏览器下莫名的多了margin:2px,具体看图吧! stackoverflow上的提问中也类似的(应该是margin,好想提问的 ...
动态修改网页title
动态修改网页title //如果在vue项目中在App.vue下的 created() 中输入 document.title = this.$store.state.user.name; //获取存 ...
动态修改网页icon图标
动态修改网页icon图标 //如果在vue项目中在App.vue下的 created() 中输入 var link = document.querySelector("link[rel*= ...
Chrome浏览器开发调试系列(一)
// 计划写一个 Chrome 浏览器以及调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方. // 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更 ...
如何在Chrome浏览器下清除DNS缓存
如何在Chrome浏览器下清除DNS缓存本文翻译自:How to Clear/Flush DNS Cache in Google Chrome? 很多时候,当我购买新的域名,并更改域名服务器并将其托 ...
怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...

Chrome浏览器下调试和动态修改网页JavaScript

Chrome浏览器下调试和动态修改网页JavaScript相关推荐

最新文章

热门文章