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