Angular 11-serie (XIV) productieomgeving voor debugging

Klein tuig · Geplaatst op 11-08-2020 17:59:35

Angular 9 Series (1) Dynamisch Geladen Componenten
https://www.itsvse.com/thread-9238-1-1.html

Hoekige 9-serie (2) dynamische componenttransmissieparameters
https://www.itsvse.com/thread-9245-1-1.html

Hoekige 9-serie (3) sluit dynamische componentgebeurtenissen aan
https://www.itsvse.com/thread-9246-1-1.html

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

Angular 9 Series (V) formateert het bedragsvalutaformaat
https://www.itsvse.com/thread-9249-1-1.html

Hoekige 9-reeks (VI) roept native JS-variabelen en -methoden aan
https://www.itsvse.com/thread-9254-1-1.html

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

Angular 9 series (VIII) werkt de waarde van een kindcomponent bij door een gebeurtenis te triggeren via een set
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 Series (negen) #id selector toegepast op de pagina
https://www.itsvse.com/thread-9278-1-1.html

Angular 9-serie (10) embedt vconsole- en eruda-ontwikkelaarsdebuggingpanelen
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Serie (XI) 5 manieren om stijlen te definiëren
https://www.itsvse.com/thread-9305-1-1.html

Angular 9-serie (XII) genereert dynamische tokens op basis van OTP's
https://www.itsvse.com/thread-9325-1-1.html

Angular 10-serie (dertien) introduceert Baidu echarts-grafieken
https://www.itsvse.com/thread-9347-1-1.html

We verpakken het Angular-project in een productieomgeving met het build-commando, en het verwachte effect kan verschillen van wat we in onze ontwikkelomgeving zien.

TS-code:

Inloggen is zichtbaar.

AppComponent is de huidige component.

De renderings van de ontwikkelomgeving en de productieomgeving zijn als volgt:

De productieomgeving was totaal niet wat we hadden verwacht.

Over de build-commandogegevens:

Optimalisatie van hoekbouwprestaties
https://www.itsvse.com/thread-9203-1-1.html

Op dit moment moeten we het debuggen.
SourceMap is een informatiebestand dat de locatiemapping van de broncode en de gecompileerde code opslaat

In front-end werk wordt het voornamelijk gebruikt om debugproblemen op te lossen in de volgende drie aspecten:

a. Na codecompressie is verward
b. Na het compileren in CSS of JS met andere talen zoals sass en typeScript
c. Na multifile samenvoeging met verpakkingstools zoals webpack

In de bovenstaande drie gevallen kunnen we de broncode niet zo makkelijk debuggen als bij het debuggen, dus hebben we SourceMap nodig om het in de console om te zetten naar broncode om te doen.

We moeten het build-commando aanpassen, dat als volgt is:

Inloggen is zichtbaar.

(Voordat parameters worden toegevoegd)

(Na het toevoegen van parameters)

Je ziet dat er veel *.map-bestanden worden gegenereerd.

Zoals te zien op de bovenstaande afbeelding, gebruik Google Chrome, druk op F12 om de ontwikkelaarsmodus te openen, selecteer bron, selecteer main.js, en klik vervolgens met de rechtermuisknop en selecteer de optie "Bron toevoegen" om het gegenereerde kaartbestandadres toe te voegen.

Bijvoorbeeld:

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

(Einde)

[Angular] Angular 11-serie (XIV) productieomgeving voor debugging

Gerelateerde berichten

Secties bekeken