primers

Exception resolution is introduced in the front-end exception resolution. After the exception information is reported, it is generally difficult to directly identify the error source, because in the formal online environment, the code is often compressed and confused, and some exception information is directed to the compressed file. At this point, you can trace the location of the Source file from the Source Map file.

Introduction to the

The original source mapping format was created by Joseph Schorr and used to enable JavaScript source code level debugging optimization in Closure Inspector (a common Google tool). As projects using source maps grow, format redundancy becomes an issue. The V2 version sacrifices some simplicity and flexibility to reduce the overall size of the source map. The latest version is V3. See Source Map Revision 3 for more information.

format

By convention, the source mapping file has the same name as the source file, with the suffix.map. For example, the resulting source map of page.js is named page.js.map. This agreement is not mandatory.

Source mapping the entire file is a JSON object:

{
  "version" : 3."file": "out.js"."sourceRoot": ""."sources": ["foo.js"."bar.js"]."sourcesContent": [null.null]."names": ["src"."maps"."are"."fun"]."mappings": "A,AAAB;; ABCDE;"
}
Copy the code
  • Version: source Map specification version, which must be a positive integer.
  • File: indicates the name of the source mapping file generated after the conversion.
  • SourceRoot: Optional, resource rerouting, relocating source files on the server and removingsourcesThe repeated values in. This value is pre-added tosourcesEach value in the field. Empty if the path is the same as the source file.
  • Sources: depositmappingsSource files used in.
  • SourcesContent: Optional, stores source content. The order of the list followssourcesFields in the same order. May be used if some sources are to be retrieved by namenull 。
  • Names:mappingsSome of the identity names used in.
  • Mappings: STRING that records mapping information.

The meaning becomes clearer with examples:

See Source Map Revision 3 for more information.

use

As of Chrome 39, the Source Maps Settings TAB in the developer tools is turned on by default, as explained here.

For native development, build tools such as Webpack support Source Map file generation. During debugging in Chrome, you can see the corresponding Source code location in the Developer tool Sources bar.

In a formal online environment, Should I Use Source Maps in Production? Should I Use Source Maps in Production? . To be clear, browsers don’t request these files by default, so don’t worry about bringing in extra requests. The server can restrict access to the Source Map file if you want to make it easier to troubleshoot online problems without anyone looking at the Source.

In the formal online environment, it is impossible to operate the user’s computer at any time to troubleshoot problems. If there is a Source Map file, how to deal with it? This leads to the following questions:

  1. How do I check if there is a corresponding Source Map file?
  2. How do I get the Source Map file?
  3. How to parse the Source Map file?

Here are the answers to these three questions.

How do I check if there is a Source Map file?

If the Source Map file is generated at the same time, the last line of the compressed code looks like this:

// Last line of the js file
//# sourceMappingURL=<url>

// The last line of the CSS file
/*# sourceMappingURL=<url> */
Copy the code

Therefore, when an exception occurs, after obtaining the file where the exception is located, the Source Map file can be determined by judging whether the above mark exists in the content of the file. This is done in source-map-support.

How do I get the Source Map file?

In the first question, the Source Map file is known, and the location of the file is also obtained. In the spec, it is recommended to return the SourceMap in the response header to the associated SourceMap file. In the latest Chrome test, this is not carried by default and may need to be set manually. This is a sample page.

How to parse the Source Map file?

Understanding how the specification is coded allows you to parse in reverse. The existing source-Map library provides parsing capabilities. This is a sample page.

What time

Now that you know how to use the Source map file above, when should you do it? The examples given above are all front-end processing. In fact, server-side processing can also be carried out. In this case, factors to consider are:

  • Whether it will affect the running of the main process, because if put in front processing, JavaScript is single-threaded, it may affect.
  • Whether additional requests can be accepted, the above example has the request Source Map file, which is generally larger than the compressed source file.
  • Whether the risk of source leakage is acceptable.

Front-end exception processing reports are generally used to discover and handle problems in time or even in advance, providing better user experience and providing data reference for product improvement. From this point of view, exception handling reporting is an auxiliary function and should reduce the occupied resources as much as possible, so source map parsing is recommended to be handled on the server side.

The resources

Why bother to embarrass yourself