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. Hãy xem dấu vết ngăn xếp dưới đâ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ị những khung có liên quan đến mã của bạn.
ignoreList. Sau đó, bạn sẽ ẩn đi các khung hình của bên thứ ba không liên quan để giúp bạn xác định các 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. Những trường như vậy đều có tiền tố x_.
Công cụ của Chrome cho nhà phát triển sử dụng trường ignoreList (nếu được cung cấp) để lọc ra mã đã tạo và cho phép nhà phát triển web chỉ tập trung vào 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 hiển thị danh sách các nguồn gốc 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 hình 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.
Trên thực 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: 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 mã 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 bạn.
Cách điền sẵ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 và phiên bản này sẽ hoạt động ngay từ đầu. Bạn có thể dễ dàng cải thiện tính năng theo dõi 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 các chế độ cài đặt để định cấu hình công cụ này. Ngoài ra, bạn cũng có thể sử dụng trình bổ trợ gói web cho trường hợp đó.
Nếu là một nhà bảo trì khung hoặc thư viện, thì bạn cần phải hiểu 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. Xem phần sau đây để biết cách Angular và Nuxt thực hiện điều đó trong hậu trường.
Nếu khung ứng dụng và công cụ bản dựng bạn yêu thích chưa hỗ trợ những công cụ này thì sao?
Chúng tôi đang tích cực làm việc với các khung làm việc và xây dựng các công cụ để thực hiện các chế độ cài đặt mới này. Bạn cũng có thể thông báo cho nhà bảo trì về tính năng này để hỗ trợ. Ví dụ: Bạn có thể gửi một vấn đề vào kho lưu trữ của họ.
Ngoài ra, bạn có thể tự thêm các tập lệnh không liên quan vào Danh sách bỏ qua ngay từ cây tệp trong 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à "sẽ bị trình gỡ lỗi bỏ qua".
Điều này có được thông qua thay đổi trong 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 muốn thể hiện sự cảm kích với nhóm Vite và Nuxt vì đã giúp họ đạt được mục tiêu này. Chúng tôi trân trọng nỗ lực và sự hợp tác của bạn, những yếu tố quan trọng tạo nên sự thành công của việc triển khai này. Một lần nữa, cảm ơn nhóm Vite và Nuxt vì đã đóng góp!
ignoreList trong Angular
Kể từ Angular v14.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 có được thông qua một thay đổi trong angular-cli bằng cách tạo một trình bổ trợ kết nối vào mô-đun Compiler của gói web.
Trình bổ trợ gói web mà các kỹ sư của chúng tôi đã tạo các nội dung hấp dẫn vào giai đoạn PROCESS_ASSETS_STAGE_DEV_TOOLING và điền sẵn những thành phần cuối cùng mà gói web tạo ra và trình duyệt sẽ tải vào trường ignoreList trong bản đồ nguồn.
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 về tính năng gỡ lỗi Angular trong Công cụ cho nhà phát triển, hãy xem 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 Công cụ của Chrome muốn gửi lời cảm ơn chân thành đến nhóm Angular vì những đóng góp vô cùng quý giá của họ cho sự thành công của quá trình triển khai này. Những nỗ lực và sự hợp tác của bạn rất quan trọng và chúng tôi rất trân trọng nỗ lực của bạn. Cảm ơn nhóm Angular đã giúp chúng tôi hiện thực hoá điều này!