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.](https://web.dev/static/articles/source-maps/image/a-brief-overview-various-769879995ff7c.png?authuser=19&hl=vi)
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.](https://web.dev/static/articles/source-maps/image/a-source-map-visualizatio-4866bc351df59.png?authuser=19&hl=vi)
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.](https://web.dev/static/articles/source-maps/image/mapping-entry-dc9df15808405.png?authuser=19&hl=vi)
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.](https://web.dev/static/articles/source-maps/image/developer-tools-applies-ea66f57e838eb.png?authuser=19&hl=vi)
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.](https://web.dev/static/articles/source-maps/image/variaqble-greet-is-map-a93a440f3c171.png?authuser=19&hl=vi)
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.](https://web.dev/static/articles/source-maps/image/variable-greet-is-undefin-19fcbf9a06a26.png?authuser=19&hl=vi)
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.