Chrome 开发者工具 第二十一章(替换 Web 内容和 HTTP 响应)

这篇具有很好参考价值的文章主要介绍了Chrome 开发者工具 第二十一章(替换 Web 内容和 HTTP 响应)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Chrome 开发者工具的本地替换功能是一个强大的工具,它允许开发者在不修改服务器代码的情况下模拟前端更改。这个功能特别适用于那些需要快速测试前端更改,但又不想或不能等待后端更新的情况。

本地替换的工作原理

本地替换通过在开发者工具中进行更改,并将这些更改保存到指定的本地文件夹中,从而模拟远程资源。当页面重新加载时,开发者工具会提供修改后的本地文件,而不是来自网络的资源。这意味着你可以实时看到更改的效果,而不必等待后端的支持。

限制

本地替换设置适用于网络响应标头和大多数文件类型(包括 XHR 和提取请求),但有以下几种例外情况:

  • 启用本地替换后,系统会停用缓存。
  • 开发者工具不会保存对 元素 面板的 DOM 树所做的更改。
  • 如果您在 样式 窗格中修改 CSS,并且该 CSS 的来源是 HTML 文件,则开发者工具不会保存更改。

不过,您可以在来源面板中修改 HTML 文件。

设置本地替换

要开始使用本地替换,需要在开发者工具的 “网络” 面板中选择一个请求,然后选择替换内容或替换标头。
这里以替换 XHR 或 Fetch 请求的响应数据为例,右击要替换的请求,选择“替换内容”
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http
如果你还没有设置本地替换文件夹,开发者工具会提示你选择一个文件夹来存储替换文件,我们选择任意文件夹
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http
选择文件夹后,需授予相应的访问权限
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http

替换响应内容

一旦设置了本地替换,你就可以在 “源代码/来源” 面板中更改网页内容,并且这些更改会被保存。
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http
点击“替换内容”后,会跳转到“源代码/来源”-“替换”窗格,这里可以任意修改要返回的响应内容
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http
保存后,刷新页面,在网络面板的响应窗格中可以看到我们自定义的响应内容
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http

本地替换还可以用来模拟某一网络文件。这里以css文件为例:
在网络面板中,右击demo.css文件,选择“替换内容”
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http
我们将.header的背景色改为#ccc
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http

删除本地更改

在“源代码/来源”面板的“替换”窗格中,右击要删除的文件,选择“删除”即可。
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http

替换 HTTP 响应标头

此外,你还可以替换 HTTP 响应标头,这对于测试跨域资源共享 (CORS)、权限策略和跨域隔离等问题非常有用。你可以在 “网络” 面板的 “标头” 选项卡中编辑响应标头。
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http

跟踪本地更改

所有在开发者工具中所做的更改都可以在 “源代码/来源”-“替换” 抽屉式导航栏标签页中跟踪。这使得管理和审查你的更改变得非常方便。
谷歌浏览器关闭开发者模式 内容替换还生效吗,Chrome开发者工具,前端,chrome,http

结论

本地替换是一个非常灵活的功能,它可以帮助开发者在不影响生产环境的情况下测试和原型设计前端更改。通过模拟后端支持和响应,开发者可以更快地迭代和优化用户体验,同时减少对后端资源的依赖。文章来源地址https://www.toymoban.com/news/detail-836738.html

到了这里,关于Chrome 开发者工具 第二十一章(替换 Web 内容和 HTTP 响应)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第二十一章 Classes

    类定义并不是 ObjectScript 的正式组成部分。相反,可以在类定义的特定部分中使用 ObjectScript (特别是在方法定义中,可以在其中使用其他实现语言)。 每个 IRIS 类都有一个名称,该名称在定义它的命名空间中必须是唯一的。完整的类名是由一个或多个句点分隔的字符串,如

    2024年02月09日
    浏览(37)
  • 第二十一章

    计算机应用实现了多台计算机间的互联,使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序,这些程序借助于网络协议,相互之间可以交换数据。编写网络应用程序前,首先必须明确所要使用的网络协议。TCP/IP协议是网络应用程序的

    2024年02月04日
    浏览(51)
  • 第二十一章 Unity 光源

    光源是每个场景必不可少的部分,光源除了能够照亮场景之外,还可以产生阴影效果。 Unity中分为四种 光源类型 : 1. 方向光:Directional Light 用于模拟太阳光,方向光任何地方都能照射到。 2. 点光源:Point Light 用于模拟电灯泡的照射效果。 3. 聚光灯:Spot Light 用于模拟聚光灯

    2024年02月16日
    浏览(46)
  • 第二十一章网络通信

    网络程序设计基础 局域网与互联网 为了实现两台计算机的通信,必须用一个网络线路连接两台计算机。如下图所示  网络协议 1.IP协议 IP是Internet Protocol的简称,是一种网络协议。Internet 网络采用的协议是TCP/IP协议,其全称是Transmission Control Protocol/Internet Protocol。Internet 依靠

    2024年02月05日
    浏览(37)
  • 【Three.js】第二十一章 Physics 物理

    物理是WebGL可以添加到项目体验中最酷的功能之一。人们喜欢真实物理感的物体,看到它们碰撞、倒塌、坠落和弹跳,就像我的作品集一样: https: //bruno-simon.com/ 有很多方法可以将物理功能添加到您的项目中,这取决于您想要实现的目标。您可以使用一些数学和解决方案(例

    2024年02月09日
    浏览(36)
  • 第二十一章 : Spring Boot 集成RabbitMQ(五)

    第二十一章 : Spring Boot 集成RabbitMQ(五) 前言 本章知识点: 如何保证消息100%可靠性发送的技术解决方案。 一、 应用场景 在使用消息队列时,因为生产者和消费者不直接交互,所以面临下面几个问题: 1)要把消息添加到队列中,怎么保证消息成功添加? 2)如何保证消息

    2024年02月03日
    浏览(42)
  • UCB Data100:数据科学的原理和技巧:第二十一章到第二十六章

    原文:SQL II 译者:飞龙 协议:CC BY-NC-SA 4.0 学习成果 介绍过滤组的能力 在 SQL 中执行数据清理和文本操作 跨表连接数据 在本讲座中,我们将继续上次的工作,介绍一些高级的 SQL 语法。 首先,让我们加载上一堂课的数据库。 HAVING 通过在每个组的所有行上应用一些条件来过

    2024年01月21日
    浏览(178)
  • 第二十一章行为性模式—访问者模式

    行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式: 类行为模式:采用继承机制来在类间分派行为 对象行为模式:

    2024年02月07日
    浏览(43)
  • 在Chrome(谷歌浏览器)中安装Vue.js devtools开发者工具及解决Vue.js not detected报错

    提示:先安装谷歌助手的原因是:不安装谷歌助手无法打开谷歌应用商店,导致无法下载Vue.js devtools开发者工具。

    2024年02月15日
    浏览(71)
  • 第二十一章 Prim算法与Kruskal算法(通俗证明与详细讲解)

    我们先解释一下什么是最小生成树。 这个概念是基于图的,如果说存在一条路线串通起来了所有的点,那么这条路线就叫做生成树。而在这些路线中最短的那一条就叫做最小生成树。 如上图所示,图中的红色路线就是一个生成树,假设这条红色路线是众多生成树路线中最小

    2024年02月11日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包