Bugün, modern web geliştirmede hata ayıklamayı önemli ölçüde kolaylaştıran çok önemli bir araç olan kaynak haritalarından bahsediyoruz. Bu makalede, kaynak haritaların temellerini, nasıl oluşturulduklarını ve hata ayıklama deneyimini nasıl iyileştirdiklerini keşfedeceğiz.
Kaynak haritalara duyulan ihtiyaç #
Eski güzel günlerde, saf HTML, CSS ve JavaScript ile web uygulamaları oluşturduk ve aynı dosyaları web’e yerleştirdik.
Ancak günümüzde daha karmaşık web uygulamaları oluşturduğumuzdan, geliştirme iş akışınız çeşitli araçları kullanmayı içerebilir. Örneğin:
- Şablon oluşturma dilleri ve HTML ön işlemcileri: Boksör, Rahibeler, İşaretleme.
- CSS ön işlemcileri: SCSS, AZ, PostCSS.
- JavaScript çerçeveleri: Angular, React, Vue, Svelte.
- JavaScript meta çerçeveleri: Sonraki.js, Nuxt, yıldız.
- Üst düzey programlama dilleri: Yazı Tipi, Dart oyunu, Kahve Komut Dosyası.
- Ve dahası. Liste uzayıp gidebilir!
Bu araçlar, kodunuzu tarayıcıların anlayabileceği standart HTML, JavaScript ve CSS’ye aktarmak için bir derleme süreci gerektirir. Ek olarak, performansı optimize etmek için sıkıştırmak (örneğin, Terser JavaScript’i küçültmek ve yönetmek için) ve bu dosyaları birleştirerek boyutlarını küçültün ve web için daha verimli hale getirin.
Örneğin, oluşturma araçlarını kullanarak, aşağıdaki TypeScript dosyasını aktarabilir ve tek bir JavaScript satırına sıkıştırabiliriz. ile oynayabilirsiniz GitHub depomdaki demo.
/* 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ış bir sürüm şöyle olacaktır:
/* 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 olduğu sıkıştırılmış kod ve daha kısa değişken adları, bir sorunun kaynağının tam olarak belirlenmesini zorlaştırabilir. Kaynak haritaların devreye girdiği yer burasıdır; derlenmiş kodunuzu orijinal koda geri eşlerler.
Kaynak haritaları oluşturma #
Kaynak haritalar, adları ile biten dosyalardır. .map (Örneğin, example.min.js.map Ve styles.css.map). Çoğu oluşturma aracı tarafından oluşturulabilirler, örneğin, Hızlı, web paketi, Toplama, Parsel, inşa etmekve dahası.
Bazı araçlar varsayılan olarak kaynak haritaları içerirken diğerleri bunları oluşturmak için ek yapılandırmaya ihtiyaç duyabilir.
/* Example configuration: vite.config.js */
/* */export default defineConfig({
build: {
sourcemap: true, // enable production source maps
},
css: {
devSourcemap: true // enable CSS source maps during development
}
})
Kaynak haritayı anlama #
Bu kaynak eşleme dosyaları, derlenen kodun orijinal kodla nasıl eşleştiği hakkında temel bilgiler içerir ve geliştiricilerin kolaylıkla hata ayıklamasını sağlar. İşte bir kaynak harita ö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 aşağıdakileri okuyabilirsiniz: kaynak harita belirtimi veya bu klasik makale bir kaynak haritanın anatomisi.
Bir kaynak haritanın en kritik yönü, mappings alan. bir kullanır VLQ base 64 kodlu dizi derlenmiş dosyadaki çizgileri ve konumları karşılık gelen orijinal dosyaya eşlemek için. Bu eşleme, aşağıdaki gibi bir kaynak harita görselleştirici kullanılarak görselleştirilebilir: kaynak harita görselleştirme Ve Kaynak Haritası Görselleştirme.
bu oluşturulan soldaki sütun sıkıştırılmış içeriği gösterir ve orijinal sütun orijinal kaynağı gösterir.
Görselleştirici renk, içindeki her satırı kodlar. orijinal sütunu ve karşılık gelen kodu oluşturulan kolon.
bu eşlemeler bölüm, kodun kodu çözülmüş eşlemelerini gösterir. Örneğin, giriş 65-> 2:2 araç:
- oluşturuldu kod: kelime
constsıkıştırılmış içerikte 65. konumdan başlar. - orijinal kod: kelime
constorijinal içerikte 2. satır ve 2. sütunda başlar.
Bu şekilde geliştiriciler, küçültülmüş kod ile orijinal kod arasındaki ilişkiyi hızlı bir şekilde tanımlayarak hata ayıklamayı daha sorunsuz bir süreç haline getirebilir.
Tarayıcı Geliştirici Araçları, hata ayıklama sorunlarınızı doğrudan tarayıcılarda daha hızlı belirlemenize yardımcı olmak için bu kaynak haritaları uygular.
Resim, tarayıcı Geliştirici Araçları’nın kaynak eşlemeleri nasıl uyguladığını ve dosyalar arasındaki eşlemeleri nasıl gösterdiğini gösterir.
Kaynak harita uzantıları #
Kaynak haritaları uzantıları destekler. Uzantılar, ile başlayan özel alanlardır. x_ adlandırma kuralı. Bir örnek, x_google_ignoreList Chrome DevTools tarafından önerilen uzantı alanı. Görmek x_google_ignoreListesi bu uzantıların kodunuza odaklanmanıza nasıl yardımcı olduğu hakkında daha fazla bilgi edinmek için.
mükemmel değil #
Örneğimizde, değişken greet oluşturma işlemi sırasında optimize edildi. Değer, doğrudan son dizi çıktısına gömüldü.
Bu durumda, kodda hata ayıkladığınızda, geliştirici araçları gerçek değeri anlayamayabilir ve görüntüleyemeyebilir. Bu, yalnızca tarayıcının geliştirici araçlarının karşılaştığı zorluklardan ibaret değildir. Ayrıca kod izleme ve analizini zorlaştırır.
Bu elbette çözülebilir bir problem. Yollardan biri, diğer programlama dillerinin hata ayıklama bilgileriyle yaptığı gibi kapsam bilgisini kaynak haritalara dahil etmektir.
Ancak bu, kaynak haritaların özelliklerini ve uygulamasını iyileştirmek için tüm ekosistemin birlikte çalışmasını gerektirir. bir var aktif tartışma kaynak haritalarla hata ayıklanabilirliğin iyileştirilmesi hakkında.
Kaynak haritaları iyileştirmeyi ve hata ayıklamayı daha az ezici hale getirmeyi dört gözle bekliyoruz!