Gỡ lỗi mã gốc thay vì triển khai bằng bản đồ nguồn

Meggin Kearney
Meggin Kearney
Paul Bakaus
Paul Bakaus
Sofia Emelianova
Sofia Emelianova

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 ở:

Để 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. Cài đặt > Lựa chọn ưu tiên > Nguồn, hãy nhớ đánh dấu vào Hộp đánh dấu. 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đã bật, bạn có thể làm những việc sau:

  1. Mở nguồn của trang web trong bảng điều khiển Nguồn.
  2. Để 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) Đã tạo. và mở tệp nguồn gốc trong Trình chỉnh sửa.

    Tệp gốc đã mở trong mục Authored (Tác giả).

  3. Đặt điểm ngắt như bình thường. Ví dụ: điểm ghi nhật ký. Sau đó, hãy chạy mã.

    Một điểm ghi nhật ký được đặt trong tệp đã tạo.

  4. 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, trình biên dịch này cũng làm như vậy đối với các tệp CSS đã triển khai.

    Đường liên kết đến các tệp CSS đã triển khai trong thanh trạng thái.

  5. Mở ngăn Console (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 hiển thị đường liên kết đến tệp gốc, chứ không phải tệp đã triển khai.

    Thông báo trên Bảng điều khiển có đường liên kết đến tệp gốc.

  6. Thay đổi loại điểm ngắt thành loại thông thường rồi chạy lại mã. Lần này, quá trình thực thi sẽ tạm dừng.

    Quá trình thực thi bị tạm dừng tại một điểm ngắt thông thường.

    Lưu ý rằng ngăn Call Stack (Ngăn xếp lệnh gọi) hiển thị tên của tệp ban đầu chứ không phải tệp đã triển khai.

  7. 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 Sources (Nguồn) sẽ đưa bạn đến tệp tương ứng.

Tệp đã triển khai có nhận xét sourceMappingURL.

Khi bạn mở bất kỳ tệp nào đã triển khai, DevTools 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 Trình chỉnh sửa sẽ tự động in đẹp 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ừ ghi chú //# sourceMappingURL.

Đặt tên cho lệnh 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 V3.

Chú thích //# 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(). Việc này giúp bạn đặt tên cho các hoạt động đánh giá, tập lệnh cùng dòng và kiểu.

Hãy kiểm thử trên trang minh hoạ này:

  1. Mở Công cụ cho nhà phát triển rồi chuyển đến bảng điều khiển Nguồn.
  2. Trên trang này, hãy nhập một tên tệp tuỳ ý vào trường nhập Name your code (Gọi tên mã của bạn).
  3. Nhấp vào nút Biên dịch. Một cảnh báo sẽ xuất hiện cùng với tổng số được đánh giá từ nguồn CoffeeScript.
  4. Trong cây tệp trên ngăn Page (Trang), hãy 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ó chú thích // #sourceURL với tên ban đầu của tệp nguồn.
  5. Để 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.

Nhận xét sourceURL và đường liên kết đến tệp nguồn trong thanh trạng thái.