Cải thiện trải nghiệm gỡ lỗi trong Chrome DevTools bằng tiện ích bản đồ nguồn ignoreList.
Chrome DevTools phân tích cú pháp trường ignoreList trong bản đồ nguồn để giúp cải thiện trải nghiệm gỡ lỗi của nhà phát triển. Hãy xem dấu vết ngăn xếp sau đây trong Console (Bảng điều khiển). Công cụ cho nhà phát triển tự động ẩn tất cả khung của bên thứ ba và chỉ hiển thị những khung có liên quan đến mã của bạn.
ignoreList. Chế độ sau ẩn các khung không liên quan của bên thứ ba để giúp bạn xác định vấn đề nhanh hơn trong quá trình gỡ lỗi.
ignoreList là gì?
Tiện ích bản đồ nguồn là các trường bổ sung lưu trữ thông tin bổ sung về bản đồ nguồn. Các trường như vậy có tiền tố x_.
Chrome DevTools sử dụng trường ignoreList (nếu được cung cấp) để lọc ra mã được tạo và cho phép nhà phát triển web chỉ tập trung vào mã mà họ tạo. Ví dụ: hãy xem bản đồ nguồn sau đây.
/* demo.js.map */
{
"version": 3,
"mappings": "AAAAA, ..."
"sources": [
"app.js",
"components/Button.ts",
"node_modules/.../framework.js",
"node_modules/.../library.js",
...
],
"ignoreList": [2, 3],
...
}
Trường sources cho thấy danh sách các nguồn gốc mà mục nhập mappings sử dụng. Hãy xem video Bản đồ nguồn là gì? để tìm hiểu cách hoạt động của bản đồ nguồn.
Giả sử hai tệp node_modules/…/frameworks.js và node_modules/.../library.js là tập lệnh của bên thứ ba, bạn có thể chỉ định trường ignoreList để cho biết vị trí của các tệp này trong trường sources. Chrome DevTools sẽ áp dụng thông tin này để ẩn khung khỏi những tệp bị bỏ qua đó.
Điều này cũng áp dụng cho Ngăn xếp lệnh gọi trong bảng điều khiển Nguồn trong quá trình gỡ lỗi điểm ngắt.
Trong nền, Công cụ cho nhà phát triển có một chế độ cài đặt bổ sung được bật theo mặc định: Tự động thêm tập lệnh đã biết của bên thứ ba vào danh sách bỏ qua. Bạn có thể tìm thấy chế độ này trong Công cụ cho nhà phát triển > Cài đặt > Danh sách bỏ qua.
Với trường bản đồ nguồn ignoreList, bạn có thể ẩn các tệp bị bỏ qua trong bảng điều khiển Nguồn để tập trung vào mã của mình.
Cách điền ignoreList
Tin vui là các khung như Angular và Nuxt đã định cấu hình ignoreList trong bản đồ nguồn của chúng. Hãy nâng cấp lên phiên bản mới nhất để sử dụng ngay. Bạn có thể dễ dàng cải thiện dấu vết ngăn xếp.
Mặt khác, các công cụ xây dựng như Vite và Rollup cung cấp các chế độ cài đặt để định cấu hình. Ngoài ra, còn có một trình bổ trợ webpack cho việc đó.
Nếu là người duy trì khung hoặc thư viện, bạn cần hiểu rõ cách triển khai các chế độ cài đặt này để cải thiện trải nghiệm gỡ lỗi của người dùng. Hãy xem phần sau để biết cách Angular và Nuxt thực hiện việc này trong thực tế.
Nếu khung và công cụ xây dựng mà bạn yêu thích chưa hỗ trợ thì sao?
Chúng tôi tích cực làm việc với các khung và công cụ xây dựng để đưa ra các chế độ cài đặt mới này. Bạn cũng có thể giúp bằng cách thông báo cho người bảo trì về tính năng này. Ví dụ: bạn có thể gửi vấn đề trong kho lưu trữ của họ.
Ngoài ra, bạn có thể thêm tập lệnh không liên quan vào Danh sách bỏ qua theo cách thủ công ngay từ cây tệp trên ngăn Công cụ cho nhà phát triển > Nguồn > Trang để đạt được kết quả tương tự.
Nghiên cứu điển hình: Triển khai Nuxt và Angular
Hãy xem hai nghiên cứu điển hình sau đây.
ignoreList trong Nuxt
Kể từ Nuxt phiên bản 3.3.1, nội dung của node_modules và Nuxt buildDir đã được đánh dấu là "bị trình gỡ lỗi bỏ qua".
Họ đạt được điều này nhờ thay đổi cấu hình bản dựng của Nuxt bằng Vite và Rollup:
/* vite.config.ts */
const ctx: ViteBuildContext = {
config: vite.mergeConfig(
build: {
rollupOptions: {
output: {
sourcemapIgnoreList: (relativeSourcePath) => {
return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
},
}
})
Nhóm Công cụ cho nhà phát triển xin cảm ơn nhóm Vite và Nuxt đã giúp chúng tôi thực hiện được điều này. Chúng tôi rất trân trọng nỗ lực và sự hợp tác của bạn, đây là những yếu tố thiết yếu giúp quá trình triển khai này thành công. Một lần nữa, xin cảm ơn nhóm Vite và Nuxt vì những đóng góp của các bạn!
ignoreList trong Angular
Kể từ Angular phiên bản 14.1.0, nội dung của thư mục node_modules và webpack đã được đánh dấu là "bỏ qua".
Họ đạt được điều này nhờ một thay đổi trong angular-cli bằng cách tạo một trình bổ trợ kết nối với mô-đun Compiler của webpack.
Trình bổ trợ webpack mà các kỹ sư của chúng tôi tạo ra sẽ kết nối với giai đoạn PROCESS_ASSETS_STAGE_DEV_TOOLING và điền vào trường ignoreList trong bản đồ nguồn bằng các thành phần cuối cùng mà webpack tạo ra và trình duyệt tải.
const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];
for (const [index, path] of map.sources.entries()) {
if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
ignoreList.push(index);
}
}
map[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));
Để tìm hiểu thêm về các điểm cải tiến khác trong việc gỡ lỗi Angular trong Công cụ cho nhà phát triển, hãy xem bài viết Nghiên cứu điển hình: Gỡ lỗi Angular hiệu quả hơn bằng Công cụ cho nhà phát triển.
Nhóm Chrome DevTools xin gửi lời cảm ơn đến nhóm Angular vì những đóng góp vô giá của họ cho sự thành công của quá trình triển khai này. Sự nỗ lực và hợp tác của bạn là vô cùng quan trọng và chúng tôi rất trân trọng sự chăm chỉ của bạn. Cảm ơn nhóm Angular đã giúp chúng tôi thực hiện được điều này!