线上出bug了？别怕，这么定位！

greatwhole 发布于2019-08-23 17:54 / 1945人阅读

摘要：由于现在构建工具盛行，前端部署的代码都是经过编译，压缩后的，于是乎，就扮演了一个十分重要的角色，用来作为源代码和编译代码之间的映射，方便定位问题。源代码的标识，如果无法获取，返回。

摘要： Source Map还是很神奇的。

原文：线上出bug了？别怕，这么定位！

公众号：前端小苑

Fundebug经授权转载并修改，版权归原作者所有。

工作中，生产环境代码是编译后代码，搜集到报错信息的行和列无法在源码中对应，很多时候只能靠“经验”去猜，本文针对这种情况，开发了一个npm命令行小工具，帮助快速定位报错的源码位置，提升效率。

由于现在构建工具盛行，前端部署的代码都是经过编译，压缩后的，于是乎，SoueceMap就扮演了一个十分重要的角色，用来作为源代码和编译代码之间的映射，方便定位问题。

测试SourceMap功能

首先全局安装reverse-sourcemap

npm install --global reverse-sourcemap

选择编译后的代码进行测试，下面是vue项目编译生成的代码。

在命令行执行命令，将main.js反编译回源码，并输出到sourcecode目录下。

reverse-sourcemap -v dist/main.a8ebc11c3f03786d8e3b.js.map  -o sourcecode

上面是执行命令输出的sourcecode目录，生成的目录结构和源码目录一致，打开一个文件，和源码做下对比：

可以看出，反编译出的代码无论目录结构还是具体代码都和源码一致。

生产环境代码报错如何定位源码位置

如果使用了Fundebug的Source Map功能的话，则可以很方便的定位出错位置：

如果没有使用监控工具的话，生产环境的代码，经过压缩、编译，很不利于Debug。针对这个问题，需要准备一份生产环境代码的map文件，为了方便，可以在项目的package.json增加debug命令用来生成map文件。这条命令除了开启sourcemap，其他的具体webpack配置和生产环境配置相同。

    "scripts": {
        "start": "vue-cli-service serve --mode dev",
        "stage": "vue-cli-service build --mode staging",
        "online": "vue-cli-service build",
        "debug": "vue-cli-service build --mode debug"
    }

有了map文件，通过SourceMap提供的API就可以定位到源码的位置。下面是实现的核心代码。

// Get file content
const sourceMap = require("source-map");
const readFile = function (filePath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(filePath, {encoding:"utf-8"}, function(error, data) {
      if (error) {
        console.log(error)
        return reject(error);
      }
      resolve(JSON.parse(data));
    });
  });
};

// Find the source location
async function searchSource(filePath, line, column) {
  const rawSourceMap = await readFile(filePath)
  const consumer = await new sourceMap.SourceMapConsumer(rawSourceMap);
  const res = consumer.originalPositionFor({
    "line" : line,
    "column" : column
   });
   consumer.destroy()
  return res
}

最重要的就是使用SourceMap提供的 originalPositionFor API。 SourceMapConsumer.prototype.originalPositionFor(generatedPosition)

originalPositionFor API的参数为一个包含line和column属性的对象
line 编译生成代码的行号，从1开始
column 编译生成代码的列号，从0开始
这个方法会返回一个具有以下属性的对象

{
    "source": "webpack:///src/pages/common/403.vue?c891", // 源代码文件的位置,如果无法获取，返回null。
    "line": 4, // 源代码的行号，从1开始，如果无法获取，返回null。
    "column": 24, // 源代码的列号，从0开始，如果无法获取，返回null。
    "name": "get" // 源代码的标识，如果无法获取，返回null。
}

源码定位工具

为了使用方便，我将这个功能做成了一个命令行小工具。全局安装后，不需要做任何配置就可以使用。

安装

npm install --global source-location

参数介绍

Usage: sl [options]

