Link: Original text Link

Translation begins:

One of the easiest ways to optimize your site’s performance is to pack up JS and CSS. But what happens when you need to debug the code in these compressed files? It could be a nightmare. But fear not, there is a solution on the horizon: Source Maps.

Source Maps provides a way to map code in a compressed file back to its original location in the source file. This means that, with the help of some software, you can easily debug your program even if your resources are compressed. Both Chrome and Firefox’s built-in developer tools now support Source Maps.

In this article, you will learn how source maps are implemented and how to generate them. We focused primarily on Source maps for JavaScript code, but these principles also apply to SOURCE maps for CSS.

Source Maps implementation principles

As the name implies, a source map contains a bunch of information that maps the code from a compressed file back to source code. You can specify a different source map for each compressed file. Indicate to the browser that Souce Map is available by adding a special comment at the bottom of the zipped file.

//# sourceMappingURL=/path/to/script.js.map
Copy the code

This annotation is typically added by the program used to generate the Source map. Developer tools will load these files only when developer tools support source Map is enabled and enabled.

SourceMap can also be enabled in the response to a compressed JavaScript file by setting the HTTP response header for x-Sourcemap.

X-SourceMap: /path/to/script.js.map
Copy the code

Let’s look at the contents of the Source Map file: a JSON object that contains the file description and the JavaScript source file. Here’s an example:

{
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js"."content.js"."widget.js"].sourceRoot: "/",
    names: ["slideUp"."slideDown"."save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}
Copy the code

Description of each attribute:

  • Version: This property indicates which version of the Source Map specification the file follows. See the specification for details
  • File: source map file name
  • Sources: an array of source file urls
  • SourceRoot: (Optional) The file root path specified by the source file array URL
  • Names: An array containing the names of all variables and functions in the source file.
  • Mappings: Base64 VLQ string containing the actual code mappings. (This is where the magic happens.)

Use UglifyJS to generate Source Maps

UglifyJS is a command line tool for merging compressed JS files. Version 2 supports a number of command-line identifiers that help generate source maps.

  • –source-map: source map output file
  • –source-map-root :(optional) source map source file root path
  • –source-map-url :(optional) server source map file path. The path in the comment used to compress the file.
//# sourceMappingURL=/path/to/script.js.map
Copy the code

All of the above options can be viewed in the documentation

Create a test.js file in a directory with the contents of test.js:

function test(){
    console.log('test')}Copy the code
uglifyjs test.js -o test.min.js --source-map "url='test.min.js.map'"
Copy the code

If not, you need to install uglifyJs first. After executing the command, three files are generated.

Above does not use the original example, uses own implementation example.

Test.min.js output to the code:

function test(){console.log("test"} / /# sourceMappingURL=test.min.js.map
Copy the code

The following other tools can also be used to generate Source maps:

  • coffeeScript Compiler
  • GruntJS Task for JSMin

Debug Source Maps with Chorome developer tools

Examples have been deviated from the original text for demonstration purposes.

The test.min.js file generated earlier is debugged by importing it into an HTML file. HTML file:

<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <script src="./test.min.js"></script>
        <script>
        test()
        </script>
    </body>
</html>
Copy the code

Let’s see what happens when source Map is not enabled:

No source map enabled, only test.min.js loaded

The discovery will load the test.js source file and debug it in the source file.

summary

Using the Source Map allows developers to maintain a straightforward debugging environment while optimizing the performance of their sites.

Useful links

  • The Source Map,
  • JavaScript Source Map introduction
  • UglifyJS2
  • Proposed Source Map revision

(after)