Kaynak haritaları nedir?

Kaynak eşlemeleriyle web'de hata ayıklama deneyimini iyileştirin.

Jecelyn Yeen

Bugün, modern web geliştirmede hata ayıklamayı önemli ölçüde kolaylaştıran önemli bir araç olan kaynak haritaları hakkında konuşacağız. Bu makalede, kaynak haritalarıyla ilgili temel bilgileri, bu haritaların nasıl oluşturulduklarını ve hata ayıklama deneyimini nasıl iyileştirdiklerini keşfedeceğiz.

Kaynak eşleme ihtiyacı

Eskiden beri sadece HTML, CSS ve JavaScript ile web uygulamaları oluşturuyor ve aynı dosyaları web'e dağıtıyorduk.

Ancak, günümüzde daha karmaşık web uygulamaları oluşturmakta olduğumuz için geliştirme iş akışınızda çeşitli araçlar kullanmanız 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.
• Ve daha fazlası. Liste bu şekilde uzayabilir.

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. Buna ek olarak, performansı optimize etmek için yaygın bir uygulama, dosyaları sıkıştırarak (örneğin, JavaScript'i küçültmek ve karıştırmak için Terser kullanarak) birleştirmek ve böylece boyutlarını küçülterek web için daha verimli hale getirmektir.

Ö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 depomdaki demoyu izleyebilirsiniz.

/* 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 bu optimizasyon, hata ayıklamayı daha zor hale getirebilir. Her şeyin tek bir satırda yer aldığı sıkıştırılmış kod ve daha kısa değişken adları, sorunun kaynağını tespit etmeyi zorlaştırabilir. Kaynak eşlemeleri burada devreye girer. Oluşturduğunuz kodu orijinal kodla eşlerler.

Kaynak eşlemeleri oluşturuluyor

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

Bazı araçlar varsayılan olarak kaynak haritaları içerir, diğerlerinde ise bunları oluşturmak için ek yapılandırma gerekebilir.

/* 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

Bu kaynak eşlemesi dosyaları, derlenen kodun orijinal kodla nasıl eşleştiği hakkında önemli bilgiler içerir ve geliştiricilerin kolayca hata ayıklamasına olanak tanır. Kaynak eşleme örneğini aşağıda bulabilirsiniz.

{
  "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 eşleme spesifikasyonunu veya kaynak haritasının anatomisi hakkındaki bu klasik makaleyi okuyabilirsiniz.

Kaynak eşlemenin en önemli özelliği 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şleme, kaynak-haritası-görselleştirme ve Kaynak Haritası Görselleştirme gibi bir kaynak haritası görselleştirici kullanılarak görselleştirilebilir.

Resimde, yukarıdaki kod örneğimizin bir görselleştirici tarafından oluşturulmuş görselleştirmesi gösterilmektedir.

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

Görselleştirici renk, orijinal sütunundaki her satırı ve generate sütunundaki ilgili kodu kodlar.

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 sayede geliştiriciler, küçültülmüş kod ile orijinal kod arasındaki ilişkiyi hızlı bir şekilde tanımlayarak hata ayıklama sürecini daha sorunsuz bir hale getirebilir.

Tarayıcı Geliştirici Araçları, hata ayıklama sorunlarınızı doğrudan tarayıcılarda daha hızlı bir şekilde tespit etmenize yardımcı olmak için bu kaynak eşlemelerini uygular.

Bu resimde, tarayıcı Geliştirici Araçları'nın kaynak eşlemelerini nasıl uyguladığı ve dosyalar arasındaki eşlemeler gösterilmektedir.

Kaynak eşlemesi uzantıları

Kaynak eşlemeleri için destek uzantıları. Uzantılar, x_ adlandırma kuralıyla başlayan özel alanlardır. 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.

Kusursuz değil

Örneğimizde greet değişkeni, derleme işlemi sırasında optimize edilmiştir. Değer, nihai dize çıkışına doğrudan yerleştirilmiştir.

Bu durumda, kodda hata ayıkladığınızda geliştirici araçları gerçek değeri tahmin edemeyebilir ve gösteremeyebilir. Bu, tarayıcının geliştirici araçlarının karşılaştığı zorluklardan biri değildir. Ayrıca, kod izlemeyi ve analizini de zorlaştırır.

Bu elbette çözülebilir bir sorundur. Bunlardan biri, diğer programlama dillerinin hata ayıklama bilgileriyle yaptığı gibi, kapsam bilgilerini kaynak haritalarına eklemektir.

Ancak bu, kaynak haritalarının spesifikasyonunu ve uygulamasını iyileştirmek için ekosistemin tamamının birlikte çalışmasını gerektirir. Kaynak eşlemeleriyle hata ayıklamanın iyileştirilmesi konusunda etkin bir tartışma yapılmaktadır.

Kaynak haritalarını iyileştirmeyi ve hata ayıklamayı daha da yorucu hale getirmeyi sabırsızlıkla bekliyoruz!