chrome浏览器的【Overrides】功能

前言

想要修改现网的一些小功能,但是又不想走改代码、提工单、审批。。。等烦人的流程,这时候Overrides功能就体现出它强大的功能了,当然只限于本地的浏览器。但不是真正的修改远程服务器的文件

如何使用Overrides功能

在自己电脑创建一个空文件夹,用来保存接下来想要重写的js文件

打开想要调试网站的浏览器控制台,切换到Sources栏,点击更多工具,选择Overrides选项卡,点击选择选择overrides文件夹,会弹出选择文件夹窗口,选择步骤1创建的文件夹,之后会弹出文件夹访问权限,选择允许即可

然后返回到Page选项卡,选择想要重写的js文件,右键选择保存到overrides,这时候就会发现之前创建的overrides文件夹里已经有了刚才保存的文件夹

点击代码美化,就可以在操作栏里去进行代码编辑了,操作完直接Ctrl+S保存就可以了

这时候Network选项卡会有黄色警告,提示可能会存在本地重写,想要取消也很简单,直接在Sources选项卡将重写关闭即可,关闭之后Network警告会消失

总结

  1. 此办法可以避免一些小功能再次上线,如果前端上线需要各种流程的话可以尝试这种办法应急一下
  2. 可以作为线上环境断点调试,可扩展性更强,比单纯的打断点更好
  3. 功能可以随时关闭

缺点

  1. 只能作为临时方案使用,毕竟不能覆盖所有人,修改也只是在当前电脑生效
  2. 代码是混淆后的,修改可能会带来一些未知的风险,需要看懂前后的逻辑关系才不会出错
  3. 新功能上线后文件的contenthash会改变,本地修改的文件就作废
相关推荐
kyriewen114 分钟前
为什么我的代码在测试环境跑得好好的,一到用户电脑就崩?原来凶手躲在地址栏旁边
开发语言·前端·javascript·chrome·ecmascript·html5
小北方城市网23 分钟前
JavaScript 实战 —— 实现一个简易的 TodoList(适合前端入门 / 进阶)
开发语言·前端·javascript
是上好佳佳佳呀24 分钟前
【前端(二)】CSS 知识梳理:从编写位置到选择器优先级
前端·css
倾颜1 小时前
我是怎么把单 Tool Calling 升级成多 Tool Runtime 的
前端·后端·langchain
清汤饺子1 小时前
Superpowers:给 AI 编程 Agent 装上"工程化超能力"
前端·javascript·后端
踩着两条虫1 小时前
AI驱动的Vue3应用开发平台 深入探究(十三):物料系统之区块与页面模板
前端·vue.js·人工智能·架构·系统架构
weixin199701080161 小时前
《得物商品详情页前端性能优化实战》
前端·性能优化
帮我吧智能服务平台1 小时前
装备制造企业售后服务数字化:从成本中心到利润中心背景
java·前端·制造
qq_368019661 小时前
用 react 的react-syntax-highlighter 实现语法高亮、行号与多行错误行高亮
前端·react.js·前端框架
lbh1 小时前
从LLM到Agent的核心概念
前端·openai·ai编程