【实战】前端行号列号通过 map 文件定位到异常源文件

小渣渣

需求：将前端项目（Angular、vue）代码部署到生产环境，项目在编译的过程会对代码进行压缩混淆处理，前端报错也可能无法知道异常的地方和原因，如果在编译的时候生成了 map 文件，我们可以借助 map 文件来定位到源文件的位置。

什么是Sourcemap

Sourcemap 本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。 Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，造成无法debug的问题。

Sourcemap的作用

简单说 Sourcemap 构建了处理前以及处理后的代码之间的一座桥梁，方便定位生产环境中出现 bug 的位置。因为现在的前端开发都是模块化、组件化的方式，在上线前对 js 和 css 文件进行合并压缩容易造成混淆。如果对这样的线上代码进行调试，肯定不切实际，sourceMap 的作用就是能够让浏览器的调试面版将生成后的代码映射到源码文件当中，开发者可以在源码文件中 debug，这样就会让程序员调试轻松、简单很多。

首先，新建一个 Angular 项目，写一段有问题的代码。

html 代码如下：

登录可见。

ts 代码如下：

登录可见。

在开发阶段，如果出现错误，是非常容易定位到错误的位置，如下图：



将项目 build 成发布包并且生成 map 文件，命令如下：

登录可见。

将生成的文件部署在一个 HTTP 服务器，例如：IIS、Nginx 等。同时，将 map 文件移至其它目录，方便测试。

window下，nodejs 安装 http-server，开启HTTP服务器
https://www.itsvse.com/thread-6838-1-1.html

此时，无法直观的看到错误信息和源代码，我们安装“源码定位工具”，命令如下：

登录可见。

参数介绍：

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

测试通过 map 文件找到源码行号等信息，命令如下：

登录可见。

（完）

飞鱼

学习学习