前言

1. 还在为web端篡改response、request数据而烦恼吗？
2. 还在为公司内抓包软件不顺手不好用难配置而无奈吗？
3. 还在为来回切换浏览器和抓包工具感到眼花缭乱吗？
4. 还在为打包的js文件是否漏了某个提示而困扰吗？
5. 等等..

基于上述问题。本文，我们就来一起看一下如何进行浏览器本地覆盖调试。

环境

调试环境如下：

• 常用浏览器（Chrome、Safari、Edge）;
• 主机系统（windows、mac）;

Chrome本地覆盖

通过本地覆盖可以模拟接口返回值和响应头，无需mock数据工具，无需等待后端支持，快速复现在一些数据下的BUG等。

步骤如下：

1、进入项目站点。通过F12打开DevTools面板，进入Network板块，右击需要覆盖的XHR请求，选择Override headers或者Override content。

2、如果是第一次点击Override headers或者Override content的时候上方会有Select a folder to store override files in.提示。

3、在本地创建一个文件夹（可随意命名），用于存储覆盖的文件。

4、当文件夹创建好之后，点击Select folder选择创建好的文件夹为覆盖目录，选择了文件目录之后会出现下图提示信息，点击允许即可。

5、我们可以进入Sources板块查看override文件。

当在DevTools中进行更改时，DevTools会将修改后的文件的副本保存到你之前所指定的文件夹中。

当你重新加载页面时，DevTools会提供本地修改后的文件，而不是网络资源。

Chromerequest覆盖

有时候我们需要修改请求头、入参再重新发起请求。可以通过Copy as fetch，在控制台修改请求参数，发起请求。

步骤如下：

1、进入项目站点。导航至Network网络面板，右击一个需要修改请求的XHR请求，可以先点击Fetch/XHR进行过滤。2、点击Copy -> Copy as fetch。3、转到Console面板，cmd + v粘贴。4、修改内容，如url、header、body，然后按回车键即可发起请求。

Chrome快速重新发起请求

在联调接口或者排查BUG的时候，经常需要重新再发一次请求，如果要重新操作一次复杂的交互、重新输入一大堆参数时，这种方式会显得比较麻烦。

这时候我们可以通过Replay XHR来快速重发请求。

步骤如下：

1、进入项目站点。导航至Network面板，右击一个XHR请求，点击Replay XHR即可。

Chrome Override headers覆盖

步骤如下：

1、当我们点击了Override headers之后。即可改写响应头的相关内容。如：Access-Control-Allow-Origin: http://localhost:5173改为Access-Control-Allow-Origin: http://localhost:5175则会出现跨域错误。

当然。在override文件中也能查看以及修改覆盖的相关信息。

如果想覆盖Status Code的话，可能要使用Chrome插件进行编辑覆盖。

‍Chrome插件https://chromewebstore.google.com/detail/ajax-modifier/nhpjggchkhnlbgdfcbgpdpkifemomkpg

2、删除Override headers覆盖时。右击Delete并确认即可进行删除。

Chrome Override content覆盖

步骤如下：

1、当我们点击了Override content之后。即可改写相应内容。

更改前的画面内容如下。更改后的画面内容如下（更改了相关内容后需要保存，否则不生效）。

2、删除Override content覆盖同Override headers一致。

Chrome其他资源覆盖我们不仅能覆盖API相关的响应内容，也可以覆盖其他资源文件内容。如：js、css等。

Edge本地覆盖同Chrome一致

Safari本地覆盖

Safari覆盖相较于Chrome来说比较简单，操作起来也更加方便，没有那么多繁琐的步骤。

步骤如下：

1、进入项目站点。右击检查元素打开面板。点击网络板块。

2、右击需要进行覆盖修改的XHR。点击创建响应本地覆盖。

3、创建覆盖之后即可在来源板块查看已创建好的覆盖，并可以直接修改响应内容。

4、右击创建的覆盖文件并点击编辑本地覆盖。即可修改响应头相关信息（包括状态码）。

5、停用覆盖在来源板块以及网络板块都可进行停用操作。停用之后如想继续进行覆盖还可继续启用覆盖。

6、删除覆盖在来源板块以及网络板块都可进行删除操作。删除之后如想继续进行覆盖则需要重新创建覆盖。

7、创建请求本地覆盖与响应本地覆盖方法类似。这里不做过多阐述。