Kaynak haritaları nedir?

Jecelyn Yeen

Kaynak haritaları, modern web geliştirmede hata ayıklamayı önemli ölçüde kolaylaştıran önemli bir araçtır. Bu sayfada, kaynak haritalarıyla ilgili temel bilgiler, bu haritaların nasıl oluşturuldukları ve hata ayıklama deneyimini nasıl iyileştirdikleri ele alınmaktadır.

Kaynak eşleme ihtiyacı

İlk web uygulamaları, düşük karmaşıklık düzeyiyle geliştirilmişti. Geliştiriciler HTML, CSS ve JavaScript dosyalarını doğrudan web'e dağıttı.

Daha modern ve karmaşık web uygulamalarının geliştirme iş akışlarında çeşitli araçlar gerekebilir. Örneğin:

• Şablon oluşturma dilleri ve HTML ön işlemcileri: Pug, Nunjucks, Markdown.
• CSS ön işlemcileri: SCSS, LESS, PostCSS.
• JavaScript çerçeveleri: Angular, React, Vue, Svelte.
• JavaScript meta çerçeveleri: Next.js, Nuxt, Astro.
• Üst düzey programlama dilleri: TypeScript, Dart, CoffeeScript.

Bu araçlar, kodunuzu tarayıcıların anlayabileceği standart HTML, JavaScript ve CSS'ye dönüştürmek için bir derleme işlemi gerektirir. Bu dosyaları küçültüp birleştirerek Terser gibi bir araç kullanarak performansı optimize etmek de yaygın bir uygulamadır.

Örneğin, oluşturma araçlarını kullanarak aşağıdaki TypeScript dosyasını tek bir JavaScript satırına çevirip sıkıştırabiliriz. GitHub'daki bu demoda kendiniz de deneyebilirsiniz.

/* 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ı zorlaştırabilir. Kaynak haritaları bu sorunu ortadan kaldırabilir: Derlenen kodunuzu orijinal kodla tekrar eşleyerek bir hatanın kaynağını hızlı bir şekilde bulmanıza yardımcı olabilirler.

Kaynak eşlemeleri oluşturma

Kaynak haritaları, adları .map ile biten dosyalardır (örneğin, example.min.js.map ve styles.css.map). Bu dosyalar Vite, webpack, Rollup, Parcel ve esbuild gibi çoğu derleme aracı tarafından oluşturulabilir.

Bazı araçlar varsayılan olarak kaynak eşlemelerini içerir. Bazıları ise bunları üretmek için ek yapılandırmaya ihtiyaç duyabilir:

/* 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şlemesini anlama

Hata ayıklamaya yardımcı olmak amacıyla bu kaynak eşleme dosyaları, derlenen kodun orijinal kodla nasıl eşlendiği hakkında önemli bilgiler içerir. Kaynak eşleme örneği:

{
  "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 anlamak için kaynak haritası spesifikasyonunu veya Kaynak haritasının anatomisini okuyabilirsiniz.

Kaynak eşlemesinin en önemli bölümü mappings alanıdır. Derlenen dosyadaki satırları ve konumları, karşılık gelen orijinal dosya ile eşlemek için VLQ base 64 kodlamalı dize kullanır. Bu eşlemeyi, kaynak-haritası-görselleştirme veya Kaynak Haritası Görselleştirme gibi bir kaynak haritası görselleştirici kullanarak görüntüleyebilirsiniz.

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

Görselleştirici, orijinal sütunundaki her satırı generate sütunundaki karşılık gelen kodla birlikte renklendirir.

Eşlemeler bölümünde, kodun kodu çözülmüş eşlemeleri gösterilir. Ö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ütunda başlar.

Bu, geliştiricilerin küçültülmüş kod ile orijinal kod arasındaki ilişkiyi hızla tanımlamasına olanak tanıyarak hata ayıklama sürecini daha sorunsuz hale getirir.

Tarayıcı geliştirici araçları, hata ayıklama sorunlarınızı tarayıcıda hızlı bir şekilde tespit etmenize yardımcı olmak için bu kaynak eşlemelerini uygular.

Kaynak eşlemesi uzantıları

Kaynak eşlemeleri, x_ önekiyle başlayan özel uzantı alanlarını destekler. Bunlardan biri, Chrome Geliştirici Araçları tarafından önerilen x_google_ignoreList uzantı alanıdır. Bu uzantıların kodunuza odaklanmanıza nasıl yardımcı olduğu hakkında daha fazla bilgi edinmek için x_google_ignoreList sayfasına bakın.

Kaynak haritasının dezavantajları

Maalesef, kaynak eşlemeleri her zaman olması gerektiği kadar eksiksiz değildir. İlk örneğimizde greet değişkeni, değeri doğrudan nihai dize çıkışına yerleştirilmiş olsa da derleme işlemi sırasında optimize edilmiştir.

Bu durumda, kodda hata ayıkladığınızda geliştirici araçları gerçek değeri tahmin edemeyebilir ve gösteremeyebilir. Bu tür hatalar, kodunuzun izlenmesini ve analiz edilmesini zorlaştırabilir.

Bu sorunun, kaynak haritalarının tasarlanması sırasında çözülmesi gerekir. Olası çözümlerden biri, kapsam bilgilerini kaynak haritalara, diğer programlama dillerinin hata ayıklama bilgileriyle aynı şekilde dahil etmektir.

Ancak bu, kaynak haritası spesifikasyonunu ve uygulamasını iyileştirmek için tüm ekosistemin birlikte çalışmasını gerektirir. Kaynak eşlemeleriyle hata ayıklanabilirliğini iyileştirme konusunda devam eden çalışmaları takip etmek için GitHub'da Source Maps v4 (Kaynak Haritaları v4) teklifine bakın.