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 sau trong Console. Công cụ cho nhà phát triển sẽ 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 sẽ ẩn các khung của bên thứ ba không liên quan để giúp bạn xác định nhanh hơn các vấ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, nên bạn có thể chỉ định trường ignoreList để cho biết vị trí của các tập lệnh đó 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 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 danh sá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 Sources (Nguồn) để tập trung vào mã của mình.
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 để 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 bạn là người duy trì khung hoặc thư viện, 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. Hãy xem phần sau để biết cách Angular và Nuxt thực hiện việc này ở hậu trường.
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ể gửi 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 từ cây tệp trên ngăn DevTools > Sources (Công cụ phát triển > Nguồn) > Page (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 ở Nuxt
Kể từ Nuxt v3.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".
Đ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 DevTools xin cảm ơn các 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 cảm ơn bạn đã nỗ lực và hợp tác. Đó là yếu tố quan trọng giúp quá trình triển khai này thành công. 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 v14.1.0, nội dung của thư mục node_modules và webpack đã được đánh dấu là "bỏ qua".
Điều này đã đạt được thông qua thay đổi trong angular-cli bằng cách tạo một trình bổ trợ liên kết 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 các trình nối 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. Nỗ lực và sự hợp tác của bạn là yếu tố quan trọng. Chúng tôi rất cảm ơn bạn đã làm việc chăm chỉ. Cảm ơn đội ngũ Angular đã giúp bạn đạt được mục tiêu này!