Source Map is amazing.
- Public account: Front-end Xiaoyuan
FundebugReproduced and modified with authorization, copyright belongs to the original author.
At work, the code in the production environment is compiled code, and the lines and columns of the error information collected can not be corresponding in the source code. Most of the time, we can only rely on “experience” to guess. In view of this situation, this paper developed a NPM command line gadget to help quickly locate the source code of the error and improve efficiency.
With build tools now so prevalent that front-end deployed code is compiled and compressed, SoueceMap plays an important role as a mapping between source code and compiled code to locate problems.
Test the SourceMap function
First, install reverse-sourcemap globally
npm install --global reverse-sourcemap
Copy the code
Select the compiled code to test. Here is the code generated by the compilation of the VUE project.
Execute the command on the command line to decompile main.js back into the sourcecode and output it to the sourcecode directory.
reverse-sourcemap -v dist/main.a8ebc11c3f03786d8e3b.js.map -o sourcecode
Copy the code
The generated directory structure is the same as the source directory. Open a file and compare it with the source directory:
It can be seen that the decomcompiled code is consistent with the source code both in the directory structure and in the specific code.
How to locate the source code in production environment
If you use Fundebug’s Source Map function, you can easily locate the error:
If you don’t use a monitoring tool, the code in the production environment, compressed and compiled, is not conducive to debugging. To solve this problem, you need to prepare a map file of the code in the production environment. For convenience, you can add the debug command in the package.json of the project to generate the map file. With the exception of sourcemap enabled, the specific WebPack configuration is the same as the production configuration.
"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"
}
Copy the code
With the map file, SourceMap provides apis to locate the source code. The following is the core code for implementation.
// 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
}
Copy the code
The most important thing is to use the originalPositionFor API provided by SourceMap. SourceMapConsumer.prototype.originalPositionFor(generatedPosition)
The originalPositionFor API takes the line number of the code generated by line compilation for an object containing the line and column attributes, starting at 1 and starting at 0. This method returns an object with the following attributes
{ "source": "webpack:///src/pages/common/403.vue? C891 ", // The location of the source file, if not available, return null. "Line ": 4, // Line number of source code, starting at 1, null if not available. "Column ": 24, // The source column number, starting at 0, returns null if not available. "Name ": "get" // Source code identity, if not available, return null. }Copy the code
Source locator tool
For ease of use, I made this feature into a command-line gadget. After global installation, it can be used without any configuration.
The installation
npm install --global source-location
Copy the code
Parameter is introduced
Usage: sl [options]
Options:
-v, --version output the version number
-p, --source-flie-path The generated sourceFile Indicates the compiled map file-l, --ine The line number in the generated source--column The column numberin the generated source-h, --help output Usage InformationCopy the code
Use case
The terminal runs the following command:
sl -p dist/1.f47efcb58028826c7c05.js.map -l 1 -c 34
Copy the code
The command line will output: source file path: path, source line number: line, source code identifier: name.
Github address of the project: github.com/front-end-y… Welcome to point out any mistakes.
Fundebug is a very useful bug-monitoring tool that supports Source Map