✨Chrome DevTools 使用指☞北 - 来源面板之在本地替换 Web 内容和 HTTP 响应标头 🔔

工作原理 🌈

• 当您在 DevTools 中进行更改时，DevTools 会将修改后的文件的副本保存到您指定的文件夹中。
• 当您重新加载页面时，DevTools 会提供经过修改的本地文件，而不是网络资源。

限制 🌈

本地替换项适用于网络响应标头和大多数文件类型（包括 XHR 和提取请求），但有两个例外情况：

• 启用本地替换项后，缓存将被停用。
• 开发者工具不会保存对 Elements 面板的 DOM 树所做的更改。
• 如果您在 Styles 窗格中修改 CSS，并且该 CSS 的来源是 HTML 文件，则开发者工具不会保存更改。

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

设置本地替换项 🌈

• 打开演示链接：seleniumbase.io/coffee/

• 步骤：

  1. 打开 DevTools，前往 Network 面板，右键点击要替换的请求，然后从下拉菜单中选择替换标头或替换内容。

     

  2. 如果您尚未设置本地替换项，DevTools 会在顶部的操作栏中提示您执行以下操作：

     1. 选择用于存储替换文件的文件夹。

        

        

     2. 点击允许以向 DevTools 授予对该应用的访问权限。

        

        

• 停用本地替换文件或删除所有替换文件，然后取消选中 ✅ Enable Local Overrides（启用本地替换） 复选框，或点击 🚫 Clear

  

• 如需删除单个替换文件或文件夹中的所有替换文件，请在 Sources 中右键点击相应文件或文件夹，选择删除

  

  

替换 Web 内容 🌈

替换 CSS 文件 🎈

• 可以编辑没有处于 HTML 中的 CSS 文件

• 打开演示链接：seleniumbase.io/coffee/

• 步骤：

  • 选中你想要修改的元素

    

  • 修改背景颜色

    

  • 之后点击 css 链接，如果请求文件的地址是本地已替换的内容，在文件图标上会有一个紫色图标

    

  • 会发现本地 css 文件被同步替换

    

替换 XHR 请求内容 🎈

• 打开演示链接：seleniumbase.io/coffee/
• 步骤：

  • 选择 Fetch/XHR 图标，找到 list.json 文件

    

  • 右键选择替换内容

    

  • 选中你想要修改的内容，之后修改为 Anita Sun，保存文件，刷新页面

    

  • 会发现页面上的内容发生变化

    

跟踪本地更改 🎈

• 在 Sources（源代码/来源） > Overrides（替换） 中，您可以右键点击已保存的文件，然后从上下文菜单中选择 Open in containing folder（在包含此文件的文件夹中打开）。此操作会打开您在覆盖设置过程中选择的文件夹。您可以在其中使用自己喜爱的代码编辑器修改文件

  

  

替换 HTTP 响应标头 🌈

• 打开演示链接：cors-demo-devtools.glitch.me/

• 步骤：

  • 打开之后，会有 CORS 错误

    

  • 转到网络，找到相应请求，右键点击该请求，然后选择替换标头。此时，DevTools 会打开 Headers（标头）> Response Headers（响应标头）编辑器

    

  • 添加 Access-Control-Allow-Origin: * 标头以消除 CORS 错误。Network 面板以绿色突出显示修改后的标头，以红色且带有删除线的已移除覆盖项突出显示。

    

  • 刷新界面以应用更改。Headers 标签页会显示一个紫点图标和提示，告知您标头已被替换。

    

修改所有相应标头替换项 🎈

要在一个位置修改所有标头替换项，请执行以下操作：

1. 点击响应标头部分旁边的   .headers。

   

2. 点击 添加替换规则

   

   

3. 修改替换规则

   

4. 使用 Command/Control + S 保存 .headers 文件。刷新页面以应用更改。