Abstract: Source the Map is amazing.
- Original: line up a bug? Do not be afraid, so positioning!
- No public: Front small Court
Fundebug authorized reprint and modify, belongs to original author.
Work in a production environment after the code is compiled code, collected error information corresponding to the rows and columns not in the source code, and very often they rely on "experience" to guess, this view of this situation, the development of a small command-line tool npm to help quickly locate the error source position to improve efficiency.
Since the build tool now in vogue, the front end of the deployment of the code is compiled, compressed, Ever since , SoueceMap it played a very important role, used as a mapping between source code and compiled code, easy to locate the problem.
SourceMap function test
First, the global installed reverse-sourcemap
npm install --global reverse-sourcemapCompiled code selection test, the following items are vue compiler generated code.
In the command line command, decompile back main.js source, and output to the next sourcecode directory.
reverse-sourcemap -v dist/main.a8ebc11c3f03786d8e3b.js.map -o sourcecode
Run the above is output sourcecode directory, directory structure and generating consistent source directory, open a file, and make the comparison source:
As can be seen, decompile the code directory structure or whether specific code and source code consistent.
How to locate the source production environment of code error location
If the Fundebug of Source Map feature, you can easily locate the error location:
If not, then use monitoring tools, production code, compressed, compiled, it is not conducive to Debug. To address this issue, we need a production environment code, map file, for convenience, you can increase the debug command to generate a map file package.json project. This command in addition to open sourcemap, other specific configurations and configuration webpack same production environment.
"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"
}With the map file, API provided by SourceMap you can navigate to the source location. Here is the core code to achieve.
// 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功能~