Apa itu peta sumber?

Jecelyn Yeen

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.