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

Sofia Emelianova
Sofia Emelianova

Sử dụng bảng điều khiển Tài nguyên dành cho nhà phát triển để kiểm tra xem DevTools có tải thành công bản đồ nguồn hay không. Bạn có thể tải các tệp này theo cách thủ công nếu cần.

Tổng quan

Khi bạn mở Công cụ cho nhà phát triển, công cụ này sẽ cố gắng tải bản đồ nguồn (nếu có). Trong trường hợp không thành công, Console sẽ ghi lại lỗi tương tự như sau.

Lỗi tải bản đồ nguồn trong Console.

Trong bảng điều khiển Tài nguyên dành cho nhà phát triển, bạn có thể xem trạng thái tải bản đồ nguồn và thậm chí tải bản đồ nguồn theo cách thủ công.

Mở Tài nguyên dành cho nhà phát triển và kiểm tra trạng thái

Cách kiểm tra trạng thái tải của bản đồ nguồn:

  1. Mở DevTools, nhớ bật bản đồ nguồn rồi chuyển đến > Công cụ khác > Tài nguyên dành cho nhà phát triển.
  2. Trong bảng, hãy kiểm tra các giá trị trong các cột sau:

    • Trạng thái để xem quá trình tải bản đồ nguồn có thành công hay không.
    • Error (Lỗi) để đọc thông báo lỗi (nếu có).

Cột Trạng thái và Lỗi.

Lọc tài nguyên theo URL hoặc Lỗi

Để tập trung vào các bản đồ nguồn mà bạn quan tâm, hãy nhập văn bản vào hộp văn bản ở trên cùng để lọc ra các bản đồ nguồn không chứa văn bản này trong URL hoặc thông báo lỗi.

Lọc ra các bản đồ nguồn không chứa "js" trong URL.

Khắc phục sự cố khi tải bản đồ nguồn

Theo mặc định, Công cụ cho nhà phát triển yêu cầu bản đồ nguồn thay vì trang web. Những yêu cầu như vậy có thể được coi là trên nhiều nguồn gốc và có thể không được chấp nhận.

Để yêu cầu trang web tạo bản đồ nguồn trước tiên, ở góc trên cùng bên phải của Tài nguyên dành cho nhà phát triển, hãy đánh dấu vào Hộp đánh dấu. Tải qua trang web.

Hộp đánh dấu "Tải thông qua trang web"

Nếu bạn vẫn gặp vấn đề khi tải bản đồ nguồn, hãy thử tải theo cách thủ công như mô tả bên dưới.

Tải bản đồ nguồn theo cách thủ công

Nếu gặp lỗi tải hoặc muốn gỡ lỗi mã gốc trên một trang web đang hoạt động thiếu bản đồ nguồn, bạn có thể tải các bản đồ nguồn đó theo cách thủ công:

  1. Tạo bản đồ nguồn bằng các công cụ hỗ trợ bản đồ nguồn.
  2. Lưu trữ bản đồ nguồn trên máy.
  3. Mở Công cụ cho nhà phát triển trên trang và nhớ bật bản đồ nguồn.
  4. Mở tệp đã triển khai (đã xử lý) trong Sources (Nguồn), nhấp chuột phải vào tệp đó trong Editor (Trình chỉnh sửa) rồi chọn Add source map (Thêm bản đồ nguồn) trong trình đơn.

    Chọn "Thêm bản đồ nguồn" trong trình đơn.

  5. Trong hộp văn bản, hãy chỉ định URL của bản đồ nguồn rồi nhấp vào Thêm.

    Chỉ định URL của bản đồ nguồn.

  6. Kiểm tra xem bản đồ nguồn có xuất hiện trong Tài nguyên dành cho nhà phát triển và tệp gốc (được liên kết từ tệp đã triển khai) trong cây tệp hay không.

    Sơ đồ nguồn được tải theo cách thủ công sẽ giúp tệp gốc xuất hiện trong cây tệp.

  7. Tiếp tục gỡ lỗi tệp gốc.