Cải thiện trải nghiệm gỡ lỗi trong Công cụ của Chrome cho nhà phát triển bằng tiện ích bản đồ nguồn ignoreList.
Công cụ của Chrome cho nhà phát triển 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. Xem dấu vết ngăn xếp sau đây trong 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ị các khung có liên quan đến mã của bạn.
ignoreList. Chế độ cài đặt sau sẽ ẩn các khung hình 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ố là x_.
Công cụ của Chrome cho nhà phát triển sử dụng trường ignoreList (nếu có) để lọc ra mã được tạo và cho phép nhà phát triển web chỉ tập trung vào đoạn 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 ban đầu mà mục nhập mappings sử dụng. Hãy xem bài viết Bản đồ nguồn là gì? để tìm hiểu cách hoạt động của mối liên kết.
Do 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 đó trong trường sources. Công cụ của Chrome cho nhà phát triển sẽ áp dụng thông tin này để ẩn khung khỏi các 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.
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 là Tự động thêm các 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 công cụ 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 Sources (Nguồn) để tập trung vào mã của mình.
Cách điền thông tin vào 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 là bạn có thể 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 sẽ cung cấp chế độ cài đặt để định cấu hình công cụ đó. Ngoài ra, bạn cũng có thể sử dụng một trình bổ trợ gói web để làm việc này.
Nếu là một đơn vị duy trì khung hoặc thư viện, bạn cần nắm được 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 đây để tìm hiểu cách Angular và Nuxt thực hiện việc này.
Nếu khung và công cụ xây dựng yêu thích của bạn 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 để áp dụng các chế độ cài đặt mới này. Bạn cũng có thể trợ giúp bằng cách thông báo cho những người duy trì về tính năng này. Ví dụ: bạn có thể báo cáo vấn đề trong kho lưu trữ của họ.
Ngoài ra, bạn có thể thêm các tập lệnh không liên quan vào Danh sách bỏ qua theo cách thủ công ngay trong cây tệp trên Công cụ cho nhà phát triển > Nguồn > Ngăn Page (Trang) để nhận đượ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 ở Nuxt
Kể từ Nuxt v3.3.1, nội dung của node_modules và Nuxt buildDir đã được đánh dấu là "sẽ bị trình gỡ lỗi bỏ qua".
Điều này đạt được nhờ thay đổi trong cấu hình bản dựng của Nuxt bằng cách sử dụ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 muốn bày tỏ lòng biết ơn với nhóm Vite và Nuxt vì đã giúp điều này có thể. Chúng tôi trân trọng nỗ lực và sự hợp tác của bạn và đó chính là yếu tố quan trọng mang lại thành công cho quá trình triển khai này. Một lần nữa, xin cảm ơn các 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 các thư mục node_modules và webpack đã được đánh dấu là "để bỏ qua".
Điều này đạt được nhờ 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 gói web.
Trình bổ trợ webpack mà các kỹ sư của chúng tôi đã tạo các hook vào giai đoạn PROCESS_ASSETS_STAGE_DEV_TOOLING và điền sẵn 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ề những điểm cải tiến khác về cách gỡ lỗi góc trong Công cụ cho nhà phát triển, hãy xem Nghiên cứu điển hình: Gỡ lỗi góc tốt hơn bằng Công cụ cho nhà phát triển.
Nhóm Công cụ của Chrome cho nhà phát triển muốn gửi lời cảm ơn đến nhóm Angular vì những đóng góp quý giá của họ cho sự thành công của quá trình triển khai này. Chúng tôi rất trân trọng nỗ lực và sự cộng tác của bạn. Cảm ơn đội ngũ Angular đã giúp bạn đạt được mục tiêu này!