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 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 đã nắm rõ kiến thức cơ bản về phát triển web và Công cụ cho nhà phát triển của Chrome.
Mở tài nguyên
Khi biết tên của tài nguyên muốn kiểm tra, Trình đơn lệnh sẽ giúp bạn mở tài nguyên một cách nhanh chóng.
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 trên trình đơn thả xuống hoặc bắt đầu nhập tên tệp rồi nhấn phím Enter sau khi tệp đúng đượ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
Hãy xem phần Kiểm tra thông tin chi tiết của 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 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 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 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.
Hình 5. Tài nguyên trang trong Nhật ký mạng
Duyệt theo thư mục
Cách xem các tài nguyên của trang được sắp xếp theo thư mục:
- Nhấp vào thẻ Sources (Nguồn) để mở bảng điều khiển Sources (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 phân tích các mục không rõ ràng trong Hình 6:
- trên cùng là ngữ cảnh duyệt web tài liệu chính.
- airhorner.com đại diện cho một miền. Tất cả các tài nguyên được 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.
- (chỉ_mục) 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>nhúng trong HTML của tài liệu chính tạo ra. - 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 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) sẽ nhóm các tài nguyên theo thư mục. Để 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, hãy làm như sau:
- Mở ngăn Trang. Hãy xem phần Duyệt theo thư mục.
Nhấp vào biểu tượng Lựa chọn khác
rồi tắt tuỳ chọn Nhóm theo thư mục.
Hình 8. Tuỳ chọn Group by Folder (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, các tài nguyên sẽ được sắp xếp theo thứ tự bảng chữ cái.
Hình 9. Ngăn Page (Trang) sau khi tắt tuỳ chọn Group by Folder (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 Khung.
Hình 11 Ngăn 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.
Hình 11 Xem tài nguyên trong bảng điều khiển Ứng dụng
Duyệt qua tệp theo loại trong bảng điều khiển Mạng
Hãy xem phần Lọc theo loại tài nguyên.
Hình 12 Lọc cho CSS trong Nhật ký mạng