Produktionsmiljö för Angular 11-serien (XIV) för felsökning

Lilla avskum · Publicerad på 2020-08-11 17:59:35

Angular 9-serie (1) dynamiskt laddade komponenter
https://www.itsvse.com/thread-9238-1-1.html

Parametrar för transmissionen av Angular 9 series (2) dynamiska komponenter
https://www.itsvse.com/thread-9245-1-1.html

Angular 9-serie (3) prenumererar på dynamiska komponenthändelser
https://www.itsvse.com/thread-9246-1-1.html

Angular 9-seriens (IV) specialrörledningar
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formaterar storleksvalutaformatet
https://www.itsvse.com/thread-9249-1-1.html

Vinkelrad 9 (VI) anropar inbyggda JS-variabler och metoder
https://www.itsvse.com/thread-9254-1-1.html

Angular 9-serie (VII) CSS-liknande teleskop
https://www.itsvse.com/thread-9264-1-1.html

Angular 9-serien (VIII) uppdaterar värdet på en barnkomponent genom att trigga en händelse via en mängd
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 Series (nio) #id väljare applicerad på sidan
https://www.itsvse.com/thread-9278-1-1.html

Angular 9-serien (10) bäddar in vconsole och eruda utvecklar-felsökningspaneler
https://www.itsvse.com/thread-9286-1-1.html

Angular 9-serien (XI) 5 sätt att definiera stilar
https://www.itsvse.com/thread-9305-1-1.html

Angular 9-serien (XII) genererar dynamiska tokens baserade på OTP:er
https://www.itsvse.com/thread-9325-1-1.html

Angular 10-serien (tretton) introducerar Baidu echarts-diagram
https://www.itsvse.com/thread-9347-1-1.html

Vi paketerar Angular-projektet i en produktionsmiljö med byggkommandot, och den förväntade effekten kan skilja sig från vad vi ser i vår utvecklingsmiljö.

TS-kod:

Inloggningen är synlig.

AppComponent är den nuvarande komponenten.

Renderingarna av utvecklingsmiljön och produktionsmiljön är följande:

Produktionsmiljön var inte alls vad vi förväntade oss.

Om byggkommandodata:

Optimering av vinkelbyggets prestanda
https://www.itsvse.com/thread-9203-1-1.html

Just nu behöver vi felsöka det.
SourceMap är en informationsfil som lagrar platskartläggningen av källkoden och den kompilerade koden

I front-end-arbete används den främst för att lösa felsökningsproblem inom följande tre aspekter:

a. Efter kodkomprimering är förvirrad
b. Efter kompilering till CSS eller JS med andra språk som sass och typeScript
c. Efter sammanslagning av flera filer med hjälp av paketeringsverktyg som webpack

I de tre fallen ovan kan vi inte felsöka källkoden lika enkelt som vid felsökning, så vi behöver SourceMap för att hjälpa oss konvertera den till källkod i konsolen för felsökning.

Vi behöver modifiera build-kommandot, som är följande:

Inloggningen är synlig.

(Innan parametrar läggs till)

(Efter att ha lagt till parametrar)

Du kan se att många *.map-filer genereras.

Som visas på bilden ovan, använd Google Chrome, tryck F12 för att gå in i utvecklarläge, välj källa, välj main.js och högerklicka sedan och välj alternativet "Lägg till källkarta" för att lägga till den genererade kartfiladressen.

Till exempel:

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

(Slut)

[Kantig] Produktionsmiljö för Angular 11-serien (XIV) för felsökning

Relaterade inlägg

Avsnitt som ses