首页/文章/javascript

作为前端开发，如何调试线上代码

2024-08-19

1837 字约 7 分钟

...

学习

发布以后，线上报错了，咋办？有没有很恐慌？

每次上线都战战兢兢得生怕出错，又得搞到凌晨一两点，烦死了？这是不是你的现状？作为一名资深程序员，我深知大家得不容易，所以今天奉上一本解决现场问题得法宝。具体如下：

（方法千变万化，没有最好，只有更好，如果大家有更好得办法可以在评论区共同探讨，共同成长，谢谢！）

上线以后，为什么会出现问题？

问题来源有2种：

1.现场数据更加复杂，在uat测试阶段，由于数据相对比较简单，测试人员得临界值设定得并不准确，导致bug没有找出来。

2.前端代码有问题，在测试的时候没有测试出来，发布以后发现了。

解决办法：

第一：假设这就是后端数据问题，我们需要用一个chrome 插件: Ajax-intercetion

下载：直接执行

git clone https://github.com/YGYOOO/ajax-interceptor.git

下载下来以后，直接拉进chrome的插件里面就好了，当然你也可以从chrome 的插件商店里面直接下载，我的window10的chrome的插件商店被拦截了，进不去，只能从仓库里面获取。不管从哪里获取，拿到就好，无需较真。最后你可以得到如图所示的标志：

1.把需要拦截的接口地址输入ajax-interceptor的 url 的设置里面，然后刷新页面，触发相关功能。

2.在chrome的devtool里面的network里面找到相关接口的数据，直接ctrl+A复制response

3.把上面复制好的响应数据放到 ajax-interceptor 的 replace Response with 里面，然后把你觉得异常数据找到，改成合理的数据，然后触发相关功能，你修改后的数据就会展示到页面上。此时就能断定是不是数据问题了。

如果你不会用，没有关系，我为大家找了一个说明视频，大家可以点进去看看：

weibo.com/tv/show/103…

4.经过我们一系列的骚操作，终于发现不是数据问题呀，有没有想死的心都有了？

第二：现在断定一定是代码的bug，可是线上错误指向的是一个压缩文件呀，咋办？

想解决个bug，咋就这么难呢？心里喷涌而出的草泥马，算了，不抱怨了，为了早点下班，还是老老实实想一下解决办法，才是正事，你说对不对！我也不兜圈子了看下面。

线上无法调试的根本原因就是没有 suorcemap 呗，说白了就是打包的时候我们配的是 hidden-source-map，而不是source-map，他们的区别是啥？

首先 hidden-source-map 和 source-map 在打包的时候都会产生一个 .map 文件，而且他们处理后的文件大体是一样的，唯一的区别就是source-map处理后的文件下面多了一行代码，如图所示：

我做了个测试代码，一个用source-map打包，一个用hidden-source-map打包，具体可以看：juejin.cn/post/738022… 结果如下

用http-server将他们同时启动

进入页面看看

明显他们的目录访问目录不一样，是不是？解决问题的根本就是把index.js和index.js.map用 //# sourceMappingURL=index.js.map关联在一起，他们就能找到源码了，我们就可以欢乐的调试它了，对不对？

方法1.利用chrome的 add sourcemap 功能，如下：

设置add sourcemap的文件的时候，你可以连本地的，反正是对应的.map文件就好了，如果没有出来，一定是你的地址不对，赶紧改路径吧。

此时8081的页面和8082的页面就一摸一样了，你是不是就可以开心的调试了呢，一眼看过去就能知道，线上到底是哪一行在报错。

方法2.手动映射

1.在项目里面安装source-map库

npm i source-map -D

2.在项目里面建立一个source.js文件

只需要修改红框的地方即可，操作如下：

const { SourceMapConsumer } = require('source-map')
const fs = require('fs')

const rawSourceMap = fs.readFileSync('./dist/index.js.map', 'utf-8')


originalPositionFor('index.js:1:161')

function originalPositionFor(errInfo) {
  const [budleName, line, column] = errInfo.split(':')

  SourceMapConsumer.with(rawSourceMap, null, (consumer) => {
    const originalPosition = consumer.originalPositionFor({
      line: parseInt(line),
      column: parseInt(column),
    })

    console.log('bundle name = ', budleName)
    console.log('original position = ', originalPosition)
  })
}