Chrome线上产品调试技巧

1、使用场景：

这在某些场合下非常有用（只在本机生效），比如：

①对于线上产品的js代码调试，在线编辑js进行调试并预览效果；

②需要修改或替换线上产品的图片/样式/结构时，可以提前进行效果预览；

③参考其他网站某些功能的实现，可以进行js逆向，如：查看解密算法等等；

2、使用方法：

通过chrome浏览器的开发者工具Source -> Override功能来使用该功能：

3、操作步骤：

①本地新建top空文件夹(与Source -> Pages下根目录一致)，在Override选择该文件夹，开启Override，弹窗提示允许

②在Source -> Page 下找到需要修改/替换的文件，单击右键，选择 Save for Override

③修改上一步保存在本地的文件内容并保存，然后刷新页面，修改就会生效

④移除该修改：停用Override，或者将top文件夹移除皆可

注意：

接口的数据也可使用该方法进行调试，在Network面板中选择需要调试的接口右键Save for override，后续步骤一致

4、对比抓包工具与测试环境：

①文件修改/替换这些功能，使用抓包工具也是可以做到的，但是比起抓包工具而言省去了一大堆的配置，更加便捷迅速；

②提前预览，可以说测试环境有这个作用，但是在测试环境出现代码不统一、服务挂了等情况下，可以使用Override这个功能，最主要的是Override要比改测试环境代码更加便捷迅速；