Trang này được dịch bởi Cloud Translation API.

Bản đồ nguồn là gì?

Jecelyn Yeen

Bản đồ nguồn là một công cụ quan trọng trong quá trình phát triển web hiện đại, giúp gỡ lỗi dễ dàng hơn rất nhiều. Trang này khám phá thông tin cơ bản về bản đồ nguồn cũng như cách thức tạo và cách chúng cải thiện trải nghiệm gỡ lỗi.

Nhu cầu có bản đồ nguồn

Các ứng dụng web ban đầu được xây dựng với độ phức tạp thấp. Các nhà phát triển đã triển khai HTML, CSS, và JavaScript trực tiếp lên web.

Các ứng dụng web hiện đại và phức tạp hơn có thể cần đến nhiều công cụ trong trong quy trình phát triển. Ví dụ:

Ngôn ngữ tạo mẫu và bộ tiền xử lý HTML: Pug, Bánh kẹp thịt, Đánh dấu.
Bộ tiền xử lý CSS: SCSS, ÍT ÍT hơn, PostCSS.
Khung JavaScript: Angular, React, Vue, Svelte.
Khung meta JavaScript: Next.js, Nuxt, Astro.
Ngôn ngữ lập trình cấp cao: TypeScript, Dart, CoffeeScript.

Tổng quan ngắn gọn về các công cụ khác nhau. — Một số công cụ phát triển ứng dụng web phổ biến.

Những công cụ này đòi hỏi quá trình xây dựng để chuyển mã của bạn thành HTML chuẩn, JavaScript và CSS mà trình duyệt có thể hiểu được. Một phương pháp phổ biến là tối ưu hoá hiệu suất bằng cách giảm kích thước và kết hợp các tệp này, sử dụng một công cụ như Terser.

Ví dụ: bằng các công cụ xây dựng, chúng ta có thể chuyển đổi và nén nội dung sau vào một dòng JavaScript. Bạn có thể tự mình dùng thử trong bản minh hoạ trên GitHub.

/* 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);
});

Phiên bản nén sẽ là:

/* 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)}));

Tuy nhiên, việc nén mã có thể khiến việc gỡ lỗi trở nên khó khăn hơn. Bản đồ nguồn có thể loại bỏ vấn đề này: bằng cách ánh xạ mã đã biên dịch trở lại mã gốc, chúng có thể giúp bạn nhanh chóng tìm ra nguồn lỗi.

Tạo bản đồ nguồn

Bản đồ nguồn là các tệp có tên kết thúc bằng .map (ví dụ: example.min.js.map và styles.css.map). Các quảng cáo này có thể được tạo bằng hầu hết các bản dựng khác nhau, bao gồm Vite, webpack, Tổng hợp, Parcel và bản dựng.

Một số công cụ bao gồm bản đồ nguồn theo mặc định. Những người khác có thể cần thêm cấu hình để tạo chúng:

/* 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
  }
})

Tìm hiểu bản đồ nguồn

Để giúp gỡ lỗi, các tệp bản đồ nguồn này chứa thông tin cần thiết về cách liên kết mã đã biên dịch với mã gốc. Sau đây là ví dụ về bản đồ nguồn:

{
  "mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
  "sources": ["src/script.ts"],
  "sourcesContent": ["document.querySelector('button')..."],
  "names": ["document","querySelector", ...],
  "version": 3,
  "file": "example.min.js.map"
}

Để hiểu rõ từng trường này, bạn có thể đọc quy cách của bản đồ nguồn hoặc Cấu trúc của bản đồ nguồn.

Phần quan trọng nhất của bản đồ nguồn là trường mappings. Chiến dịch này sử dụng một Chuỗi mã hoá VLQ cơ sở 64 để ánh xạ các dòng và vị trí trong tệp được biên dịch tới tệp gốc tương ứng . Bạn có thể xem bản đồ này bằng cách sử dụng trình trực quan hoá bản đồ nguồn như source-map-visualization hoặc Hình ảnh trực quan hoá bản đồ nguồn.

Hình ảnh bản đồ nguồn. — Hình ảnh của mã ví dụ trước đó, do trình trực quan hoá tạo ra.

Cột đã tạo ở bên trái hiện nội dung nén và Cột original hiển thị nguồn ban đầu.

Trình hiển thị hình ảnh mã hóa từng dòng trong cột original bằng màu sắc mã tương ứng trong cột đã tạo.

Mục ánh xạ cho thấy các mối liên kết đã giải mã của mã. Ví dụ: mục nhập 65 -> 2:2 có nghĩa là:

Mã đã tạo: Từ const bắt đầu ở vị trí 65 trong nội dung nén.
Mã Original: Từ const bắt đầu ở dòng 2 và cột 2 trong nội dung gốc.

Mục liên kết. — Hình ảnh trực quan về bản đồ, tập trung vào mục `65 -> 2:2`.

Điều này cho phép nhà phát triển nhanh chóng xác định mối quan hệ giữa mã rút gọn và mã gốc, giúp quá trình gỡ lỗi diễn ra suôn sẻ hơn.

Công cụ dành cho nhà phát triển trình duyệt sẽ áp dụng các bản đồ nguồn này để giúp bạn xác định gỡ lỗi nhanh chóng trong trình duyệt.

Công cụ cho nhà phát triển áp dụng bản đồ nguồn. — Ví dụ về cách áp dụng công cụ cho nhà phát triển trình duyệt bản đồ nguồn và hiển thị mối liên kết giữa các tệp.

Tiện ích bản đồ nguồn

Bản đồ nguồn hỗ trợ các trường của tiện ích tuỳ chỉnh bắt đầu bằng tiền tố x_. Một ví dụ là trường tiện ích x_google_ignoreList do Chrome đề xuất Công cụ cho nhà phát triển. Xem x_google_ignoreList để tìm hiểu thêm về cách các tiện ích này giúp bạn tập trung vào mã của mình.

Hạn chế của bản đồ nguồn

Thật không may, việc liên kết nguồn không phải lúc nào cũng hoàn chỉnh như bạn cần. Trong ví dụ đầu tiên, biến greet được tối ưu hoá trong quá trình tạo bản dựng mặc dù giá trị của nó được nhúng trực tiếp vào dữ liệu đầu ra của chuỗi cuối cùng.

Lời chào của biến chưa được liên kết. — Biến `greet` trong phương diện ban đầu liên kết bị thiếu mã.

Trong trường hợp này, khi bạn gỡ lỗi mã, các công cụ cho nhà phát triển có thể không suy luận và hiển thị giá trị thực tế. Loại lỗi này có thể khiến mã của bạn khó theo dõi và phân tích hơn.

Không xác định được lời chào có thể thay đổi. — Công cụ cho nhà phát triển không tìm thấy giá trị cho `greet`.

Đây là vấn đề cần được giải quyết trong thiết kế của bản đồ nguồn. Một giải pháp tiềm năng là đưa thông tin phạm vi vào bản đồ nguồn trong giống như cách các ngôn ngữ lập trình khác làm với thông tin gỡ lỗi.

Tuy nhiên, để làm được điều này, toàn bộ hệ sinh thái phải hợp tác với nhau để cải thiện quy cách và cách triển khai của bản đồ nguồn. Để theo dõi sự kiện đang diễn ra trên cải thiện khả năng gỡ lỗi bằng bản đồ nguồn, hãy tham khảo đề xuất cho Source Maps phiên bản 4 trên GitHub.