Restoring Source Code Coverage

Frontend applications have various compilation forms. In many cases, the pre-compiled AST is handed over to Babel for transformation, which means coverage cannot be directly mapped to the source code. Therefore, we need to restore the source code coverage.

Source Map

In frontend development, JavaScript code is often compressed, obfuscated, or transformed using preprocessors (like TypeScript, Babel) to improve performance and compatibility. These processes make the code deployed to production significantly different from the original source code, making debugging difficult. Source Map solves this problem by recording the mapping relationship between compiled code and original code, allowing developers to view and debug the original code in browser developer tools. — web.dev 

In most cases, you don’t need to manually obtain the sourceMap file because most build tools pass the sourceMap file during the process of ‘handing over the pre-compiled AST to Babel for transformation’.

However, in some cases, you may need to configure the sourceMap file.

Cases Where sourceMap Option Needs to Be Enabled

const path = require('path');
 
module.exports = {
  entry: './build/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module:{
    rules: [
      {
        test: /\.(js|jsx)$/,
        use:['babel-loader'],
        exclude:'/node_modules/'
      }
    ]
  }
};

In this example, webpack’s entry file is ./build/main.js, which is the output of tsc compiling ts files. We need to set sourceMap to true in tsconfig.json to ensure the transmission of sourceMap data.

{
  "compilerOptions": {
    "sourceMap": true
  }
}

Cases Where Manual sourceMap Setting is Required

You need to manually set sourceMap when your sourceMap is generated in the following ways:

How to Manually Set sourceMap

In this case, you need to use Separating Hit and Map. Through canyon-uploader, detect local sourceMap files during the build phase, and Canyon will match them with initial coverage data for upload.