解决线上Bug

70 阅读1分钟

线上问题分类:

  • 接口数据导致的
  • 数据正常,代码疏漏

使用sourcemap

soucemap 是一个描述文件,调试工具可以通过这个文件,将构建代码映射成构建之前的文件。

修改webpack配置文件:

const path = require('path')
module.exports = {
 devtool:'source-map'
}

添加生成 source-map 的配置,就会生成 sourcemap 了:

image.png

并且构建后的文件末尾就会出现:

image.png

浏览器会通过 souceMappingURL 获取 sourcemap,获取完成之后就会自动完成映射。

image.png

生产环境,换devtool配置

devtool:'hidden-source-map'

在浏览器中打开构建之后代码文件,然后右键,就可以看到 add sourcemap的选项

image.png

然后填上 soucemap 的路径就可以了。soucemap 的路径和 index.html 相同

image.png

利用线上环境调试本地代码