线上如何像本地一样debug

我之前犯了一个愚蠢的错误：比如我想像在本地debug一样debug线上的页面，直接写上代理如下：

https://www.360kuai.com http://dev.360kuai.com:57824

但是这样跟

https://www.360kuai.com  www.baidu.com

有啥区别？

原本的方案：

// devServer
writeToDisk(curPath) {
return onlineDebug ? true : ...
}

// webpack plugin 这里虽然有现成的配置可用 但是不知道为什么无论怎么配置 总是会在原来的基础上生成一个新的sourcemappingUrl 两个URL并存根本没用
const ReplacePlugin=require('./replace_sourcemap_url');
new ReplacePlugin()

// replace_sourcemap_url 把生成的sourceMappingURL改为本地的地址

const RawSource = require('webpack-sources').RawSource;
const path = require('path');
const fs=require('fs');

const pathPrefix = `file://${path.resolve(__dirname, '../public/static')}`;

module.exports = class ReplacePlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('ReplacePlugin', (compilation, cb) => {
      const reg = /sourceMappingURL=[^/]+.map$/;
      const files = compilation.getAssets();
      for (const file of files) {
        try {
          if (/.js$/.test(file.name)) {
            const _path = `sourceMappingURL=${pathPrefix}/${file.name}.map`;
            if(pathPrefix.includes('jenkins/workspace')){
              break;
            }
            const content=file.source.source();
            compilation.updateAsset(
              file.name,
              new RawSource(content.replace(reg, _path))
            );
          }
        } catch (err) {
          console.log(err, 'err');
        }
      }
    });
  }
};

在上面的代码中，我把线上源文件的sourceMappingURL改成了本地的map文件所在的地址，以为这样既能做到利用了source map功能又不会让别人看到，但实际上是，这样做只能对自己有用，因为路径都是自己电脑上的，对别的同事就没用了。 虽然但是，可以把路径改成仅仅内网可访问的吧： 总结就是：

• sourcemap上传到仅仅内网可访问的cdn
• 生成的sourcemapurl加上publicpath为该cdn 但是这样的话怎么能在本地边改，边同步线上呢？writetodisk也没意义了。。。想边改边看还是得靠whistle。。。 或者说sourceMap的映射修改应该放在浏览器发起请求的时候而不是打包的时候。