调试 Web 页面时如何替换请求响应结果

开发 js sdk 项目的时候，经常会希望快速检查我们的改动在真实场景中的表现。我们不可能直接更新到生产环境，于是很多人会考虑配置代理，并替换响应内容。

但代理配置起来并不方便，比如在 ios/android 真机上开关代理需要手动输入ip、端口。我们还有一些更便捷的方法：

1. Chrome local overrides
2. Safari 响应本地覆盖
3. Android 远程调试
4. iOS 远程调试

1 Chrome local overrides

Chrome dev tools 允许我们替换请求的响应内容，操作非常简单：

1. 打开 dev tools 的 Sources 功能
2. 在 Page tab 中右键单击希望替换的内容
3. 点击 Save for overrides，会要求你提供一个目录供保存 local overrides 文件
4. 前往 Overrides 选项卡即可查看、编辑创建的 local overrides
5. 编辑完成记得保存，刷新页面生效

注意被 local overrides 覆盖的响应，图标上会出现一个紫色的小圆点。

2 Safari 响应本地覆盖

Safari 上也有相同的功能：

1. 打开 Safari 开发者工具的 source 功能
2. 左侧资源列表中，在想要替换的资源上右键单击，选择创建响应本地覆盖
3. 在上面会出现一个新的“本地覆盖”栏目，点击即可在右侧区域查看、编辑
4. 同样的，保存并刷新后生效

3 Android 远程调试

和在桌面端一样，Android 设备上打开的 Web 页面也可以用一样的方法替换资源：

1. 用数据线或者网络，将待调试设备连接上 adb
2. 电脑上 Chrome 访问 chrome://inspect 页面
3. 如果连接正常，此时页面上应该会列出所有可调试页面，点击对应页面下的 inspect 按钮
   1. 请确保待调试应用在前台
   2. 如果待调试页面是 app 内的 webview，请确保 app 是 debug build
4. 后续操作和前文一样

4 Safari 远程调试

同样的，iOS 设备也可以用这种方式在远程调试时替换资源，但有一些额外的前提条件。

1. iOS 版本升级到 16 以上，因为 iOS 16 给 WKWebview 和 JSContext 新增了一个 inspectable 属性，允许真机远程调试 web 内容。在这之前只有本地构建的版本才能调试，门槛太高
2. 如第一点所述，需要客户端在构建 debug 版时，启用 webview 的 inspectable 属性

满足前提条件后，只需要把设备连线到 Mac 上，点击“开发” -> “设备名” -> “待调试 web 页面” 即可。

Safari 远程调试有的时候刷新不出设备，解决起来有点玄学。基本就是重启 Safari、重启 App、重启手机、重启电脑挨个试一遍，没发现啥规律。

对比代理

本地覆盖和代理两种方案互有优劣，因此也有各自的适用场景：

代理：

• 可以共享给其他非技术人员，设置中配置代理服务器即可
• 适合用于建立小范围的共享体验环境

本地覆盖：

• 无需任何配置，连线即可，编辑简单
• 适合开发者个人本地开发、调试