Front-End Build: Source Maps Detailed

First, preface

When writing a front-end script using Coffeescript, Clojurescript, when writing style rules using less and SACC, do you feel that you cannot find the source location exactly when debugging? When using jquery.min.js and other compressed tool library, do not feel even the debugging of the door do not know where?

In response to these questions, Google provides us with a solution for source maps, which is a learning record of source maps for later review.

Because the length is longer, the special catalogue a lump!

Ii. examples

Three, the Source maps scheme detailed

1. Programme structure

2. Supported browsers and start-up methods

3. Generator

4. Detailed Map File

4.1. Map file format

4.2. Mappings Properties

4.3. VLQ encoding

Iv. attention

V. Summary

Ii. examples

First we use Clojurescript to write a recursive function Becomegeek

( NS sample) (Defn Becomegeek [Progress]     (. Log JS/Console progress)    (if100  Progress)        (Becomegeek (1 Progress))))

The following JS is obtained after pre-compiling

Sample.becomegeek = (function becomegeek (process) {    console.log (process);     if ((() > process) {        return becomegeek.call (null, (1) +  process));     Else {        returnnull;    }});

When the need to debug our situation is to look at the JS code to modify the Clojurescript code, for this becomegeek function is not much difficulty, but for the entire project is not as difficult as looking at the binary middle code to modify the Java code OH. Let's solve the above problem by generating source maps via the Lein+cljsbuild plugin!

PROJECT.CLJ configuration information

(Defproject sample"0.1.0-snapshot":d ependencies [[Org.clojure/clojure"1.6.0"] [Org.clojure/clojurescript"0.0-2411": Exclusions [org.apache.ant/Ant]] [Compojure"1.1.6"]]:p lugins [[Lein-cljsbuild"1.0.4"]]: cljsbuild {: Builds [{: id"Main": Source-paths ["Src-cljs"]: Compiler {: output-to"Js/main.js": Output-dir" out": Optimizations:none:source-maptrue}}]})

Execute Lein command

$ lein Cljsbulid Once

Then we open Chrome's devtools in JS and CSS's source maps function as readily as debugging C # on vs.

Set a breakpoint in the Sample.cljs file, and then call Sample.becomegeek Debug!

Chrome's Devtools:

FF's Devtools:

Three, the Source maps scheme detailed

I think we now feel the power of source maps, and with it we can safely use JS superset language (Clojurescript, coffeescript and typescript, etc.), You can also safely debug jquery.min.js and other compression-confusing library code.

1. Programme structure

Source Maps is not just a. map suffix file, but a set of technical scenarios consisting of a browser, a. map file generator, and a. map file.

The . map file , in fact, is a relational mapping file, which is used to store the mapping of the source code and post-compiled codes of files, line numbers, column numbers, and variable names;

. map File Generator , each preprocessor (LESSC, Closure, CLJSC, and so on) can be set by options for how to generate a. map file;

browser , Chrome and FF all provide source maps support (IE11 is still not supported), the browser essentially provides a. map file parsing engine that loads source files based on the contents of the. map file and Associates source and post-compilation code in debug mode.

In addition, the last line of the compiled code adds a row to the. Map file statement, pointing to the way there are HTTP URI scheme and data URI scheme two.

http URI scheme, formatted with/ /# sourcemappingurl=sample.js.map?rel=1420853090118

The data URI scheme, which is the base64 encoding of the. Map file, then compiles the last line of code in the form of a data URI scheme that introduces the contents of the. map file in the format of //# SOURCEMAPPINGURL=DATA:APPLICATION/JSON;BASE64,ASDI .....

2. Supported browsers and how to enable them

　　Chrome, Devtools's settings, opens the source maps feature for JS and CSS.

　　

　　FF, the source maps feature of JS and CSS has been turned on by default.

3. Generator

LESSC, GC (Google Closure Compiler), Uglifyjs, Clojurescript, and Coffeescript are described below

the generator forless is LESSC, and the ability to generate a. map file is turned on with optional --source-map , and through such as --source-map-rootpath Options to configure information about the. map file. For details, see front-end build: less into a door

GC, as the compiler of JS, not only provides the functions of removing whitespace, commenting, but also parsing the code and optimizing the code (function inline, variable constant quantization, local variable and attribute name substitution, etc.)

New Object    = a =new Array =     = []if (a) b () =        a && b ()return23;     return 6;

   The GC provides three methods of invocation, namely, Web Edition, Web API, and standalone application. Because the GC is written in Java, we need to install the JRE. (If you do not want to install the JRE, refer to @ Allen to transcode the Clojure-compiler.jar to. NET version via Ikvm.net) and then generate the. map file with the following command:

$ java-jar Compiler.jar--js sample.js--create_source_map./sample-map--js_output_file Sample.min.js

Uglifyjs, because jquery uses UGLIFYJS as its precompiled tool to make it famous, generate a. map file by using the following command:

$ uglifyjs sample.js-o sample.min.js--source-map sample.min.map

  Clojurescript, we can generate the. map file in the second section.
  coffeescript, generate the. map file by using the following command:

Coffee-c Sample.min.js sample.js-m

4. Detailed Map File

Here you can already use source maps with ease, and the next step is to get a deeper understanding of the. map file contents and the source maps implementation principle of the friend prepared. The main content is from the "Javascript Source Map detailed" @ Nanyi

4.1. Map file format

Take the. map file generated in section two as an example

{"version":3, "file":"/c:/lein/myapp/out/sample.js", "sources":["sample.cljs?rel=1420853090124"], "SourceRoot":"","Mappings": "; AAAA;; AAEA,OBAAA,PBAAMA,YCAAYC; AAALB,AACC,AAAMC,YAAWD;; Aacjb,gaai,caaa,qaaoa; AACV,OAACE,QBAAW,CAAA,MAAKF;; AADLB", "names":["Sample/becomegeek","Process","Js/console","Becomegeek"]}

{Number}version, source map, currently 3;

{String} file, compiled files path;

{array.<string>} sources , source file path array;

{String} sourceroot , the directory where the source files are located;

{array.<string>} names , all variable names and attribute names in the source code;

{String} mappings , which records the location information of the source code and the post-compiled codes.

4.2. Mappings Properties

First, the mapping attribute value is divided into three layers meaning

① identifies each line of the compiled code with a semicolon (;), that is, the contents of the semicolon interval represent one line of the compiled code;

② identifies the compiled code with a comma (,) each mapping location in the line, that is, the content of the comma interval represents a mapping location;

③ identifies the specific mapping information for the source code and the post-compilation codes in 5 sets of VLQ coded fields. Each group from left to right represents the following:

Group 1th, which indicates the number of columns corresponding to the compiled code;

The 2nd group, which represents the index value of the source file in the sources array;

Group 3rd, indicating the first line of the corresponding source code;

Group 4th, which is the first column of the corresponding source code;

The 5th group, which represents the index value in the names array, can be omitted if it is not.

Note: Each set of VLQ encoded fields consists of 0~n VLQ encoded characters , such as QCaaUH.

4.3. VLQ encoding

VLQ encoding was first used for MIDI files and later used in many formats. It is characterized by the ability to represent very large numbers very thinly.

The VLQ encoding is variable-length. If the (integer) value is between 15 and +15 (with two endpoints), it is represented by a character, and beyond this range, multiple characters are required. and specifies that each 6bit identifies a character.

Continuation |　　　　　 Sign | | v v 101011

The first bit (continuation bit) indicates whether the current 6 bit is the last section of the current coded segment, 1 means no, and 0 means yes.

Last (sign bit), when the section is the first section of the current coded segment, indicates that the symbol 1 is a minus sign, 0 is a plus, and if not the first section represents the value bit.

The following 16 is VLQ encoded,

1. Convert 16 to binary 10000;

2. At the far right of the supplementary symbol (sign bit) to get 100000;

3. Starting from the far right, a group of 5bit is segmented, and less than 5bit after the segment is 0, 00001, 00000 is obtained;

4.00000, 00001 in reverse;

5. Add continuous bit (continuation bit) for each paragraph to get 100000, 000001;

6. Base64 code for each segment, get GB. (for Base64 coded character set)

Iv. attention

With Chrome and FF under Devtools's network panel we can see that the browser has loaded the. map file and the source code file, and now that the problem is in the production environment, will the user visit the Web page not more than two development environment used files?

In fact, the browser by default (when not opening devtools) is not loaded. map files and source code files, so you can rest assured. If you are still afraid that the user has opened the Devtools by mistake, then the. map file will not be generated when the package is released.

v. Summary

Previous attempts to coffeescript, but because of the speed of coding, although a lot of improvement, but the debugging efficiency is reduced more (without source maps pain), resulting in the final return to JS embrace. Now we can finally use Coffeescript at ease!

Respect the original, reprint please indicate from: http://www.cnblogs.com/fsjohnhuang/p/4208566.html ^_^ Fat Boy John

Vi. references

"Javascript Source Map detailed"

"Source Maps Introduction"

Source MAP Revision 3 proposal

Front-End Build: Source Maps Detailed