Hướng dẫn này chỉ cho 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 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 khái niệm cơ bản về việc phát triển web và Công cụ cho nhà phát triển của Chrome.
Mở tài nguyên
Khi bạn biết tên của tài nguyên mình muốn kiểm tra, Trình đơn lệnh sẽ giúp bạn nhanh chóng mở tài nguyên đó.
Nhấn Control+P hoặc Command+P (Mac). Hộp thoại Open File (Mở tệp) sẽ mở ra.
Hình 1 Hộp thoại Open File (Mở tệp)
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 đánh dấu trong hộp tự động hoàn thành.
Hình 2. Nhập tên tệp vào 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 về tài nguyên.
Hình 3. Kiểm tra tài nguyên trong bảng điều khiển Network (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 các tài nguyên dưới đây cho bạn biết cách xem tài nguyên từ nhiều phần trên giao diện người dùng của DevTools. Nếu bạn muốn kiểm tra một tài nguyên trong bảng điều khiển Mạng, hãy nhấp chuột phải vào tài nguyên đó rồi chọn 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 xem các tài nguyên trong bảng điều khiển Mạng
Xem Ghi nhật ký hoạt động 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:
- Nhấp vào thẻ Nguồn để mở bảng Nguồn.
Nhấp vào thẻ Trang để hiển thị tài nguyên của trang. Ngăn Page (Trang) sẽ mở ra.
Hình 6. Ngăn Page (Trang)
Dưới đây là bảng chi tiết về các mục không rõ ràng trong Hình 6:
- top là bối cảnh duyệt web chính của tài liệu.
- airhorner.com đại diện cho một miền. Tất cả cá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. - script 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ể do một phần tử
<iframe>tạo trong HTML của tài liệu chính. - sw.js là ngữ cảnh thực thi của trình chạy dịch vụ.
Nhấp vào một tài nguyên để xem tài nguyên đó 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 Trang sẽ 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:
- Mở ngăn Page (Trang). Xem phần Duyệt qua theo thư mục.
Nhấp vào biểu tượng Tuỳ chọn khác
và tắt tính năng Nhóm theo thư mục.
Hình 8. Tuỳ chọn Nhóm theo thư mục
Các tài nguyên được sắp xếp theo loại tệp. Trong mỗi loại tệp, các tài nguyên sẽ được sắp xếp theo bảng chữ cái.
Hình 9. Ngăn Trang sau khi tắt tính năng 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:
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 Manifest (Tệp kê khai) thường mở trước.
Hình 10. Bảng điều khiển Application (Ứng dụng)
Di chuyển xuống ngăn Frames (Khung).
Hình 11 Ngăn Frames (Khung)
Mở rộng các mục mà bạn quan tâm.
Nhấp vào một tài nguyên để xem tài nguyên đó.
Hình 11 Xem tài nguyên trong bảng điều khiển Application (Ứng dụng)
Duyệt qua các 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.
Hình 12 Lọc CSS trong Nhật ký mạng