vue定位进不同位置_线上出bug了？别怕，这么定位！

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

• 原文：线上出bug了？别怕，这么定位！
• 公众号：前端小苑

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

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

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

测试SourceMap功能

首先全局安装reverse-sourcemap

npm install --global reverse-sourcemap

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