The role of sourceMap

Usually, when the JS code is wrong, the console will tell you which lines and columns of the code are wrong. But webpack packed and compressed the code, all compressed to a line, variables also become a, B, C, D. If the code fails, the console cannot correctly indicate the error location.

SourceMap solves this problem. SourceMap is an information file that stores location information before packaging. That is, every position in the transformed code corresponds to the position before the transformation. Specific how to code, can see ruan Yifeng’s article.

With this, when something goes wrong, the browser console will show you where the original code went wrong, rather than the converted code, and clicking on the error message will take you directly to the original code.

SourceMap debugging

  1. Console directly click the error message to jump to the source code (as shown in the figure above)

SourceMap debugging will be enabled by default by browsers, and if the console cannot display source error locations, you need to enable configuration.

If an error message is displayed on the Console panel after you open this configuration in the browser, you can directly click to go to the error location of the source file.

  1. The Sources panel finds the source file and debuts breakpoints

If there is no Console, no error is reported, but the page is displayed incorrectly. You can click on the Sources panel of the console, the source files are in webpack:// directory, or directly search for the file, open the source file and debug the breakpoint.

Load - on - demand routing, the source file will not be displayed in this directory until the page is loaded.Copy the code

Webpack configuration

Vue.config. js file for vue-cli3:

module.exports = {
    productionSourceMap: false.// The default is true
}
Copy the code

Packaged files:

For packaged sourceMap, Webpack provides multiple types of configuration.

Where, the development environment uses:

  • Eval: encapsulates each module toevalIs wrapped and executed, and appended at the endmapAddress of the file.mapThe file maps to the converted code (the executable JS file), not to the original code (the vue file), so the error line count is not displayed correctly.

  • Eval-source-map: Similar to Eval, raw sourceMap is generated for each module, and the map file is added to JS in the form of dataURL (similar to base64 for images). The original sourceMap can correctly indicate the number of error lines.

  • Eval-cheap-source-map: Same as eval-source-map, except that cheap is added, which means column information is ignored (most of the time column information is useless for error prompts, just the number of rows).

  • Cheap-module-eval-source-map: Same as eval-cheap-source-map, but includes sourceMap between different Loader modules. For example, compiling ES6 with Babel, if you generate sourcemap that does not contain loader, you debug the compiled code instead of the original code.

Production environment:

  • The source – the map:mapThe file contains the complete original code, but packaging is slow. After packagingjsThe last line ismapComments on file addresses

  • Hidden-source-map: Same as sourceMap, map files are generated, but the packaged JS ends up with no reference to the map file address. Browsers do not proactively request map files, which are used for error analysis of websites. You need to use error analysis tools to match map files by name.

  • Nosource-source-map: The generated map file does not contain the source code, but correctly displays the number of incorrect lines. In addition, the project’s directory structure and file name are exposed in the Sources panel

For specific environments (for some third-party tools, this is rare and will not be discussed in detail) :

  • inline-source-map
  • inline-cheap-source-map
  • inline-cheap-module-source-map
  • cheap-source-map
  • cheap-module-source-map

Is actually the inline, being, the module, the source – free combination of the map.

  • The inline isdateURLForm addmap, no additional generationmapfile
  • Cheap means there is no column information
  • Module is includedloaderthesourcemap
  • Source-map maps to source files

The generated sourceMap varies with the parameters, packaging speed, size, and error message effect. Vue-cli3 preselected a mode for us:

Development environment, configuration file location: node_modules\\@vue\cli-service\lib\config\dev.js, line 5

Production environment, configuration file location: \node_modules\\@vue\cli-service\lib\config\prod.js, line 11

CSS also has sourceMap, but vue-cli3 is off by default:

module.exports = {
    css: {
        sourceMap: false./ / default is false}}Copy the code

Security issues at sourceMap

Both sides of the coin, while facilitating debugging, also exposes the source code to the console, which may lead to code leakage security issues.

Although the front-end code is open, the code’s compression obfuscation also improves security to a certain extent.

