Giữ cho mã phía máy khách dễ đọc và gỡ lỗi ngay cả sau khi bạn kết hợp, rút gọn 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 Nguồn.
Bắt đầu với trình xử lý trước
Bản đồ nguồn từ trình xử lý trước khiến DevTools tải các tệp gốc cùng vớ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ị cho bạn mã mà bạn đã tạo. Bạn có thể đặt điểm ngắt và từng bước thực hiện mã trong tệp nguồn. Tất cả lỗi, nhật ký và điểm ngắt sẽ tự động liên kết.
Điều này giúp bạn có cảm giác như đang gỡ lỗi mã khi viết, thay vì mã do máy chủ phát triển phân phát và 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 trình xử lý trước 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 trình xử lý trước được hỗ trợ
Các trình xử lý trước 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 ở:
- Công cụ biên dịch: Babel
- Trình biên dịch: TypeScript và Dart
- Trình rút gọn: terser
- Trình tạo gói và máy chủ phát triển: Webpack, Vite, esbuild và Parcel
Để biết danh sách mở rộng, hãy xem bài viết 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ớ đánh dấu vào 
Bản đồ nguồn JavaScript.
Kiểm tra xem bản đồ nguồn có được tải thành công hay không
Xem phần 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à đã bật, bạn có thể làm những việc sau:
- Mở nguồn của trang web trong bảng điều khiển Nguồn.
Để chỉ tập trung vào mã mà bạn viết, hãy nhóm các tệp đã viết và triển khai trong cây tệp. Sau đó, hãy mở rộng phần Authored (Đã viết)
và mở tệp nguồn gốc trong Trình chỉnh sửa.