Apa itu peta sumber?

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:

Ringkasan singkat tentang berbagai alat.
Beberapa alat pengembangan aplikasi web yang umum.

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.

Visualisasi peta sumber.
Visualisasi contoh kode sebelumnya, yang dihasilkan oleh visualizer.

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.
Entri pemetaan.
Visualisasi pemetaan, yang berfokus pada entri 65 -> 2:2.

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}.

Alat developer yang menerapkan peta sumber.
Contoh cara alat developer browser diterapkan peta sumber dan menampilkan pemetaan antar-file.

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.

Variabel greet tidak dipetakan.
Variabel greet dalam diagram asli kode tidak ada dalam pemetaan.

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.

Sapaan variabel tidak ditentukan.
Alat developer tidak dapat menemukan nilai untuk greet.

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.