Angular 11 -sarjan (XIV) tuotantoympäristö virheenkorjaukseen

Pikku roisto · Julkaistu 11.8.2020 17.59.35

Angular 9 -sarja (1) Dynaamisesti kuormitetut komponentit
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 -sarjan (2) dynaamisen komponentin siirtoparametrin
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 -sarja (3) sisältää dynaamiset komponenttitapahtumat
https://www.itsvse.com/thread-9246-1-1.html

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

Angular 9 Series (V) muotoilee summan valuuttamuodon
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 -sarja (VI) kutsuu natiiveja JS-muuttujia ja metodeja
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 sarjan (VII) CSS-tyylinen tähtäin
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 -sarja (VIII) päivittää lapsikomponentin arvon laukaisemalla tapahtuman setin kautta
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 Series (yhdeksän) #id valitsin sivulle
https://www.itsvse.com/thread-9278-1-1.html

Angular 9 -sarja (10) sisältää vconsole- ja eruda-kehittäjän debuggauspaneeleja
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Series (XI) 5 tapaa määritellä tyylit
https://www.itsvse.com/thread-9305-1-1.html

Angular 9 -sarja (XII) tuottaa dynaamisia tokeneita OTP:iden perusteella
https://www.itsvse.com/thread-9325-1-1.html

Angular 10 -sarja (kolmetoista) esittelee Baidu echarts -kaaviot
https://www.itsvse.com/thread-9347-1-1.html

Paketoimme Angular-projektin tuotantoympäristöön build-komennolla, ja odotettu vaikutus voi poiketa kehitysympäristössämme.

TS-koodi:

Kirjautuminen näkyy.

AppComponent on nykyinen komponentti.

Kehitys- ja tuotantoympäristön renderöinnit ovat seuraavat:

Tuotantoympäristö ei ollut lainkaan sitä, mitä odotimme.

Tietoa rakennuskomentotiedoista:

Kulmarakenteen suorituskyvyn optimointi
https://www.itsvse.com/thread-9203-1-1.html

Tällä hetkellä meidän täytyy debugata se.
SourceMap on tietotiedosto, joka tallentaa lähdekoodin ja käännetyn koodin sijaintikartoitukset

Front-end-työssä sitä käytetään pääasiassa virheenkorjausongelmien ratkaisemiseen seuraavissa kolmessa osa-alueessa:

a. Kun koodin pakkaus on sekaisin
b. Käännettyään css- tai JS-muotoon käyttäen muita kieliä, kuten sass- ja typeScript-kieliä
c. Monitiedostojen yhdistämisen jälkeen pakkaustyökalujen, kuten webpackin avulla

Yllä mainituissa kolmessa tapauksessa lähdekoodia ei voi debugata yhtä helposti kuin virheenkorjauksessa, joten tarvitsemme SourceMapin auttamaan sen muuntamisessa lähdekoodiksi konsolissa virheenkorjausta varten.

Meidän täytyy muokata build-komentoa, joka on seuraava:

Kirjautuminen näkyy.

(Ennen parametrien lisäämistä)

(Parametrien lisäämisen jälkeen)

Näet, että paljon *.map-tiedostoja generoidaan.

Kuten yllä olevassa kuvassa näkyy, käytä Google Chromea, paina F12 siirtyäksesi kehittäjätilaan, valitse lähde, valitse main.js ja sitten napsauta hiiren oikealla ja valitse "Lisää lähdekartta" -vaihtoehto lisätäksesi luodun karttatiedoston osoitteen.

Esimerkiksi:

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

(Loppu)

[Angular] Angular 11 -sarjan (XIV) tuotantoympäristö virheenkorjaukseen

Aiheeseen liittyvät julkaisut

Katsotut osuudet