Kaynak haritaları nedir?

Jecelyn Yeen

Kaynak haritaları modern web geliştirmede hata ayıklamayı sağlayan önemli bir araçtır kolaylaştırmıştı. Bu sayfada kaynak haritalarının temelleri, bu haritaların nasıl hata ayıklama deneyimini nasıl iyileştirdikleri hakkında daha fazla bilgi edineceksiniz.

Kaynak eşlemelerine olan ihtiyaç

İlk web uygulamaları, düşük karmaşıklık düzeyiyle oluşturulmuştur. Geliştiriciler tarafından HTML, CSS, ve JavaScript dosyalarını doğrudan web'e gönderir.

Daha modern ve karmaşık web uygulamalarının nasıl kullanacağınızı göstereceğim. Örneğin:

ziyaret edin.
Çeşitli araçlara kısa bir genel bakış.
Yaygın web uygulaması geliştirme araçlarından bazıları.

Bu araçlar, kodunuzu standart HTML'ye dönüştürmek için bir derleme işlemi gerektirir. Tarayıcıların anlayabileceği JavaScript ve CSS. Ayrıca proje yönetiminde aşağıdaki gibi bir araç kullanarak bu dosyaları küçültüp birleştirerek performansı optimize edebilirsiniz: Terser'a dokunun.

Örneğin, derleme araçlarını kullanarak aşağıdaki kod snippet'lerini TypeScript dosyasını tek bir JavaScript satırına ekleyin. Kendiniz denemek için GitHub'daki bu demoda bulabilirsiniz.

/* A TypeScript demo: example.ts */

document.querySelector('button')?.addEventListener('click', () => {
  const num: number = Math.floor(Math.random() * 101);
  const greet: string = 'Hello';
  (document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
  console.log(num);
});

Sıkıştırılmış sürüm şöyle olur:

/* A compressed JavaScript version of the TypeScript demo: example.min.js  */

document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));

Ancak kodunuzu sıkıştırmak hata ayıklamayı daha zor hale getirebilir. Kaynak eşlemeleri şu sorunu giderebilir: Derlenen kodunuzu orijinal koda geri eşleyerek bir hatanın kaynağını hızla bulmanıza yardımcı olabilirler.

Kaynak eşlemeleri oluştur

Kaynak eşlemeleri, adları .map ile biten dosyalardır (örneğin, example.min.js.map ve styles.css.map). Çoğu derleme tarafından oluşturulabilir Vite, webpack ve Birleştirme, Parsel ve esbuild.

Bazı araçlar varsayılan olarak kaynak eşlemelerini içerir. Diğerleri, yapılandırmalısınız:

/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */

export default defineConfig({
  build: {
    sourcemap: true, // enable production source maps
  },
  css: {
    devSourcemap: true // enable CSS source maps during development
  }
})

Kaynak eşlemeyi anlama

Bu kaynak eşleme dosyaları, hata ayıklamaya yardımcı olmak için önemli bilgileri içerir derlenen kodun orijinal kodla nasıl eşlendiği hakkında bilgi edinin. Elektronik tablo kullanarak yapılmış kaynak eşlemesi:

{
  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
  "sources": ["src/script.ts"],
  "sourcesContent": ["document.querySelector('button')..."],
  "names": ["document","querySelector", ...],
  "version": 3,
  "file": "example.min.js.map"
}

Bu alanların her birini öğrenmek için kaynak harita spesifikasyonu veya Bir kaynak haritasının anatomisi.

Kaynak eşlemenin en önemli bölümü mappings alanıdır. Bir VLQ base 64 kodlamalı dize için, derlenen dosyadaki satırları ve konumları karşılık gelen orijinal dosyası olarak kaydedebilirsiniz. Bu eşlemeyi aşağıdaki gibi bir kaynak harita görselleştirici kullanarak görüntüleyebilirsiniz: source-map-visualization veya Kaynak Harita Görselleştirme.

Kaynak harita görselleştirmesi.
Bir görselleştirici tarafından oluşturulmuş önceki kod örneğinin görselleştirmesi.

Soldaki oluşturuldu sütunu sıkıştırılmış içeriği, orijinal sütunu, orijinal kaynağı gösterir.

Görselleştirici, orijinal sütunundaki her satırı oluşturulan sütunundaki ilgili kod.

Eşlemeler bölümü, kodun kodu çözülmüş eşlemelerini gösterir. Örneğin, 65 -> 2:2 girişi şu anlama gelir:

  • Oluşturulan kod: const kelimesi, sıkıştırılmış içerikte 65. konumdan başlar.
  • Orijinal kod: const kelimesi, orijinal içerikte 2. satırdan ve 2. sütundan başlar.
ziyaret edin.
Eşleme girişi.
65 -> 2:2 girişine odaklanan haritalama görselleştirmesi.

Bu, geliştiricilerin küçültülmüş kod arasındaki ilişkiyi hızlı bir şekilde belirlemesini sağlar Böylece hata ayıklama işlemi daha kolay bir işlem haline gelir.

Tarayıcı geliştirici araçları, hata ayıklamayı kolaylaştırabilir.

Kaynak eşlemesi uygulayan geliştirici araçları.
Tarayıcı geliştirici araçlarının nasıl uygulandığıyla ilgili bir örnek kaynak eşlemelerini ve eşlemeleri göstermenizi sağlar.

Kaynak eşleme uzantıları

Kaynak eşlemeleri, x_ önekiyle başlayan özel uzantı alanlarını destekler. Bir örnek, Chrome tarafından önerilen x_google_ignoreList uzantısı alanıdır Geliştirici Araçları'nı tıklayın. Bkz. x_google_ignoreList inceleyin.

Kaynak eşleme dezavantajları

Maalesef kaynak eşlemeleri her zaman istediğiniz kadar eksiksiz olmayabilir. İlk örneğimizde, greet değişkeni derleme sırasında optimize edildi işleminin değeri doğrudan nihai dize çıktısına yerleştirilmiştir.

Değişken karşılama mesajı eşlenmedi.
Orijinal öğedeki greet değişkeni eşlemede kodu eksik.

Bu durumda, kodda hata ayıkladığınızda geliştirici araçları, çıkarımda bulunur ve gerçek değeri görüntüler. Bu tür bir hata, kodunuzun destekleyici materyalleri inceleyeceksiniz.

Selamlama değişkeni tanımlanmadı.
Geliştirici aracı greet için bir değer bulamıyor.

Bu, kaynak haritalarının tasarımı içinde çözülmesi gereken bir problemdir. Bir kaynak eşlemelerine kapsam bilgilerini dahil etmektir Tıpkı diğer programlama dillerinin hata ayıklama bilgileri için yaptıkları gibi.

Ancak bunun için, platformu geliştirmek üzere tüm ekosistemin birlikte çalışması kaynak harita spesifikasyonu ve uygulaması. Bu projede devam etmekte olan kaynak eşlemeleriyle hata ayıklanabilirliği iyileştirmek istiyorsanız Kaynak Haritalar v4 bulabilirsiniz.