Mẹo cho Công cụ cho nhà phát triển: Bản đồ nguồn là gì?

Sofia Emelianova
Sofia Emelianova

Bản đồ nguồn giúp bạn đọc và gỡ lỗi mã ngay cả sau khi kết hợp và rút gọn mã mà không ảnh hưởng đến hiệu suất.

Khi sử dụng nhiều trình biên dịch chuyển đổi, trình rút gọn và trình gói, mã bạn triển khai sẽ khác với mã bạn tạo. Để cải thiện hiệu suất mạng, các công cụ này nén mã thành một dòng, xoá các ký tự không cần thiết và rút ngắn các biến.

Mã đã rút gọn và mã gốc.

Nhiều công cụ có thể tạo bản đồ nguồn để đi kèm với mã của bạn.

Bản đồ nguồn.

Công cụ cho nhà phát triển Chrome đọc cả mã đã triển khai và bản đồ nguồn, đồng thời cho phép bạn gỡ lỗi mã như bình thường, ngay cả khi có điểm ngắt.

Sử dụng điểm ngắt trong DevTools trong tệp nguồn đã tạo.

Để hiểu rõ hơn về cách hoạt động của bản đồ nguồn, hãy xem trình trực quan hoá bản đồ nguồn.

Ngoài ra, bản đồ nguồn có thể có phần mở rộng. Nếu bạn xây dựng các công cụ và khung, hãy cân nhắc việc hỗ trợ các công cụ và khung đó. Hãy xem Nghiên cứu điển hình: Gỡ lỗi Angular hiệu quả hơn bằng DevTools, trong đó Nhóm DevTools và Angular đã cải thiện trải nghiệm gỡ lỗi trong DevTools bằng cách hỗ trợ tiện ích x_google_ignoreList.

Để tìm hiểu thêm, hãy xem: