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.

Why would a production environment turn SourceMap off

Although map files provide convenience, in production environments, it is recommended to turn SourceMap off for security reasons, as it is easy to decompile the project source code with.map files and compiled code, thus exposing the project code. Here’s a test: 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

Production code, compressed and compiled, is not conducive to debug. Because SourceMap is not configured in the production environment, when the code reports an error, or when the error information is collected through Fundebug,Sentry and other tools, the lines and columns of the code reporting an error are all compiled code, which makes it difficult to locate the problem.

    "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, returns null. Line: 4, // The line number of the source code, starting at 1, returns null if not available. Column: 24, // The source column number, starting from 0, returns null if not available. name:'get'// The source code identifier, if not available, returns 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