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:
- Şablon oluşturma dilleri ve HTML ön işlemcileri: Pug, Nunjuck Markdown.
- CSS ön işlemcileri: SCSS, DAHA AZ, 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=0000&hl=tr)
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.](https://web.developers.google.cn/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59.png?authuser=0000&hl=tr)
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.
![Eşleme girişi.](https://web.developers.google.cn/static/articles/source-maps/image/mapping-entry-dc9df15808405.png?authuser=0000&hl=tr)
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ı.](https://web.developers.google.cn/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb.png?authuser=0000&hl=tr)
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.](https://web.developers.google.cn/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171.png?authuser=0000&hl=tr)
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ı.](https://web.developers.google.cn/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26.png?authuser=0000&hl=tr)
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.