前端本地覆盖资源(local override)调试

文章目录

  • 前言
  • [一、本地替换(local override)能干啥?](#一、本地替换(local override)能干啥?)
  • [二、以CSDN为例 实践一波](#二、以CSDN为例 实践一波)
  • 总结

前言

Chrome 65 中的开发者工具将包含以下新功能:

本地替换

新的无障碍工具

更改标签页

新的搜索引擎优化 (SEO) 和性能审核

Performance 面板中的多个录制内容

使用 worker 和异步代码执行可靠的代码单步调试

本篇文章主要学习与实践下本地替换这个功能


提示:以下是本篇文章正文内容,下面案例可供参考

一、本地替换(local override)能干啥?

简单的概括下,部署上线的网站,打开后我们可以用本地的资源覆盖网站指定的图片资源,Css样式,Js代码,Api请求。刷新浏览器后,优先走本地的资源,达到调试线上部署好的网站的目的。

二、以CSDN为例 实践一波

  • 1.F12 打开要调试的网站。

  • 2.在source Tab 找到 override 功能,select a folder 选择一个存在本地资源的目录

  • 3.第一次弄时,会弹出是否允许写入的权限验证,我们点击Allow (允许)

    进行上述3步后,准备工作就差不多了(前提条件Chrome 浏览器版本 Chrome 65 ,没有这个功能,可以更新下Chrome浏览器)

替换图片资源

在network,找到想替换的图片资源,右键打开选择 **Save for override ** 保存一份到本地覆盖

在override 下面就可以看到多一个项目文件名的图片,替换这个图片,然后刷新浏览器

替换调试的图片,然后再次刷新

发现替换成功

类似以上操作还可以替换js资源,css资源。达到调试js代码,css代码的目的


总结

简单介绍了Chrome 65的新特性,其中实现了本地替换的功能,而且用图片资源简单试验了一下,详情资源传送门:
官网详细描述

相关推荐
lichenyang4539 小时前
鸿蒙项目首页启动链路与 ArkUI 架构学习总结
前端
ssshooter9 小时前
Tauri 应用首次上架 App Store 被驳回了 3 次(iOS)和 12 轮(macOS)的经历
前端·ios·程序员
阿祖zu9 小时前
2026 企业级 Agent 产品落地思考与全流程指南
前端·程序员·aigc
yqcoder9 小时前
拆解互联网:通俗易懂的网络分层模型
前端·网络·网络协议
小鹿软件办公9 小时前
Mozilla 解释 Firefox 在英特尔 Raptor Lake 系统上的崩溃问题
前端·firefox
代码熊崽的编程森林10 小时前
vue + onlyoffice 自定义插件的实现(OnlyOffice 插件:AI 智能编辑)。
前端·javascript·vue.js
Lucky_Turtle10 小时前
【Vue】element plus Slider小数组件设置顺滑程度
前端·javascript·vue.js
Bigger10 小时前
🔥 一份 Agent 工程岗 JD,暴露了市场真正想要什么样的人
前端·agent·全栈
我头上有犄角ovo10 小时前
我在微信小程序里手搓人脸识别引导,结果被“右转头”和“手遮脸”教育了
前端
David_Xia10 小时前
干爆 11s 提交卡顿!引入 Rust 级 oxlint 彻底拯救团队 Git Commit 噩梦的重构实践
前端