Options:
  -v, --version           output the version number
  -p, --source-flie-path  The generated source file  编译后的map文件
  -l, --ine               The line number in the generated source  编译后代码行号
  -c, --column            The column number in the generated source  编译后代码列号
  -h, --help              output usage information

使用案例

终端执行命令：

sl -p dist/1.f47efcb58028826c7c05.js.map -l 1 -c 34

命令行将会输出：源码的文件路径：path，源码行号：line，源码标识：name。

项目的github地址： github.com/front-end-y… 如有错误欢迎指出。

最后，推荐大家使用Fundebug，一款很好用的BUG监控工具，支持Source Map功能~

服务器托管海外云主机别怕线上线上python 线上cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104317.html

【腾讯Bugly干货分享】移动互联网测试到质量的转变

摘要：每周都会举行嘉宾分享，话题讨论等活动。本期，我们邀请了测试技术社区联合创始人陈晔，为大家分享移动互联网测试到质量的转变。分享内容简介在移动互联网越来越快的迭代项目中，很多测试人员和测试团队都开始觉得力不从心。本文来自于腾讯bugly开发者社区，非经作者同意，请勿转载，原文地址：http://dev.qq.com/topic/57ee0... Dev Club 是一个交流移动开发技术，...

renweihub 2019-05-29 16:58 评论0 收藏0
马蜂窝大交通业务质量体系建设初步实践

摘要：大交通研发质量体系建设为了帮助用户更好地完成消费决策闭环，马蜂窝上线了大交通业务，为用户提供购买机票火车票等服务。质量是决定产品能否成功、企业能否持续发展的关键因素之一。如何做好质量体系建设，这是个比较大的话题，包含的范围很广，也没有固定的衡量标准。打开一个互联网公司招聘网站，搜索「测试工程师」岗位时，你会发现几乎全部 JD 都包含一条要求「建设或者参与建设所负责业务的质量体系」。...

Ilikewhite 2019-07-01 13:59 评论0 收藏0
马蜂窝大交通业务质量体系建设初步实践

摘要：大交通研发质量体系建设为了帮助用户更好地完成消费决策闭环，马蜂窝上线了大交通业务，为用户提供购买机票火车票等服务。质量是决定产品能否成功、企业能否持续发展的关键因素之一。如何做好质量体系建设，这是个比较大的话题，包含的范围很广，也没有固定的衡量标准。打开一个互联网公司招聘网站，搜索「测试工程师」岗位时，你会发现几乎全部 JD 都包含一条要求「建设或者参与建设所负责业务的质量体系」。...

fantix 2019-08-23 18:07 评论0 收藏0
一步一步搭建前端监控系统：如何定位前端线上问题？

摘要：一直以来，前端的线上问题很难定位，因为它发生于用户的一系列操作之后。当然，这些问题并非不能克服，让我们来一起看看如何去定位线上的问题吧。地址参考一步一步搭建前端监控系统错误监控篇一步一步搭建前端监控系统接口请求异常监控篇摘要：记录用户行为，排查线上BUG。作者：一步一个脚印一个坑原文：如何定位前端线上问题（如何排查前端生产问题） Fundebug经授权转载，版权归原作者所...

aaron 2019-08-23 18:41 评论0 收藏0
【总结】我们2018年的关键词-坚持学习

摘要：因为涉及业务敏感话题，本文只记录我们学习的历程。我由衷的感谢团队的小伙伴们，感谢你们的坚韧不拔，感谢你们的持续成长。这个变化只是在每天的坚持和刻意练习中发生的，是那么的神奇。因为涉及业务敏感话题，本文只记录我们学习的历程。关于坚持从2016年起，我们团队坚持每天早晨8:50-10:30的100分钟早晨讨论，到现在已经两年了，期间没有中断过。我由衷的感谢团队的小伙伴们，感谢你们...

Imfan 2019-07-01 11:06 评论0 收藏0