JavaScript Source Map Knowledge Detailed

This is the last new version before version 2.0, with many new features, one of which is to support the source Map.

Access Http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js, open the compressed version, scroll to the bottom, you can see the last line is like this:

@ sourcemappingurl=jquery.min.map

This is the source Map. It is a separate map file, with the source code in the same directory, you can click in to see what it looks like.

This is a very useful feature that will be explained in detail in this article.

First, from the source code conversion

JavaScript scripts are becoming more and more complex. Most of the source code (especially a variety of function libraries and frameworks) have to be converted in order to put into production environment.

The common source code conversion, mainly is the following three kinds of situations:

(1) compression, reduce volume. For example, jquery 1.9 source code, compression is 252KB before compression is 32KB.

(2) Merging multiple files to reduce the number of HTTP requests.

(3) Other languages are compiled into JavaScript. The most common example is coffeescript.

In all three cases, the actual running code is different from the development code, and debugging becomes difficult.

Typically, the JavaScript interpreter tells you that the first few lines of code are wrong. However, this has no use for the converted code. For example, JQuery 1.9 compresses only 3 lines, 30,000 characters per line, and all internal variables are renamed. You look at the error message, feel no clue, do not know the original location of its corresponding.

This is the problem that source map wants to solve.

Second, what is the source map

Simply put, the Source map is an information file that stores location information. That is, each position of the converted code, corresponding to the position before the conversion.

With it, the debugger will display the original code directly, not the converted code, when the error occurs. This has undoubtedly brought great convenience to the developer.

At the moment, only chrome browsers support this feature. In the setting setting of developer tools, verify that Enable source maps is selected.

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/