Angular 11 series (XIV) production environment for debugging

Little scum · Posted on 8/11/2020 5:59:35 PM

Angular 9 Series (1) Dynamically Loaded Components
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 series (2) dynamic component transmission parameters
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 series (3) subscribes to dynamic component events
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 Series (IV) Custom Pipe pipelines
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formats the amount currency format
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 series (VI) calls native JS variables and methods
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 series (VII) CSS-style scope
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 series (VIII) updates the value of a child component by triggering an event via set
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 Series (nine) #id selector applied on the page
https://www.itsvse.com/thread-9278-1-1.html

Angular 9 series (10) embeds vconsole and eruda developer debugging panels
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Series (XI) 5 Ways to Define Styles
https://www.itsvse.com/thread-9305-1-1.html

Angular 9 series (XII) generates dynamic tokens based on OTPs
https://www.itsvse.com/thread-9325-1-1.html

Angular 10 series (thirteen) introduces Baidu echarts charts
https://www.itsvse.com/thread-9347-1-1.html

We package the Angular project into a production environment with the build command, and the expected effect may differ from what we see in our development environment.

TS Code:

Login is visible.

AppComponent is the current component.

The renderings of the development environment and the production environment are as follows:

The production environment was not at all what we expected.

About the build command data:

Angular build performance optimization
https://www.itsvse.com/thread-9203-1-1.html

At this time, we need to debug it.
SourceMap is an information file that stores the location mapping of the source code and the compiled code

In front-end work, it is mainly used to solve debug problems in the following three aspects:

a. After code compression is confused
b. After compiling into css or JS using other languages such as sass and typeScript
c. After multi-file merging using packaging tools such as webpack

In the above three cases, we can't debug the source code as easily as we do when debugging, so we need SourceMap to help us convert it into source code in the console to debug.

We need to modify the build command, which is as follows:

Login is visible.

(Before adding parameters)

(After adding parameters)

You can see that a lot of *.map files are generated.

As shown in the picture above, use Google Chrome, press F12 to enter developer mode, select source, select main.js, and then right-click and select the "Add Source map" option to add the generated map file address.

For example:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map

(End)

[Angular] Angular 11 series (XIV) production environment for debugging

Related Posts

Sections viewed