Giới thiệu
Ngày nay, các tác giả có thể sử dụng nhiều mô-đun trừu tượng để xây dựng các ứng dụng web của họ. Thay vì giao tiếp trực tiếp với các API cấp thấp hơn mà Nền tảng web cung cấp, nhiều tác giả đã tận dụng khung, công cụ xây dựng và trình biên dịch để viết ứng dụng của họ từ góc độ cấp cao hơn.
Ví dụ: các thành phần được xây dựng dựa trên khung Angular được tạo ra trong TypeScript với các mẫu HTML. Bên trong, CLI Angular và webpack biên dịch mọi thứ thành JavaScript và thành một gói, sau đó được chuyển đến trình duyệt.
Khi gỡ lỗi hoặc phân tích ứng dụng web trong Công cụ cho nhà phát triển, bạn hiện có thể xem và gỡ lỗi phiên bản mã đã biên dịch này thay vì mã bạn thực sự đã viết. Tuy nhiên, với tư cách là tác giả, bạn không muốn như vậy:
- Bạn không muốn gỡ lỗi mã JavaScript được rút gọn mà muốn gỡ lỗi mã JavaScript ban đầu.
- Khi sử dụng TypeScript, bạn không nên gỡ lỗi JavaScript mà nên gỡ lỗi mã TypeScript ban đầu.
- Khi bạn sử dụng mẫu như với Angular, Lit hoặc JSX, không phải lúc nào bạn cũng muốn gỡ lỗi DOM thu được. Bạn nên tự gỡ lỗi các thành phần.
Nhìn chung, bạn nên gỡ lỗi mã của riêng mình khi bạn viết mã.
Mặc dù bản đồ nguồn đã thu hẹp khoảng cách này ở một mức độ nào đó, nhưng vẫn còn nhiều việc khác mà Công cụ của Chrome cho nhà phát triển và hệ sinh thái có thể làm trong lĩnh vực này.
Hãy cùng xem nhé!
Mã đã tạo và đã triển khai
Hiện tại, khi điều hướng cây tệp trong Bảng điều khiển nguồn, bạn sẽ xem được nội dung của gói đã biên dịch và thường được rút gọn. Đây là các tệp thực tế mà trình duyệt tải xuống và chạy. Công cụ cho nhà phát triển gọi đây là Mã đã triển khai.
Tên này không tiện dụng lắm và thường khó nắm bắt. Là tác giả, bạn muốn xem và gỡ lỗi mã mà bạn đã viết, chứ không phải Mã đã triển khai.
Để bù đắp cho việc này, giờ đây, bạn có thể để cây hiển thị Authored Code (Mã tác giả). Điều này giúp cây giống với các tệp nguồn mà bạn sẽ thấy trong IDE và các tệp này giờ đây sẽ được tách riêng khỏi Mã đã triển khai.
Để bật lựa chọn này trong Công cụ của Chrome cho nhà phát triển, hãy chuyển đến phần Cài đặt > Thử nghiệm rồi chọn Nhóm các nguồn thành Cây được tạo và triển khai.
"Chỉ đoạn mã của tôi"
Khi sử dụng các phần phụ thuộc hoặc xây dựng trên một khung, các tệp của bên thứ ba có thể cản trở bạn. Thường thì bạn chỉ muốn xem mã của mình, chứ không muốn xem mã của một số thư viện bên thứ ba được cất giữ trong thư mục node_modules.
Để bù đắp cho công cụ này, 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 DevTools > Settings > Ignore List (Công cụ cho nhà phát triển > Cài đặt > Danh sách bỏ qua).
Khi bạn bật chế độ cài đặt này, Công cụ cho nhà phát triển sẽ ẩn mọi tệp hoặc thư mục mà khung hoặc công cụ xây dựng đã đánh dấu là cần bỏ qua.
Kể từ phiên bản Angular v14.1.0, nội dung của các thư mục node_modules và webpack đã được đánh dấu như vậy. Do đó, những thư mục này, các tệp trong đó và các cấu phần phần mềm khác của bên thứ ba không xuất hiện ở nhiều vị trí trong Công cụ cho nhà phát triển.
Với tư cách là tác giả, bạn không cần phải làm gì để kích hoạt hoạt động mới này. Việc triển khai thay đổi này là tuỳ thuộc vào khung chương trình.
Mã bị liệt kê bỏ qua trong dấu vết ngăn xếp
Một vị trí mà các tệp trong danh sách bỏ qua này không còn xuất hiện là trong dấu vết ngăn xếp. Giờ đây, với tư cách là tác giả, bạn sẽ biết dấu vết ngăn xếp có liên quan hơn.
Nếu muốn xem tất cả các khung lệnh gọi của dấu vết ngăn xếp, bạn có thể nhấp vào đường liên kết Show more frame (Hiện thêm khung).
Điều này cũng áp dụng cho các ngăn xếp lệnh gọi mà bạn thấy trong khi gỡ lỗi và duyệt qua mã. Khi các khung hoặc trình đóng gói thông báo cho Công cụ cho Công cụ về tập lệnh của bên thứ ba, Công cụ cho nhà phát triển sẽ tự động ẩn tất cả các khung lệnh gọi không liên quan và chuyển sang mọi mã được liệt kê đã bỏ qua trong khi gỡ lỗi theo bước.
Mã được liệt kê bị bỏ qua trong cây tệp
Để ẩn các tệp và thư mục trong danh sách bỏ qua khỏi cây tệp Mã được tạo trong bảng Nguồn, hãy chọn Ẩn mã được liệt kê trong danh sách bỏ qua ở chế độ xem dạng cây nguồn trong phần Cài đặt > Thử nghiệm trong Công cụ cho nhà phát triển.
Trong dự án Angular mẫu, các thư mục node_modules và webpack hiện đã bị ẩn.
Mã bị bỏ qua trong danh sách bỏ qua trong trình đơn "Mở nhanh"
Mã bị bỏ qua không chỉ bị ẩn khỏi cây tệp mà còn bị ẩn khỏi trình đơn "Mở nhanh" (Control+P (Linux/Windows) hoặc Command+P (Mac)).
Cải tiến thêm đối với dấu vết ngăn xếp
Sau khi sử dụng các dấu vết ngăn xếp có liên quan, Công cụ của Chrome cho nhà phát triển còn triển khai nhiều điểm cải tiến hơn nữa đối với dấu vết ngăn xếp.
Dấu vết ngăn xếp được liên kết
Khi một số hoạt động được lên lịch diễn ra không đồng bộ, dấu vết ngăn xếp trong Công cụ cho nhà phát triển hiện chỉ cho biết một phần câu chuyện.
Ví dụ: dưới đây là một trình lập lịch biểu rất đơn giản trong tệp framework.js giả định:
function makeScheduler() {
const tasks = [];
return {
schedule(f) {
tasks.push({ f });
},
work() {
while (tasks.length) {
const { f } = tasks.shift();
f();
}
},
};
}
const scheduler = makeScheduler();
function loop() {
scheduler.work();
requestAnimationFrame(loop);
};
loop();
... và cách nhà phát triển có thể sử dụng mã này trong mã của riêng họ ở tệp example.js:
function someTask() {
console.trace("done!");
}
function businessLogic() {
scheduler.schedule(someTask);
}
businessLogic();
Khi thêm một điểm ngắt vào bên trong phương thức someTask hoặc khi kiểm tra dấu vết được in trong bảng điều khiển, bạn không thấy bất kỳ đề cập nào về lệnh gọi businessLogic() mà là “nguyên nhân gốc” của thao tác này.
Thay vào đó, bạn chỉ thấy logic lập lịch khung dẫn đến việc thực thi tác vụ và không có breadcrumb (tập hợp liên kết phân cấp) trong dấu vết ngăn xếp để giúp bạn tìm ra mối liên kết nhân quả giữa các sự kiện dẫn đến nhiệm vụ này.
Nhờ một tính năng mới có tên "Gắn thẻ ngăn xếp không đồng bộ", bạn có thể kể toàn bộ câu chuyện bằng cách liên kết cả hai phần của mã không đồng bộ với nhau.
API Gắn thẻ ngăn xếp không đồng bộ giới thiệu một phương thức console mới có tên là console.createTask(). Chữ ký API như sau:
interface Console {
createTask(name: string): Task;
}
interface Task {
run<T>(f: () => T): T;
}
Lệnh gọi console.createTask() trả về một thực thể Task mà sau này bạn có thể dùng để chạy nội dung f của tác vụ.
// Task Creation
const task = console.createTask(name);
// Task Execution
task.run(f);
Tác vụ tạo thành mối liên kết giữa ngữ cảnh nơi nó được tạo và ngữ cảnh của hàm không đồng bộ đang được thực thi.
Áp dụng cho hàm makeScheduler từ trên, mã sẽ trở thành như sau:
function makeScheduler() {
const tasks = [];
return {
schedule(f) {
const task = console.createTask(f.name);
tasks.push({ task, f });
},
work() {
while (tasks.length) {
const { task, f } = tasks.shift();
task.run(f); // instead of f();
}
},
};
}
Nhờ đó, Công cụ của Chrome cho nhà phát triển giờ đây có thể hiển thị dấu vết ngăn xếp chính xác hơn.
Hãy lưu ý cách businessLogic() hiện được đưa vào dấu vết ngăn xếp! Không chỉ vậy, tác vụ còn có tên quen thuộc là someTask thay vì requestAnimationFrame chung như trước đây.
Khung cuộc gọi thân thiện
Các khung thường tạo mã từ tất cả các loại ngôn ngữ mẫu khi xây dựng dự án, chẳng hạn như các mẫu Angular hoặc JSX biến mã có dạng HTML thành JavaScript thuần tuý mà cuối cùng sẽ chạy trong trình duyệt. Đôi khi, những loại hàm được tạo này được đặt tên không thân thiện cho lắm – có thể là tên một chữ cái sau khi rút gọn hoặc là một số tên ít người biết đến hoặc xa lạ ngay cả khi chúng không được viết tắt.
Trong dự án mẫu, một ví dụ là AppComponent_Template_app_button_handleClick_1_listener mà bạn thấy trong dấu vết ngăn xếp.
Để giải quyết vấn đề này, Công cụ của Chrome cho nhà phát triển hiện hỗ trợ đổi tên các chức năng này thông qua bản đồ nguồn. Nếu một bản đồ nguồn có một mục nhập tên để bắt đầu một phạm vi hàm, thì khung lệnh gọi phải hiển thị tên đó trong dấu vết ngăn xếp.
Với tư cách là tác giả, bạn không cần phải làm gì để kích hoạt hoạt động mới này. Việc triển khai thay đổi này là tuỳ thuộc vào khung chương trình.
Hướng đến tương lai
Nhờ những phần bổ sung được nêu trong bài đăng này, Công cụ của Chrome cho nhà phát triển có thể mang lại cho bạn trải nghiệm gỡ lỗi tốt hơn. Có thêm những lĩnh vực mà nhóm muốn khám phá. Cụ thể là cách cải thiện trải nghiệm phân tích tài nguyên trong Công cụ cho nhà phát triển.
Nhóm Công cụ của Chrome cho nhà phát triển khuyến khích các tác giả khung áp dụng các khả năng mới này. 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 đưa ra hướng dẫn về cách triển khai phương pháp này.