|
|
Posted on 6/30/2022 8:04:02 PM
|
|
|
|
Requirements: Deploy the front-end project (Angular, vue) code to the production environment, and the project is inThe compilation process compresses and obfuscates the codeIf a map file is generated during compilation, we can use the map file to locate the location of the source file.
What is Sourcemap?
A sourcemap is essentially an information file that stores the corresponding location information before and after the code conversion. It records the source code location before conversion corresponding to the compressed code, and is a mapping between source code and production code. Sourcemap solves the problem that during the packaging process, the code is compressed, despaced, and compiled and transformed, resulting in the inability to debug due to the large differences between the codes.
The role of Sourcemap
Simply put, Sourcemap builds a bridge between pre-processing and post-processing code, making it easy to locate where bugs occur in production. Because today's front-end development is modular and component-based, merging and compressing JS and CSS files before going live can easily cause confusion. The function of sourceMap is to allow the browser's debugging panel to map the generated code to the source code file, and developers can debug in the source code file, which will make debugging much easier and simpler for programmers.
First, create a new Angular project and write a piece of problematic code.
The html code is as follows:
The TS code is as follows:
In the development stage, if there is an error, it is very easy to locate the wrong location, as shown in the figure below:
Build the project into a release package and generate a map file with the following command:
Deploy the resulting file on an HTTP server, such as IIS, Nginx, etc. meantimeMove the map file to a different directory, convenient for testing.
At this time, we cannot see the error message and source code intuitively, we install the "Source Code Locator Tool" with the following command:
Parameter introduction:
Usage: sl [options]
Options:
-v, --version output the version number
-p, --source-flie-path The generated source file compiled map file
-l, --ine The line number in the generated source compiled line of code
-c, --column The column number in the generated source
-h, --help output usage information
(End)
|
Previous:Extract all text from a PDF file using C# (supports .NET Core)Next:Front-end knowledge of JavaScript commonly referred to as ES6, ES8, ES 2017, ECMAScript
|
Posted on 6/30/2022 9:36:37 PM