一、背景和意义

有时候在排查前端问题、或者快速修改某项内容并验证结果时，需要修改一些请求资源的内容，这个请求资源包括接口数据、HTML、CSS、JS等。让后端同事修改接口数据、或者在本地运行相关前端项目代码固然也是解决方法，但这些方法比较费时，本文列举一些比较便捷的操作技巧。

二、修改接口返回数据

2.1 使用Chrome插件Resource Override

2.1.1 插件安装

在Chrome浏览器中输入链接 chrome.google.com/webstore?ut… 打开Chrome应用商店，搜索Resource Override然后添加该扩展程序：

2.1.2 使用示例

以开源的api管理系统yapi为例，该系统打开“接口列表”功能时，会请求接口/api/interface/list获取接口列表数据：

假设现在需要修改接口返回的某一个字段，看看如果返回数据较长会不会存在显示问题，那么接下来可以打开Chrome的扩展程序Resource Override，点击“Add Rule”，选择“URL -> File”，设置URL为：

https://yapi.pro/api/interface/list?*

其中后面的*表示匹配任何参数，这里记得在list后面加个问号，以避免匹配其他以list开头的接口。接下来点击“Edit File”按钮设置预期要返回的内容，把其中一个字段改长：

设置好之后回到yapi页面操作一下，可以看到页面请求/api/interface/list接口时被重定向到了一段文本，该文本的内容就是之前设置的预期接口返回，然后页面上也出现对应的变化：

2.2 使用Chrome插件Requestly

2.2.1 插件安装

在Chrome应用商店中搜索插件Requestly：

然后添加该扩展程序：

2.2.2 使用示例

还是前面的yapi的例子，这次用Requestly修改请求。打开Requestly扩展程序，选择“Modify API responses”：

接下来创建一个配置，资源类型选择REST API，URL格式选择配置比较灵活的正则表达式格式“RegEx”，然后输入表达式：

/https://yapi.pro/api/interface/list\?.*/

其中前后的“/”表达正则表达式，如果没写该插件也会自动添加，另外要注意的是URL末尾的问号要加转义，然后点“Save”保存：

接下来在yapi的页面上操作一下，得到相同的页面效果：

不过需要注意的是，使用Requestly操作接口返回时，其改变在Chrome的控制台中反映不出来，Chrome开发者工具上展示的接口返回还是修改之前的：

三、修改静态资源返回内容

静态资源包括HTML、CSS、JS，其修改方式都是一样的。

3.1 使用Chrome自带开发者工具

使用Chrome自带的开发者工具时不需要安装任何东西。还是以前面的yapi作为示例，按F12打开Chrome开发者工具之后，操作一下相关yapi页面，让开发者工具监控其网络请求，然后在Network选项卡上键右点击要修改的HTML、CSS、JS，选择“Open in Sources panal”切到Sources选项卡中该资源的位置，或者也可以直接在Sources选项卡中找到要修改的资源的位置。

接下来点击Sources选项卡下的Overrides选项卡：

在本机上创建一个空目录，如yapi_overrides，然后点击overrides选项卡下的“Select folder for overrides”，选择该目录。Chrome会提示访问权限的问题，点击“允许”即可：

接下来会看到该目录：

然后可以回到“Page”选项卡下修改静态资源的内容，比如加上一行代码：

然后右击该资源，选择“Save for overrides”：

保存之后刷新yapi页面，可以看到修改的代码生效了：

另外在本机刚刚创建的目录中，也看到了该页面保存成的文件：

如果觉得Chrome开发者工具中改代码不方便，使用其他开发工具直接编辑本地上的该文件也可以。

3.2 使用Chrome插件Resource Override

Chrome插件Resource Override的安装在2.1.1中已经介绍，这里不再重复。对于前面的yapi的例子中，打开Resource Override插件之后，设置URL为：

https://yapi.pro/project/57108/interface/api

然后点击“Edit File”，复制页面的HTML源码，做一下修改，如增加一段代码，且Syntax设置成对应的格式以方便在修改时检查有无语法错误：

保存之后，回到yapi页面上刷新一下，可以看到修改的代码也生效了：