Javascript and Node.js Source Map Files

Owned by Arnaud David
Last updated: Jul 07, 2022 by Marc Amouyal
2 min read

 

Overview

Generally, industry-standard dictate the Javascript files will be minified and combined when deploying them to production.

SeaLights scans the builds, and therefore, sees only the minified/combined files, making it impossible to give the proper context to the team regarding the tests and the code changes on the specific files.

The source map files are a way to link back the minified/combined files back to the source code, allowing the developer to debug the application easily and give SeaLights the possibility to link the scanned files to their original source and improving the value received.

Common Issues

Valid source map files must meet the following requirements:

  1. Be available to Sealights Agent at the scanning (and instrumentation step) inside the workspace path

  2. The ‘sources’ section should refer to the right files from the source code maintained in the SCM

  3. The relative path to the source files should be accurate and pointing to the right source folders

A common way for initial validation of the source map files is to open the application in a browser with the Developer mode and ensure the source code is properly retrieved and readable by the browser.

No Column Information

In the SeaLights Cockpit, you may see warnings about Detected source-maps without column information. Source maps information might be incorrect and may result in inaccurate coverage

Mapping only the line information, often called “cheap-source-maps”, give the ability to the developer to easily debug the code, but, does not allow SeaLights the ability to calculate the exact coverage.

In order to calculate the correct coverage, Sealights require the column information on top of the line information. in order to achieve that, please make sure you have set the following, depending on your build tool:

Webpack

In your webpack.config.js configuration file, set the devtool property to devtool: ‘source-map' or devtool: ‘inline-source-map'.
If you don’t want to change your project configuration, the corresponding webpack-cli commands will be --devtool 'source-map' or --devtool 'inline-source-map'.

More details are available as part of the official Webpack documentation: https://webpack.js.org/configuration/devtool/ or https://webpack.js.org/api/cli/#flags

Typescript (tsc)

Add the relevant compiler option --sourceMap or --inlineSourceMap to the command line or to your tsconfig.json

More details are available as part of the official Typescript documentation: https://www.typescriptlang.org/docs/handbook/compiler-options.html#compiler-options

 

After the completion of Sealights scanning and/or instrumentation command, the source map files are not required anymore from Sealights' point of view. In order to avoid publishing those files in your production environments and/or optimize the size of the deployed folder, you can delete them.

For example, you can use the following command to find and delete all the files before packing and deploying:

  • Linux: find . -name "*.js.map" -exec rm {} \;

  • Windows command prompt: del /s **\*.js.map