如何在chrome中实时修改JS

更新日期: 2019-11-19阅读: 2.4k标签: Chrome

有时候,我们需要去研究人家网站的运行机制,这就免不了要在他们的前端脚本里插入一些调试代码看看运行效果。在chrome65以前,我们可以打开目标网页的 开发者工具 — source选项卡— 目标JS/css文件 ,然后在相关位置写入代码保存后即可看到改动后的效果。chrome65之后需要进行本地代码替换,本文就介绍一下如何在chrome中用本地代码替换在线代码,以达到在线修改JS的效果。


首先要确定待修改文件的网络位置:



第二步,在本地创建一个空文件夹,名字随意。


第三步,在上一步的空文件夹中创建和目标文件路径一模一样的文件结构,这一步很关键。请注意,像示例中的xxx.com这种域名也需要创建对应文件夹:



最后,打开Overrides选项卡,导入刚才的空文件夹,你会发现导入的目标文件已经处于激活状态:



刷新页面,效果已经有了:


这种修改方式是持久化的,也就是说,哪怕你关机重启,打开本地替换过的页面,替换效果依然存在,而且你在本地对目标文件做的修改都会同步到页面上,非常好用!


链接: https://www.fly63.com/article/detial/6938

如何创建并发布一个Chrome扩展应用

有没有想过自己创建一个 Chrome 扩展应用?看完这篇文章你将会发现这是多么的简单。按照下面这些步骤,你将会很快地将你的想法实现为真实的应用,并在 Chrome Web Store 上发布。

解决autocomplete=off在Chrome中不起作用的方法

大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为on和off,该属性可省略:省略属性值后默认值为on,也可以省略属性名,直接写入关键字on或off。

一文了解 Chrome 的十年加速历程

自十年前 Chrome 浏览器首次推出后,速度已经成为 Chrome 的四个核心原则之一。我们一直都想让 Web 开发者能够向用户提供快速的、优秀的上网体验。在 Chrome 诞生十周年之际,我们认为回顾在这十年中为提高速度所付出的努力,以及我们接下来要进行的尝试将会是一件非常有趣的事情

chrome 扩展精选推荐

很多扩展功能比较单一,直接用一张图就能很清楚说明它的用途啦。出于篇幅的限制,我在这里会重点介绍一些我个人比较用得上的一些扩展。因为平时前端开发的比较多,所以偏向前端程序员的扩展可能会比较多一些。

Chrome 将引入无边界模式

Chrome 114 默认启用了 CHIPS,这是 Google 通过新的 cookie 属性来淘汰第三方 Cookie 的一部分;Chrome 114 还默认启用了 Popover API,以便更轻松地实现弹框。Chrome 115 中的一些新功能也逐渐被揭晓

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!