Xem tài nguyên trang

Hướng dẫn này hướng dẫn bạn cách sử dụng Công cụ của Chrome cho nhà phát triển để xem tài nguyên của một trang web. Tài nguyên là các tệp mà một trang cần để hiển thị chính xác. Ví dụ về tài nguyên bao gồm các tệp CSS, JavaScript và HTML, cũng như hình ảnh.

Hướng dẫn này giả định rằng bạn đã quen thuộc với các kiến thức cơ bản về phát triển webChrome DevTools.

Mở tài nguyên

Khi bạn biết tên của tài nguyên mà bạn muốn kiểm tra, Command Menu (Trình đơn lệnh) sẽ cung cấp một cách nhanh chóng để mở tài nguyên đó.

  1. Nhấn tổ hợp phím Ctrl+P hoặc Command+P (Mac). Hộp thoại Open File (Mở tệp) sẽ mở ra.

    Hộp thoại Mở tệp

    Hình 1 Hộp thoại Open File (Mở tệp)

  2. Chọn tệp trong trình đơn thả xuống hoặc bắt đầu nhập tên tệp rồi nhấn Enter khi tệp chính xác được làm nổi bật trong hộp tự động hoàn thành.

    Nhập tên tệp trong hộp thoại Mở tệp

    Hình 2. Nhập tên tệp trong hộp thoại Open File (Mở tệp)

Mở tài nguyên trong bảng điều khiển Mạng

Xem phần Kiểm tra thông tin chi tiết của tài nguyên.

Kiểm tra tài nguyên trong bảng điều khiển Mạng

Hình 3. Kiểm tra tài nguyên trong bảng điều khiển Mạng

Hiển thị tài nguyên trong bảng điều khiển Mạng từ các bảng điều khiển khác

Phần Duyệt qua tài nguyên bên dưới cho bạn biết cách xem tài nguyên từ nhiều phần của giao diện người dùng DevTools. Nếu bạn muốn kiểm tra một tài nguyên trong bảng điều khiển Network (Mạng), hãy nhấp chuột phải vào tài nguyên đó rồi chọn Reveal in Network panel (Hiện trong bảng điều khiển Network).

Hiển thị trong bảng điều khiển Mạng

Hình 4. Tuỳ chọn Hiển thị trong bảng điều khiển Mạng

Duyệt qua nguồn lực

Duyệt qua tài nguyên trong bảng điều khiển Mạng

Xem phần Ghi nhật ký hoạt động mạng.

Tài nguyên trang trong Nhật ký mạng

Hình 5. Tài nguyên trang trong Nhật ký mạng

Duyệt theo thư mục

Cách xem tài nguyên của một trang được sắp xếp theo thư mục:

  1. Nhấp vào thẻ Nguồn để mở bảng điều khiển Nguồn.
  2. Nhấp vào thẻ Trang để hiển thị các tài nguyên của trang. Ngăn Trang sẽ mở ra.

    Ngăn Trang

    Hình 6. Ngăn Trang

    Dưới đây là bảng chi tiết về các mục không rõ ràng trong Hình 6:

    • topbối cảnh duyệt web của tài liệu chính.
    • airhorner.com đại diện cho một miền. Tất cả tài nguyên lồng trong đó đều đến từ miền đó. Ví dụ: URL đầy đủ của tệp comlink.global.js có thể là https://airhorner.com/scripts/comlink.global.js.
    • scripts là một thư mục.
    • (index) là tài liệu HTML chính.
    • iu3 là một ngữ cảnh duyệt web khác. Ngữ cảnh này có thể được tạo bởi một phần tử <iframe> được nhúng trong HTML tài liệu chính.
    • sw.js là ngữ cảnh thực thi của worker dịch vụ.
  3. Nhấp vào một tài nguyên để xem tài nguyên đó trong Trình chỉnh sửa.

    Xem tệp trong Trình chỉnh sửa

    Hình 7. Xem tệp trong Trình chỉnh sửa

Duyệt theo tên tệp

Theo mặc định, ngăn Page (Trang) nhóm các tài nguyên theo thư mục. Cách tắt tính năng nhóm này và xem tài nguyên của từng miền dưới dạng danh sách phẳng:

  1. Mở ngăn Trang. Xem phần Duyệt theo thư mục.
  2. Nhấp vào biểu tượng Tuỳ chọn khác Tùy chọn khác rồi tắt tuỳ chọn Nhóm theo thư mục.

    Nhóm theo thư mục

    Hình 8. Tuỳ chọn Nhóm theo thư mục

    Tài nguyên được sắp xếp theo loại tệp. Trong mỗi loại tệp, tài nguyên được sắp xếp theo thứ tự bảng chữ cái.

    Ngăn Trang sau khi tắt tuỳ chọn Nhóm theo thư mục

    Hình 9. Ngăn Trang sau khi tắt tuỳ chọn Nhóm theo thư mục

Duyệt theo loại tệp

Cách nhóm các tài nguyên với nhau dựa trên loại tệp:

  1. Nhấp vào thẻ Application (Ứng dụng). Bảng điều khiển Application (Ứng dụng) sẽ mở ra. Theo mặc định, ngăn Tệp kê khai thường mở trước.

    Bảng điều khiển ứng dụng

    Hình 10. Bảng điều khiển Application (Ứng dụng)

  2. Di chuyển xuống ngăn Frames (Khung).

    Ngăn Khung

    Hình 11 Ngăn Frames (Khung)

  3. Mở rộng các phần mà bạn quan tâm.

  4. Nhấp vào một tài nguyên để xem tài nguyên đó.

    Xem tài nguyên trong bảng điều khiển Ứng dụng

    Hình 11 Xem tài nguyên trong bảng điều khiển Application (Ứng dụng)

Duyệt qua tệp theo loại trong bảng điều khiển Mạng

Xem phần Lọc theo loại tài nguyên.

Lọc CSS trong Nhật ký mạng

Hình 12 Lọc CSS trong Nhật ký mạng