前端线上环境调试

背景

业务出现线上bug，但因业务复杂性，线下不能复现。线上代码被压缩混淆，也不能通过source进行线上调试。

目标

实现目标环境的本地代码调试，对线上bug进行快速定位。

解决方案

在特定的域名环境调试或者验证当前的修改的代码，使用 Chrome 插件 XSwitch

在 XSwitch 中配置资源转发规则

{ 
  "proxy": [
    // 数组的第 0 项的资源会被第 1 项目替换
    [
      "https://www.myproject.com/index.2c8a11df.js",
      "http://127.0.0.1:8000/index.js"
    ], 
    // 使用正则可以方便处理分包情况下 js 资源的加载 
    [ 
      "https://www.myproject.com/(.*.js)", 
      "http://127.0.0.1:8000/$1",
    ], 
    // 如果需要验证视觉表现，不要忘记替换 css 资源 
    [ 
      "https://www.myproject.com/index.ae8b11e0.css", 
      "http://127.0.0.1:8000/index.css" 
    ],
    [
      "https://upm-saas.xiaojukeji.com/(.*.css)",
      "http://127.0.0.1:8011/$1",
    ]
  ]
}

原理

原理其实很简单，就是通过 chrome.webRequest API 来对请求进行劫持，对请求的 requestHeaders 、 responseHeaders 、 redirectUrl 这些进行更改。这样做的好处比通过以前我们常用的 Server 转发模式更方便可靠，并且也能很好的避开 HTTPS 、 Cookie  等各种问题。而且性能也有保障，也不用担心任何数据安全问题。

注意

1. 代理到本地的，推荐写 127.0.0.1 而不是 localhost 。HTTPS 下的页面访问了 http://127.0.0.1 的资源，不会被安全策略拦截。