Possible problems caused by code leaks:

  1. Code copied

Scenario: write A map function for A customer, A customer to show B customer, B customer wants to write A map, but can not, after viewing the source code, copied the map function

  1. Loss of business

Scenario: Competitors get their hands on the source code, find bugs or flaws in it, and advertise it. Or directly write a background, the cost is less, the price is low lead to the business is stolen

  1. The system is attacked.

Scenario: Due to the urgency of the project, authentication is dynamically generated through the front end of the route control, the background does not make a judgment, resulting in the modification of the source code, can obtain more permissions (data is deleted)

For example, common video playing websites, if not encrypted, a direct

The processing of sourceMap

If there is no special requirement for production environments to disable this option, vuE-cli3 simply sets productionSourceMap: false. Or leave the map file open but delete it when the test environment is migrated to the official environment. You can also configure the server to allow special accounts (debug only) to access map files, but not other users.

Nosource-source-map is recommended if you want the console to correctly indicate the location of the error without exposing the source code, but this will expose the source directory structure and file name. This works well in general test environments, where QA tests will correctly indicate errors and operations will not expose source code even if they forget to delete sourceMap files.

// vue.config.js
module.exports = {
  configureWebpack: config= > {
    if (process.env.NODE_ENV === 'production') {// Modify only the production environment configuration
        return {
           devtool: 'nosources-source-map'}; }}}Copy the code

Added: Local sourceMap debugging

  1. Method 1: Network interception

The Webpack package still generates sourceMap, but local sourceMap debugging can be done by picking out the map file and putting it on the local server, deploying it to the server without the map file, and using third-party software (such as Fiddler) to intercept browser requests for the map file to the local server.

  1. Solution 2: Change the WebPack package, test environment does not put map file, change sourceMap reference to the local server

Feasibility: Local debugging only, because the test environment and the local machine belong to the same LAN, so the test environment can request the sourceMap file on the local server, after deployment, the client access cannot access the LOCAL LAN IP, also cannot get the sourceMap file.

Disadvantages: other packaging needs to modify the computer IP and local server file address, can not be directly multiplexed, the advantage is absolute security. Alternatively, you can provide another dedicated server for storing map files and automatically upload the map files to this server after packaging.

Use SourceMapDevToolPlugin to change the reference address of the packaged file to the map file, and use Filemanager-webpack-plugin to move the map file to the local server. The code is as follows (vue.config.js) :

const webpack = require('webpack')
const FileManagerPlugin = require('filemanager-webpack-plugin');

module.exports = {
  configureWebpack: config= > {
    if (process.env.NODE_ENV === 'production') {
      return {
        devtool: false.// Note that SourceMapDevToolPlugin and devtool cannot coexist
        plugins: [
          new webpack.SourceMapDevToolPlugin({
            append: '\ n / / # sourceMappingURL = [url] http://192.168.23.230/sourceMap/'.// 192.168.23.230 is the LOCAL LAN IP address
            filename: '[file].map',}).new FileManagerPlugin({
            onEnd: {
              copy: [{ 
                source: './dist/js/*.map'.destination: 'D:/xampp/htdocs/sourceMap'.// D:/xampp/htdocs/ is the file address of the local server}].delete: ['./dist/js/*.map'].archive: [{ // Compress the website file
                source: './dist'.destination: './dist/dist.zip',}]}})]}; }}}Copy the code
  • SourceMapDevToolPlugin

This plugin provides more fine-grained control over sourceMap, such as the location of the package and changing the reference address of the JS/CSS file facing sourceMap at the end. The main use here is to change the sourceMap reference address.

To use this, devTool must be turned off

  • filemanager-webpack-plugin

NPM install filemanager-webpack-plugin –save-dev: NPM install filemanager-webpack-plugin –save-dev: NPM install filemanager-webpack-plugin –save-dev: NPM install filemanager-webpack-plugin –save-dev

Note: this plugin is buggy, the move operation does not support fuzzy matching, can be changed to copy + delete

The last

Welcome to point out any questions.