Chrome Devtool 替换文件以及修改HTTP响应头

Jul 22, 20243 min read

这篇Blog主要是演示如何在Chrome中对静态文件进行替换以及修改静态文件的内容以达到我们想要的效果

如何替换文件?

  • 假如我们现在想要替换 app.ct5wAbo5.js 这个js文件的内容。那么我们只需要右击这个文件然后选择 override content
  • 然后点击 Select Folder
  • 然后允许获得访问权限
  • 然后就会自动在你之前选择的文件夹生成如下目录
  • 同时source下的app.ct5wAbo5.js也会有一个紫色小点,那么就说明替换成功了。
  • 这个时候我们就可以对文件的内容进行修改了,修改完后只需要重新刷新页面即可。
  • 如果不需要对文件进行覆盖了,也非常简单。只需要在source tab 中选择 override,然后点击右边的消除图标即可。

如何重写Http 响应头

  • 想要重写Http响应头也是非常简单的,还是以Vue官网为例子。我们选择要重新的请求,这里以vuejs.orghtml文件为例子。 右键点击该请求,然后选择Override headers
  • 之后我们就可以对响应头进行修改了。只需要对想要修改的响应头进行编辑即可。如果有想要新增的响应头,只需要点击下方的**+ Add header**即可。 如果想要对所有请求都生效,我们可以点击右上方的 .headers
  • .headers 中,我们可以通过Add override rule来添加规则。Apply to是指定生效的范围。
  • 在编辑完**.headers**文件后,我们只需要保存然后重新刷新页面即可。在刷新完后,可以看到以 https://vuejs.org/ 开头的请求都有紫色小点,那么就说明我们的修改生效了。
  • 然后选择对应的请求,可以发现我们的修改已经生效了。

浏览量

最后修改于

Jul 22, 2024
Made withbyFan Chen