点击这里了解 Overrides 线上调试，在本地复现线上问题更简单！

在开发web端项目时，相信很多小伙伴都有过这样的经历，有些BUG在本地测试环境能复现，线上环境却怎么都复现不出来，这种BUG无疑会增加BUG Fix的难度和时间成本，这里给大家推荐一个简单粗暴的方法，利用Chrome浏览器自带的Overrides功能，通过复现线上环境的问题，从而找出并Fix BUG。

什么是 Overrides？

Overrides 是一种浏览器调试技术，它允许开发者在本地环境中模拟线上环境，从而可以在本地环境中复现和调试线上环境中出现的BUG，通常用于解决一些难以在本地环境中复现的BUG。

如何在 Chrome 浏览器中使用 Overrides？

1. 打开 Chrome 浏览器，访问有问题的网站。
2. 打开 Chrome 开发者工具（按 F12 键或右键单击并选择“检查”）。
3. 在开发者工具中，选择“网络”选项卡。
4. 在“网络”选项卡中，找到你要调试的请求，右键单击并选择“复制”。
5. 在开发者工具中，选择“Overrides”选项卡。
6. 在“Overrides”选项卡中，粘贴你复制的请求。
7. 在“Overrides”选项卡中，选中你粘贴的请求。
8. 点击“Override”按钮。

Overrides 的使用技巧

1. 在使用 Overrides 时，建议使用与线上环境相同的浏览器版本。
2. 在使用 Overrides 时，需要确保本地环境的网络环境与线上环境的网络环境一致。
3. 在使用 Overrides 时，可以尝试修改请求的请求头、请求体、Cookie 等信息，从而模拟不同的请求条件。

Overrides 的局限性

Overrides 虽然可以模拟线上环境，但它并不是万能的，它无法模拟所有的线上环境，比如一些涉及到安全性的请求，Overrides 就无法模拟。

使用 Overrides 进行线上调试的步骤

1. 在本地环境中复现问题。
2. 在 Chrome 浏览器中打开开发者工具。
3. 在开发者工具中，选择“网络”选项卡。
4. 在“网络”选项卡中，找到你要调试的请求，右键单击并选择“复制”。
5. 在开发者工具中，选择“Overrides”选项卡。
6. 在“Overrides”选项卡中，粘贴你复制的请求。
7. 在“Overrides”选项卡中，选中你粘贴的请求。
8. 点击“Override”按钮。
9. 重新加载页面，看看问题是否依然存在。
10. 如果问题仍然存在，则继续修改请求的请求头、请求体、Cookie 等信息，直到问题消失。
11. 一旦问题消失，则可以确定问题的原因所在。
12. Fix BUG。

结语

Overrides 是一个非常有用的调试工具，它可以帮助开发者快速复现和调试线上环境中的BUG，从而提高BUG Fix的效率。