Giữ cho mã phía máy khách của bạn dễ đọc và có thể 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 để liên kết mã nguồn với mã đã biên dịch trong bảng điều khiển Sources (Nguồn).
Làm quen với bộ tiền xử lý
Bản đồ nguồn từ bộ tiền xử lý khiến Công cụ cho nhà phát triển tải tệp gốc của bạn ngoài các tệp đã rút gọn.
Chrome sẽ thực sự chạy mã rút gọn của bạn nhưng bảng điều khiển Sources (Nguồn) sẽ hiển thị mã mà bạn tạo. Bạn có thể đặt điểm ngắt và thực hiện các bước qua mã trong tệp nguồn. Khi đó, tất cả các lỗi, nhật ký và điểm ngắt sẽ tự động liên kết.
Khi đó, bạn sẽ thấy trạng thái gỡ lỗi của mã ngay khi bạn viết, khác với mã do máy chủ phát triển của bạn phân phát và do 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 những 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 một bộ tiền xử lý được hỗ trợ
Các bộ tiền xử lý phổ biến được 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 đổi: Babel
- Trình biên dịch: TypeScript và Dart
- Thu nhỏ: terer
- Trình gói dịch vụ 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 
Cài đặt > Lựa chọn ưu tiên > Nguồn, hãy nhớ chọn 
Bật bản đồ nguồn JavaScript.
Kiểm tra xem bản đồ nguồn đã được 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
Với bản đồ nguồn sẵn sàng và được bật, bạn có thể thực hiện những việc sau:
- Mở các nguồn của trang web trong bảng điều khiển Sources (Nguồn).
Để chỉ tập trung vào mã bạn tác giả, hãy nhóm các tệp đã tạo và triển khai trong cây tệp. Sau đó, mở rộng phần
Authored (Đã tạo) rồi mở tệp nguồn ban đầu trong Editor (Trình chỉnh sửa).
Đặt điểm ngắt như bạn thường làm. Ví dụ: điểm nhật ký. Sau đó, chạy mã.
Lưu ý rằng Trình chỉnh sửa sẽ đặ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 cho 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ý, Bảng điều khiển sẽ hiển thị một đường liên kết đến tệp gốc chứ không phải tệp đã triển khai.
Hãy thay đổi loại điểm ngắt thành kiểu thông thường rồi chạy lại mã. Quá trình thực thi sẽ tạm dừng lần này.
Lưu ý rằng ngăn Call Stack (Ngăn xếp lệnh gọi) sẽ hiện tên của tệp gốc chứ không phải tên tệp được triển khai.
Trên 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 Sources (Nguồn) sẽ đưa bạn đến tệp tương ứng.
Khi bạn mở bất kỳ tệp đã triển khai nào, 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 kết.
Lưu ý rằng Editor (Trình chỉnh sửa) đã tự động tạo bản in đẹp cho tệp đã triển khai. Trên thực tế, tệp này chứa tất cả mã trong một dòng, ngoại trừ chú thích //# sourceMappingURL.
Đặt tên cho các cuộc gọi eval() bằng #sourceURL
#sourceURL cho phép bạn đơn giản hoá việc 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 phiên bản 3.
Nhận xét //# sourceURL=/path/to/source.file yêu cầu trình duyệt tìm tệp nguồn khi bạn sử dụng eval(). Thao tác này giúp bạn đặt tên cho các lượt đánh giá cũng như tập lệnh và kiểu cùng dòng.
Kiểm tra điều này trên trang minh hoạ này:
- Mở Công cụ cho nhà phát triển rồi chuyển đến bảng điều khiển Nguồn.
- Trên trang này, hãy nhập tên tệp tuỳ ý vào trường nhập dữ liệu Đặt tên cho mã của bạn:.
- Nhấp vào nút Biên dịch. Một cảnh báo sẽ xuất hiện với tổng được đánh giá từ nguồn CoffeeScript.
- Trong cây tệp trên ngăn Page (Trang), hãy mở 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 được biên dịch có nhận xét
// #sourceURLvới tên ban đầu 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.
