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.
![Çeşitli araçlara kısa bir genel bakış.](https://web.developers.google.cn/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c.png?authuser=5&hl=tr)
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.
![Kaynak haritası görselleştirmesi.](https://web.developers.google.cn/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59.png?authuser=5&hl=tr)
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.
![Eşleme girişi.](https://web.developers.google.cn/static/articles/source-maps/image/mapping-entry-dc9df15808405.png?authuser=5&hl=tr)
65 -> 2:2
girişine odaklanan harita görselleştirme.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 uygulayan geliştirici araçları.](https://web.developers.google.cn/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb.png?authuser=5&hl=tr)
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.
![Değişken karşılama mesajı eşlenmedi.](https://web.developers.google.cn/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171.png?authuser=5&hl=tr)
greet
değişkeni eşlemede yok.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.
![Değişken karşılama mesajı tanımlanmadı.](https://web.developers.google.cn/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26.png?authuser=5&hl=tr)
greet
için bir değer bulamıyor.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.