使用Fiddler和Sourcemap调试线上vue项目

一般线上vue项目报错大致如下:

都是编译后的js, 无法确定出错位置, 一点点去跟踪实在是影响效率

利用Sourcemap和Fiddler本地代理可以很好的解决这一情况

1 调整打包

使用sourcemap进行线上项目调试, 需要修改打包配置, 在webpack编译后的js中声明sourcemap文件

例如app.xxxx.js尾部会出现:

//# sourceMappingURL=app.0b2023a2.js.map

修改vue.config.js:

export {
  // 其它配置
  productionSourceMap: true
}

打包后的目录中会出现xxx.js.map的文件, 将它们拷贝出来到固定目录并删除

之后项目上线

2 使用Fiddler进行本地代理

下载安装Fiddler, windows用户使用classic版即可

进入AutoResponder选项卡, 勾选和添加规则:

这里可以先打开控制台, 看缺少哪些sourcemap, 就添加一条对应的代理规则即可

例如:

我们就可以创建一条代理:

再刷新页面, 便可以进行调试