|
|
Yayınlandı 30.06.2022 20:04:02
|
|
|
|
Gereksinimler: Ön uç proje kodunu (Angular, vue) üretim ortamına dağıtın, proje hazır olurDerleme süreci kodu sıkıştırır ve gizlemektedirDerleme sırasında bir harita dosyası oluşturulursa, kaynak dosyanın konumunu bulmak için harita dosyasını kullanabiliriz.
Sourcemap nedir?
Bir kaynak haritası, esasen kod dönüşümünden önce ve sonra ilgili konum bilgilerini saklayan bir bilgi dosyasıdır. Kaynak kodun konumunu dönüştürmeden önce sıkıştırılmış koda karşılık gelir ve kaynak kodu ile üretim kodu arasında bir eşlemedir. Sourcemap, paketleme sürecinde kodun sıkıştırılması, uzaydan ayrılması, derlenip dönüştürülmesi ve kodlar arasındaki büyük farklılıklar nedeniyle hata ayıklama yapılamaması sorununu çözer.
Sourcemap'in rolü
Basitçe söylemek gerekirse, Sourcemap, ön işlem ile sonradan işlem kodu arasında bir köprü kurarak üretimde hataların nerede meydana geldiğini kolayca tespit etmeyi sağlar. Bugünün ön yüz geliştirmesi modüler ve bileşen tabanlı olduğundan, JS ve CSS dosyalarını yayına başlamadan önce birleştirip sıkıştırmak kolayca kafa karışıklığına yol açabilir. SourceMap'in işlevi, tarayıcının hata ayıklama panelinin oluşturulan kodu kaynak kod dosyasına eşlemesine izin vermektir ve geliştiriciler kaynak kod dosyasında hata ayıklayabilir; bu da programcılar için hata ayıklamayı çok daha kolay ve kolay hale getirir.
Öncelikle, yeni bir Angular projesi oluşturun ve problemli bir kod parçası yazın.
HTML kodu şöyledir:
TS kodu şöyledir:
Geliştirme aşamasında, bir hata olursa, yanlış konumu bulmak çok kolaydır; aşağıdaki şekilde gösterilmiştir:
Projeyi bir sürüm paketine dönüştürün ve aşağıdaki komutla bir harita dosyası oluşturun:
Ortaya çıkan dosyayı IIS, Nginx gibi bir HTTP sunucusuna yerleştirin. Bu aradaHarita dosyasını farklı bir dizine taşıyın, test için uygundu.
Şu anda hata mesajını ve kaynak kodu sezgisel olarak göremeyiz, "Source Code Locator Tool"u aşağıdaki komutla yüklüyoruz:
Parametre tanıtımı:
Usage: sl [options]
Options:
-v, --versiyon sürümü çıktı sürüm numarası
-p, --source-flie-path Oluşturulan kaynak dosyası derlenmiş harita dosyası
-l, --ine Oluşturulan kaynak derlenmiş kod satırındaki satır numarası
-c, --sütun Oluşturulan kaynaktaki sütun numarası
-h, --yardım çıktı kullanım bilgisi
(Son)
|
Önceki:C# kullanarak tüm metni PDF dosyasından çıkarın (.NET Core'u destekliyor)Önümüzdeki:JavaScript'in ön uç bilgisi, genellikle ES6, ES8, ES 2017, ECMAScript olarak anılır
|
Yayınlandı 30.06.2022 21:36:37