Lingkungan produksi seri Angular 11 (XIV) untuk debugging

Sampah kecil · Diposting pada 11/08/2020 17.59.35

Komponen Angular 9 Series (1) yang Dimuat Secara Dinamis
https://www.itsvse.com/thread-9238-1-1.html

Parameter transmisi komponen dinamis seri 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

Seri Angular 9 (3) berlangganan peristiwa komponen dinamis
https://www.itsvse.com/thread-9246-1-1.html

Pipa Kustom Seri 9 (IV) Angular 9
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) memformat jumlah format mata uang
https://www.itsvse.com/thread-9249-1-1.html

Seri Angular 9 (VI) memanggil variabel dan metode JS asli
https://www.itsvse.com/thread-9254-1-1.html

Ruang lingkup gaya CSS seri 9 (VII)
https://www.itsvse.com/thread-9264-1-1.html

Seri Angular 9 (VIII) memperbarui nilai komponen turunan dengan memicu peristiwa melalui set
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 Series (sembilan) #id pemilih diterapkan pada halaman
https://www.itsvse.com/thread-9278-1-1.html

Seri Angular 9 (10) menyematkan panel debugging pengembang vconsole dan eruda
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Series (XI) 5 Cara Mendefinisikan Gaya
https://www.itsvse.com/thread-9305-1-1.html

Seri Angular 9 (XII) menghasilkan token dinamis berdasarkan OTP
https://www.itsvse.com/thread-9325-1-1.html

Seri Angular 10 (tiga belas) memperkenalkan grafik echarts Baidu
https://www.itsvse.com/thread-9347-1-1.html

Kami mengemas proyek Angular ke dalam lingkungan produksi dengan perintah build, dan efek yang diharapkan mungkin berbeda dari apa yang kami lihat di lingkungan pengembangan kami.

Kode TS:

Login terlihat.

AppComponent adalah komponen saat ini.

Rendering lingkungan pengembangan dan lingkungan produksi adalah sebagai berikut:

Lingkungan produksi sama sekali tidak seperti yang kami harapkan.

Tentang data perintah build:

Pengoptimalan performa build sudut
https://www.itsvse.com/thread-9203-1-1.html

Saat ini, kita perlu men-debugnya.
SourceMap adalah file informasi yang menyimpan pemetaan lokasi kode sumber dan kode yang dikompilasi

Dalam pekerjaan front-end, ini terutama digunakan untuk memecahkan masalah debug dalam tiga aspek berikut:

a. Setelah kompresi kode bingung
b. Setelah dikompilasi menjadi css atau JS menggunakan bahasa lain seperti sass dan typeScript
c. Setelah penggabungan multi-file menggunakan alat pengemasan seperti webpack

Dalam tiga kasus di atas, kita tidak dapat men-debug kode sumber semudah yang kita lakukan saat men-debug, jadi kita memerlukan SourceMap untuk membantu kita mengubahnya menjadi kode sumber di konsol untuk men-debug.

Kita perlu memodifikasi perintah build, yaitu sebagai berikut:

Login terlihat.

(Sebelum menambahkan parameter)

(Setelah menambahkan parameter)

Anda dapat melihat bahwa banyak file *.map dihasilkan.

Seperti yang ditunjukkan pada gambar di atas, gunakan Google Chrome, tekan F12 untuk masuk ke mode pengembang, pilih sumber, pilih main.js, lalu klik kanan dan pilih opsi "Tambahkan peta Sumber" untuk menambahkan alamat file peta yang dihasilkan.

Misalnya:

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

(Akhir)

[Sudut] Lingkungan produksi seri Angular 11 (XIV) untuk debugging

Pos terkait

Bagian yang dilihat