Giữ cho mã phía máy khách của bạn có thể đọc được và gỡ lỗi ngay cả sau khi bạn đã kết hợp, giảm kích thước hoặc biên dịch mã. Sử dụng bản đồ nguồn để ánh xạ mã nguồn với mã đã biên dịch trong bảng điều khiển Nguồn.
Làm quen với bộ tiền xử lý
Bản đồ nguồn từ các bộ tiền xử lý khiến Công cụ cho nhà phát triển tải các tệp gốc ngoài những tệp đã giảm thiểu.
Chrome sẽ thực sự chạy mã đã giảm kích thước của bạn nhưng bảng điều khiển Nguồn sẽ hiển thị mã bạn tạo. Bạn có thể đặt điểm ngắt và bước duyệt qua mã trong tệp nguồn, đồng thời tất cả lỗi, nhật ký và điểm ngắt sẽ tự động ánh xạ.
Thao tác này giúp bạn có hình thức gỡ lỗi mã như khi bạn viết, khác với mã được máy chủ phát triển của bạn phân phát và được trình duyệt thực thi.
Cách sử dụng bản đồ nguồn trong bảng điều khiển Nguồn:
- Chỉ sử dụng các bộ tiền xử lý có thể tạo bản đồ nguồn.
- Xác minh rằng máy chủ web của bạn có thể phân phát bản đồ nguồn.
Sử dụng bộ tiền xử lý được hỗ trợ
Các bộ tiền xử lý phổ biến được sử dụng kết hợp với bản đồ nguồn bao gồm nhưng không giới hạn ở:
- Bộ chuyển ngữ: Babel
- Trình biên dịch: TypeScript và Dart
- Bộ thu nhỏ: terer
- Trình đóng gói và máy chủ phát triển: Webpack, Vite, esbuild và Parcel
Để xem danh sách mở rộng, hãy xem Bản đồ nguồn: Ngôn ngữ, công cụ và thông tin khác.
Bật bản đồ nguồn trong phần Cài đặt
Trong phần 
Cài đặt > Lựa chọn ưu tiên > Nguồn, hãy nhớ đánh dấu vào 
Bật bản đồ nguồn JavaScript.
Kiểm tra xem bản đồ nguồn đã tải thành công hay chưa
Xem Tài nguyên dành cho nhà phát triển: Xem và tải bản đồ nguồn theo cách thủ công.
Gỡ lỗi bằng bản đồ nguồn
Khi bản đồ nguồn đã sẵn sàng và đang bật, bạn có thể làm những việc sau:
- Mở các nguồn của trang web trong bảng Nguồn.
Để chỉ tập trung vào mã bạn tạo, hãy nhóm các tệp đã tạo và triển khai trong cây tệp. Sau đó, hãy mở rộng mục
Tác giả và mở tệp nguồn ban đầu trong Trình chỉnh sửa.
Đặt một điểm ngắt như bạn thường làm. Ví dụ: điểm ghi nhật ký. Sau đó, hãy chạy mã.
Lưu ý rằng Trình chỉnh sửa đặt đường liên kết đến tệp đã triển khai trong thanh trạng thái ở dưới cùng. Tương tự như vậy, nó cũng làm như vậy đối với các tệp CSS đã triển khai.
Mở ngăn Bảng điều khiển. Trong ví dụ này, bên cạnh thông báo của điểm ghi nhật ký, Console sẽ hiển thị đường liên kết đến tệp gốc, chứ không phải tệp đã triển khai.
Thay đổi loại điểm ngắt thành loại thông thường và chạy lại mã. Lần này quá trình thực thi sẽ tạm dừng.
Lưu ý ngăn Call Stack (Ngăn xếp lệnh gọi) hiển thị tên của tệp gốc chứ không phải tệp đã triển khai.
Trong thanh trạng thái ở cuối Trình chỉnh sửa, hãy nhấp vào đường liên kết đến tệp đã triển khai. Bảng điều khiển Source (Nguồn) sẽ đưa bạn đến tệp tương ứng.
Khi bạn mở một tệp đã triển khai bất kỳ, Công cụ cho nhà phát triển sẽ thông báo cho bạn nếu tìm thấy nhận xét //# sourceMappingURL và tệp gốc có liên quan.
Lưu ý rằng Trình chỉnh sửa sẽ tự động in đẹp tệp đã triển khai. Trên thực tế, lớp này chứa tất cả mã trong một dòng, ngoại trừ ghi chú //# sourceMappingURL.
Đặt tên cho eval() cuộc gọi bằng #sourceURL
#sourceURL cho phép bạn đơn giản hoá quá trình gỡ lỗi khi xử lý các lệnh gọi eval(). Trình trợ giúp này trông rất giống với thuộc tính //# sourceMappingURL. Để biết thêm thông tin, hãy xem Thông số kỹ thuật của bản đồ nguồn V3.
Nhận xét //# sourceURL=/path/to/source.file sẽ yêu cầu trình duyệt tìm tệp nguồn khi bạn sử dụng eval(). Nhờ vậy, bạn có thể đặt tên cho phần đánh giá cũng như tập lệnh và kiểu cùng dòng.
Hãy kiểm tra điều đó trên trang minh hoạ này:
- Mở Công cụ cho nhà phát triển rồi chuyển đến bảng Nguồn.
- Trên trang này, hãy nhập một tên tệp tuỳ ý vào trường nhập dữ liệu Đặt tên mã:.
- Nhấp vào nút Compile (Biên dịch). Một thông báo sẽ xuất hiện cùng với tổng được đánh giá từ nguồn CoffeeScript.
- Trong cây tệp trên ngăn Trang, mở một tệp mới có tên tệp tuỳ chỉnh mà bạn đã nhập. Tệp này chứa mã JavaScript đã biên dịch có nhận xét
// #sourceURLvới tên gốc của tệp nguồn. - Để mở tệp nguồn, hãy nhấp vào đường liên kết trong thanh trạng thái của Trình chỉnh sửa.
