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

news2025/2/24 5:20:53

文章目录

  • 前言
  • 一、本地替换(local override)能干啥?
  • 二、以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的新特性,其中实现了本地替换的功能,而且用图片资源简单试验了一下,详情资源传送门:
官网详细描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1373724.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

rocketmq实现延迟消息

SpringBoot整合RocketMQ发送延时消息 springboot rocketmq 延迟消息 Windows下RocketMQ安装及可视化界面搭建 Java 客户端 RocketMQ延迟消息 项目背景 项目中有延时消息的需求,综合考量RocketMQ比较适合。 RocketMQ支持多维度的延迟级别 支持多种消息类型 基…

Go模板后端渲染时vue单页面冲突处理

go后端模版语法是通过 {{}} ,vue也是通过双花括号来渲染的,如果使用go渲染vue的html页面的时候就会报错,因为分别不出来哪个是vue的,哪个是go的,既可以修改go的模板语法 template.New("output").Delims(&qu…

【大数据进阶第三阶段之Datax学习笔记】使用阿里云开源离线同步工具DataX 实现数据同步

【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax概述 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax快速入门 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax类图 【大数据进阶第三阶段之Datax学习笔记】使用…

新生儿成长的阳光之钙:补充注意事项指南

引言: 钙是新生儿骨骼发育不可或缺的重要元素,对于宝宝的生长发育起着至关重要的作用。本文将深入探讨钙的功能、补充时机,以及在给新生儿补充钙时应该注意的事项,为小天使们提供最贴心的呵护。 第一部分:钙的重要性与…

基于ssm社区老年人关怀服务系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本社区老年人关怀服务系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数…

Linux系统——测试端口连通性方法

目录 一、TCP端口连通性测试 1、ssh 2、telnet(可能需要安装) 3、curl 4、tcping(需要安装) 5、nc(需要安装) 6、nmap(需要安装) 二、UDP端口连通性测试 1、nc(…

11Spring IoC注解式开发(上)(元注解/声明Bean的注解/注解的使用/负责实例化Bean的注解)

注解的存在主要是为了简化XML的配置。Spring6倡导全注解开发。 注解开发的优点:提高开发效率 注解开发的缺点:在一定程度上违背了OCP原则,使用注解的开发的前提是需求比较固定,变动较小。 1 注解的注解称为元注解 自定义一个注解: package com.sunspl…

保留几位小数的函数、全排列函数、​反斜杠的作用、二进制、八进制、十六进制的输入​、求三角形面积的三种方法、求平方根、N次方如何表示

保留几位小数的函数 方法一&#xff1a; 头文件 #include<iomanip> 格式 cout<<fixed<<setprecision(int n)<<a; 作用&#xff1a;把a保留三位小数 方法二&#xff1a; 还有一种方法&#xff0c;就是用C从C语言保留的printf()方法。 保留二位小数&a…

QML实现的图片浏览器

很久之前实现了一个QWidget版本的图片浏览器:基于Qt5的图片浏览器QHImageViewer 今天用QML也实现一个,功能差不多: ●悬浮工具栏 ●支持图片缩放、旋转、还原、旋转、拖动。 ●拖动图片时,释放鼠标图片会惯性滑动。 ●支持左右翻页查看文件夹中的图片。 ●支持保存图片至本…

低代码的应用场景

Gartner 在 2019 年的低代码调研报告中&#xff0c;曾经绘制过一张用来阐述低代码适用场景的“应用金字塔”&#xff0c;如下图所示&#xff1a; 应用级别划分&#xff1a;从下往上&#xff0c;分别为工作组级(Workgroup Class)、部门级(Departmental Class)、企业级(Enterpris…

【HashMap】结构和底层原理

文章目录 HashMap结构和底层原理 HashMap 结构和底层原理 ​ HashMap 是我们非常常用到数据结构&#xff0c;由数组和链表构成的数据结构&#xff0c;数组里面每个地方都存了 key-value 这样的实例&#xff0c;在Java7叫 Entry 在 Java8 中叫 Node ​ 因为他本身所有的位置都…

模型的权值平均的原理和Pytorch的实现

一、前言 模型权值平均是一种用于改善深度神经网络泛化性能的技术。通过对训练过程中不同时间步的模型权值进行平均&#xff0c;可以得到更宽的极值点&#xff08;optima&#xff09;并提高模型的泛化能力。 在PyTorch中&#xff0c;官方提供了实现模型权值平均的方法。 这里…

李沐-《动手学深度学习》--02-目标检测

一 、目标检测算法 1. R-CNN a . 算法步骤 使用启发式搜索算法来选择锚框&#xff08;选出多个锚框大小可能不一&#xff0c;需要使用Rol pooling&#xff09;使用预训练好的模型&#xff08;去掉分类层&#xff09;对每个锚框进行特征抽取&#xff08;如VGG,AlexNet…)训练…

MYSQL篇--事务机制高频面试题

事务 1 什么是数据库事务&#xff1f; 事务是一个不可分割的数据库操作序列&#xff0c;也是数据库并发控制的基本单位&#xff0c;其执行的结果必须使数据库从一种一致性状态变到另一种一致性状态。事务是逻辑上的一组操作&#xff0c;要么都执行&#xff0c;要么都不执行。…

【sqlite3】sqlite3在linux下使用sqlitebrowser工具实现数据可视化

sqlite3在linux下使用sqlitebrowser工具实现数据可视化 1. ### install sqlitebrowser 1. ### install sqlitebrowser 安装指令 sudo apt-get install sqlitebrowser通过工具打开数据库 sqlitebrowser stereo.db打开效果

HTTPS详解及openssl简单使用

OpenSSL 中文手册 | OpenSSL 中文网 本文介绍https传输协议中涉及的概念&#xff0c;流程&#xff0c;算法&#xff0c;如何实现等相关内容。 HTTP传输过程 HTTP 之所以被 HTTPS 取代&#xff0c;最大的原因就是不安全&#xff0c;至于为什么不安全&#xff0c;看了下面这张图…

Linux第25步_在虚拟机中备份“ST官方的TF-A源码”

TF-A是ARM公司提供的&#xff0c;ST公司通过修改它&#xff0c;做了一个自己的TF-A代码。因为在后期开发中&#xff0c;若硬件被改变了&#xff0c;我们需要通过修改"ST官方的TF-A源码"就可以自己的TF-A代码了。为了防止源文件被误改了&#xff0c;我们需要将"S…

亲测,Chatgpt4.0充值(虚拟卡充值)

一、准备工作&#xff1a; 1、一个ChatGPT3.5账号 2、一张支持ChatGPT4.0的虚拟卡 二、流程【网页版充值】 充值前请先确认以下三点&#xff1a; 1&#xff0c;ChatGPT账户正常登陆。 2&#xff0c;充值过程中始终保持美区环境&#xff0c;且开启全局模式。 3&#xff0…

简洁计算器Python代码

简洁的Python计算器&#xff0c;直接上代码&#xff08;用时10分钟&#xff09;&#xff1a; Python Gui图形化开发探索GUI开发的无限可能&#xff0c;使用强大的PyQt5、默认的Tkinter和跨平台的Kivy等工具&#xff0c;让Python成为你构建应用程序的得力助手。从本机用户界面到…

在 WinForms 应用程序中实现 FTP 文件操作及模式介绍

在 WinForms 应用程序中实现 FTP 文件操作及模式介绍 简介 在许多应用程序中&#xff0c;能够从远程服务器获取文件是一个非常有用的功能。本文将详细介绍如何在 Windows Forms (WinForms) 应用程序中使用 FTP 协议进行文件操作&#xff0c;包括连接到 FTP 服务器、列出目录、…