Peta sumber adalah alat penting dalam pengembangan web modern yang membuat proses debug secara signifikan lebih mudah. Halaman ini mengeksplorasi dasar-dasar peta sumber dan cara kerjanya dihasilkan, dan bagaimana mereka memperbaiki pengalaman {i>debugging<i}.
Kebutuhan akan peta sumber
Aplikasi web awal dibangun dengan kompleksitas rendah. Developer men-deploy HTML, CSS, dan file JavaScript secara langsung ke web.
Aplikasi web yang lebih modern dan kompleks memerlukan berbagai alat dalam pengembangan aplikasi. Contoh:
- Bahasa template dan praprosesor HTML: Pug, Nunjucks, Markdown.
- Praprosesor CSS: SCSS, LEBIH SEDIKIT, PostCSS.
- Framework JavaScript: Angular, Reak, Vue, Svelte.
- Framework meta JavaScript: Next.js, Nuxt, Astro.
- Bahasa pemrograman tingkat tinggi: TypeScript, Batang, CoffeeScript.
Alat ini membutuhkan proses build untuk mentranspilasi kode Anda menjadi HTML standar, JavaScript, dan CSS yang dapat dipahami browser. Praktik yang juga umum adalah mengoptimalkan kinerja dengan meminifikasi dan menggabungkan file-file ini, menggunakan alat seperti Terser.
Misalnya, dengan menggunakan alat build, kita dapat mentranspilasi dan mengompresi TypeScript ke dalam satu baris JavaScript. Anda dapat mencobanya sendiri di demo di GitHub ini.
/* 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);
});
Versi terkompresi adalah:
/* 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)}));
Namun, mengompresi kode Anda dapat membuat proses debug menjadi lebih sulit. Peta sumber dapat menghilangkan masalah ini: dengan memetakan kembali kode yang telah Anda kompilasi ke kode asli, mereka dapat membantu Anda menemukan sumber kesalahan dengan cepat.
Membuat peta sumber
Peta sumber adalah file dengan nama yang diakhiri dengan .map
(misalnya,
example.min.js.map
dan styles.css.map
). Iklan ini dapat dibuat oleh sebagian besar build
alat, termasuk Vite, webpack,
Gabungan, Parcel, dan
esbuild.
Beberapa alat menyertakan peta sumber secara default. Yang lain mungkin memerlukan tambahan untuk menghasilkannya:
/* 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
}
})
Memahami peta sumber
Untuk membantu proses debug, file peta sumber ini berisi informasi penting tentang bagaimana kode yang dikompilasi dipetakan ke kode asli. Berikut adalah contoh source map:
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}
Untuk memahami setiap kolom ini, Anda dapat membaca spesifikasi peta sumber atau Anatomi peta sumber.
Bagian terpenting peta sumber adalah kolom mappings
. Proses ini menggunakan
String berenkode VLQ base 64
untuk memetakan garis dan lokasi dalam file yang dikompilasi ke file asli yang sesuai
. Anda dapat melihat pemetaan ini menggunakan
visualizer peta sumber seperti
source-map-visualization atau
Visualisasi Peta Sumber.
Kolom yang dihasilkan di sebelah kiri menampilkan konten yang dikompresi, dan Kolom original menampilkan sumber asli.
Visualizer memberikan kode warna pada setiap baris di kolom asli dengan kode yang sesuai di kolom generated.
Bagian pemetaan menunjukkan pemetaan kode yang didekode. Misalnya,
entri 65 -> 2:2
berarti:
- Kode yang dihasilkan: Kata
const
dimulai di posisi 65 dalam konten yang dikompresi. - Kode asli: Kata
const
dimulai di baris 2 dan kolom 2 di konten asli.
Hal ini memungkinkan developer dengan cepat mengidentifikasi hubungan antara kode yang diminifikasi dan kode aslinya, membuat {i>debugging<i} menjadi proses yang lebih lancar.
Alat developer browser menerapkan peta sumber ini untuk membantu Anda mengidentifikasi proses {i>debugging <i}dengan cepat di {i>browser<i}.
Ekstensi peta sumber
Peta sumber mendukung kolom ekstensi kustom yang dimulai dengan awalan x_
. paket Premium AI
contohnya adalah kolom ekstensi x_google_ignoreList
yang diusulkan oleh Chrome
DevTools. Lihat x_google_ignoreList
untuk mempelajari lebih lanjut bagaimana ekstensi ini membantu Anda fokus pada kode.
Kelemahan peta sumber
Sayangnya, pemetaan sumber tidak selalu selengkap yang Anda butuhkan.
Dalam contoh pertama kami, variabel greet
dioptimalkan selama build
meskipun nilainya tertanam langsung ke dalam output string akhir.
Dalam hal ini, saat Anda men-debug kode, alat developer mungkin tidak dapat menginferensikan dan menampilkan nilai sebenarnya. Error semacam ini dapat membuat kode Anda pemantauan dan analisis yang lebih keras.
Ini masalah yang perlu diselesaikan dalam desain peta sumber. paket Premium AI solusi potensial adalah dengan menyertakan informasi ruang lingkup di peta sumber dalam sama seperti bahasa pemrograman lain dengan informasi {i>debug<i} mereka.
Namun, hal ini membutuhkan kerja sama seluruh ekosistem untuk meningkatkan spesifikasi dan penerapan peta sumber. Untuk mengikuti perkembangan meningkatkan kemampuan debug dengan peta sumber, lihat proposal untuk Source Maps v4 di GitHub.