Kiểm tra hoạt động mạng

Kayce Basques

Đây là hướng dẫn trực tiếp về một số tính năng thường dùng nhất của Công cụ cho nhà phát triển liên quan đến việc kiểm tra hoạt động mạng của một trang.

Hãy xem Tham chiếu mạng nếu bạn muốn duyệt qua các tính năng.

Đọc tiếp hoặc xem phiên bản video của hướng dẫn này:

Trường hợp sử dụng bảng điều khiển Mạng

Nhìn chung, hãy sử dụng bảng điều khiển Mạng khi bạn cần đảm bảo rằng tài nguyên đang được tải xuống hoặc tải lên như dự kiến. Các trường hợp sử dụng phổ biến nhất cho bảng điều khiển Mạng là:

• Đảm bảo rằng các tài nguyên thực sự đang được tải lên hoặc tải xuống.
• Kiểm tra thuộc tính của từng tài nguyên, chẳng hạn như tiêu đề HTTP, nội dung, kích thước, v.v.

Nếu bạn đang tìm cách cải thiện hiệu suất tải trang, thì đừng bắt đầu bằng bảng điều khiển Mạng. Có nhiều loại vấn đề về hiệu suất tải không liên quan đến hoạt động mạng. Hãy bắt đầu bằng bảng điều khiển Lighthouse vì nó cung cấp cho bạn các đề xuất cụ thể về cách cải thiện trang. Hãy xem phần Tối ưu hoá tốc độ trang web.

Mở bảng điều khiển Mạng

Để khai thác tối đa hướng dẫn này, hãy mở bản minh hoạ và dùng thử các tính năng trên trang minh hoạ.

1. Mở Bản minh hoạ Bắt đầu sử dụng.

   

   Hình 1 Bản minh hoạ

   Bạn nên chuyển bản minh hoạ sang một cửa sổ riêng.

   

   Hình 2. Bản minh hoạ trong một cửa sổ và hướng dẫn này trong một cửa sổ khác

2. Mở Công cụ cho nhà phát triển bằng cách nhấn tổ hợp phím Control+Shift+J hoặc Command+Option+J (Mac). Bảng điều khiển Console sẽ mở ra.

   

   Hình 3. Bảng điều khiển

   Bạn nên gắn Công cụ cho nhà phát triển xuống cuối cửa sổ.

   

   Hình 4. Công cụ cho nhà phát triển được gắn vào cuối cửa sổ

3. Nhấp vào thẻ Mạng. Bảng điều khiển Mạng sẽ mở ra.

   

   Hình 5. Công cụ cho nhà phát triển được gắn vào cuối cửa sổ

Hiện tại, bảng điều khiển Mạng đang trống. Đó là vì Công cụ cho nhà phát triển chỉ ghi lại hoạt động mạng khi đang mở và không có hoạt động mạng nào xảy ra kể từ khi bạn mở Công cụ cho nhà phát triển.

Ghi nhật ký hoạt động mạng

Để xem hoạt động mạng mà một trang gây ra:

1. Tải lại trang. Bảng điều khiển Mạng sẽ ghi lại tất cả hoạt động mạng trong Nhật ký mạng.

   

   Hình 6. Nhật ký mạng

   Mỗi hàng của Nhật ký mạng đại diện cho một tài nguyên. Theo mặc định, các tài nguyên được liệt kê theo thứ tự thời gian. Tài nguyên trên cùng thường là tài liệu HTML chính. Tài nguyên ở dưới cùng là bất kỳ nội dung nào được yêu cầu gần đây nhất.

   Mỗi cột biểu thị thông tin về một tài nguyên. Hình 6 cho thấy các cột mặc định:

   • Trạng thái. Mã phản hồi HTTP.
   • Type (Loại). Loại tài nguyên.
   • Trình khởi tạo. Điều gì khiến một tài nguyên được yêu cầu. Khi nhấp vào một đường liên kết trong cột Trình khởi tạo, bạn sẽ được đưa đến mã nguồn đã tạo ra yêu cầu.
   • Thời gian. Thời gian xử lý yêu cầu.
   • Thác nước. Hình minh hoạ các giai đoạn của yêu cầu. Di chuột qua Thác nước để xem thông tin chi tiết.
   Lưu ý: Biểu đồ phía trên Nhật ký mạng được gọi là Tổng quan. Bạn sẽ không sử dụng mật khẩu trong hướng dẫn này vì vậy bạn có thể ẩn mật khẩu nếu muốn. Hãy xem phần Ẩn ngăn Tổng quan.

2. Miễn là bạn mở Công cụ cho nhà phát triển, công cụ này sẽ ghi lại hoạt động mạng trong Nhật ký mạng. Để minh hoạ điều này, trước tiên hãy xem ở cuối Nhật ký mạng và ghi chú trong đầu về hoạt động gần nhất.

3. Bây giờ, hãy nhấp vào nút Get Data (Nhận dữ liệu) trong bản minh hoạ.

4. Xem lại phần dưới cùng của Nhật ký mạng. Có một tài nguyên mới tên là getstarted.json. Thao tác nhấp vào nút Lấy dữ liệu khiến trang yêu cầu tệp này.

   

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

Hiện thêm thông tin

Các cột của Nhật ký mạng có thể định cấu hình. Bạn có thể ẩn các cột mà bạn hiện không sử dụng. Ngoài ra, còn có nhiều cột bị ẩn theo mặc định mà bạn có thể thấy hữu ích.

1. Nhấp chuột phải vào tiêu đề của bảng Nhật ký mạng rồi chọn Miền. Lúc này, miền của mỗi tài nguyên sẽ xuất hiện.

   

   Hình 8. Bật cột Miền

Lưu ý: Bạn có thể xem URL đầy đủ của một tài nguyên bằng cách di chuột qua ô của tài nguyên đó trong cột Tên.

Mô phỏng kết nối mạng chậm hơn

Kết nối mạng của máy tính mà bạn dùng để xây dựng trang web có thể nhanh hơn kết nối mạng trên thiết bị di động của người dùng. Bằng cách điều tiết trang, bạn có thể hiểu rõ hơn về thời gian tải một trang trên thiết bị di động.

1. Nhấp vào trình đơn thả xuống Điều tiết, được đặt thành Trực tuyến theo mặc định.

   

   Hình 9. Bật chế độ điều tiết

2. Chọn 3G chậm.

   

   Hình 10. Đang chọn mạng 3G chậm

3. Nhấn và giữ biểu tượng Reload (Tải lại) , rồi chọn Empty Cache And Hard Tải lại (Xóa bộ nhớ đệm và tải lại cứng).

   

   Hình 11 Làm trống bộ nhớ đệm và tải lại cứng

   Trong các lần truy cập lặp lại, trình duyệt thường phân phát một số tệp từ bộ nhớ đệm, giúp tăng tốc độ tải trang. Các tuỳ chọn Empty Cache (Bộ nhớ đệm trống và Tải lại cứng) buộc trình duyệt truy cập mạng để lấy tất cả tài nguyên. Điều này rất hữu ích khi bạn muốn biết khách truy cập lần đầu trải nghiệm một lượt tải trang như thế nào.

   Lưu ý: Bạn chỉ có thể sử dụng quy trình Empty Cache and Hard Tải lại (Làm trống bộ nhớ đệm và tải lại cứng) khi Công cụ cho nhà phát triển đang mở.

Chụp ảnh màn hình

Ảnh chụp màn hình cho phép bạn xem giao diện của một trang theo thời gian khi trang đó đang tải.

1. Nhấp vào Chụp ảnh màn hình .

2. Tải lại trang thông qua quy trình làm việc Empty Cache and Hard Tải lại. Hãy xem phần Mô phỏng kết nối chậm hơn nếu bạn cần lời nhắc về cách thực hiện việc này. Ngăn Ảnh chụp màn hình cung cấp hình thu nhỏ về cách trang hiển thị ở các thời điểm khác nhau trong quá trình tải.

   

   Hình 12 Ảnh chụp màn hình tải trang

3. Nhấp vào hình thu nhỏ đầu tiên. Công cụ cho nhà phát triển cho bạn biết hoạt động mạng nào đang diễn ra tại thời điểm đó.

   

   Hình 13. Hoạt động mạng đã diễn ra trong ảnh chụp màn hình đầu tiên

4. Nhấp vào Chụp ảnh màn hình lần nữa để đóng ngăn Ảnh chụp màn hình.

5. Tải lại trang.

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

Nhấp vào một tài nguyên để tìm hiểu thêm thông tin về tài nguyên đó. Hãy thử ngay:

1. Nhấp vào getstarted.html. Thẻ Tiêu đề sẽ hiển thị. Sử dụng thẻ này để kiểm tra tiêu đề HTTP.

   

   Hình 14. Thẻ Tiêu đề

2. Nhấp vào thẻ Xem trước. Kết xuất HTML cơ bản sẽ được hiển thị.

   

   Hình 15. Thẻ Xem trước

   Thẻ này rất hữu ích khi API trả về mã lỗi trong HTML và dễ đọc HTML được kết xuất hơn so với mã nguồn HTML hoặc khi kiểm tra hình ảnh.

3. Nhấp vào thẻ Phản hồi. Mã nguồn HTML sẽ được hiển thị.

   

   Hình 16. Thẻ Phản hồi

   Mẹo: Khi một tệp được rút gọn, hãy nhấp vào nút Định dạng ở cuối thẻ Response (Phản hồi) để định dạng lại nội dung của tệp cho dễ đọc.

4. Nhấp vào thẻ Thời gian. Bạn sẽ thấy bảng phân tích hoạt động mạng cho tài nguyên này.

   

   Hình 17. Thẻ Thời gian

5. Nhấp vào biểu tượng Đóng để xem lại Nhật ký mạng.

   

   Hình 18. Nút Đóng

Tiêu đề và phản hồi của mạng tìm kiếm

Sử dụng ngăn Search (Tìm kiếm) khi bạn cần tìm kiếm tiêu đề HTTP và phản hồi của mọi tài nguyên cho một chuỗi hoặc biểu thức chính quy nhất định.

Ví dụ: giả sử bạn muốn kiểm tra xem tài nguyên của mình có đang dùng chính sách bộ nhớ đệm hợp lý hay không.

1. Nhấp vào biểu tượng Tìm kiếm . Ngăn Tìm kiếm sẽ mở ra ở bên trái Nhật ký mạng.

   

   Hình 19. Ngăn Tìm kiếm

2. Nhập Cache-Control rồi nhấn Enter. Ngăn Tìm kiếm liệt kê mọi thực thể của Cache-Control mà ngăn này tìm thấy trong tiêu đề hoặc nội dung tài nguyên.

   

   Hình 20. Kết quả tìm kiếm cho Cache-Control

3. Nhấp vào một kết quả để xem. Nếu bạn tìm thấy cụm từ tìm kiếm trong tiêu đề, thì thẻ Tiêu đề sẽ mở ra. Nếu truy vấn được tìm thấy trong nội dung, thì thẻ Phản hồi sẽ mở ra.

   

   Hình 21. Kết quả tìm kiếm được làm nổi bật trong thẻ Tiêu đề

4. Đóng ngăn Tìm kiếm và thẻ Thời gian.

   

   Hình 22. Nút Đóng

Lọc tài nguyên

Công cụ cho nhà phát triển cung cấp nhiều quy trình công việc để lọc ra những tài nguyên không liên quan đến tác vụ đang thực hiện.

Hình 23. Thanh công cụ Bộ lọc

Thanh công cụ Bộ lọc phải được bật theo mặc định. Nếu không:

1. Nhấp vào biểu tượng Bộ lọc để cho thấy.

Lọc theo chuỗi, biểu thức chính quy hoặc thuộc tính

Hộp văn bản Bộ lọc hỗ trợ nhiều loại lọc khác nhau.

1. Nhập png vào hộp văn bản Filter (Bộ lọc). Chỉ hiển thị các tệp chứa văn bản png. Trong trường hợp này, các tệp duy nhất phù hợp với bộ lọc là hình ảnh PNG.

   

   Hình 24. Bộ lọc chuỗi

2. Nhập /.*\.[cj]s+$/. Công cụ cho nhà phát triển sẽ lọc mọi tài nguyên có tên tệp không kết thúc bằng j hoặc c theo sau là 1 hoặc nhiều ký tự s.

   

   Hình 25. Bộ lọc biểu thức chính quy

3. Nhập -main.css. Công cụ cho nhà phát triển sẽ lọc ra main.css. Nếu bất kỳ tệp nào khác khớp với mẫu, thì các tệp đó cũng sẽ bị lọc ra.

   

   Hình 26. Bộ lọc phủ định

4. Nhập domain:raw.githubusercontent.com vào hộp văn bản Filter (Bộ lọc). Công cụ cho nhà phát triển sẽ lọc ra mọi tài nguyên có URL không khớp với miền này.

   

   Hình 27. Bộ lọc thuộc tính

   Hãy xem bài viết Lọc yêu cầu theo cơ sở lưu trú để biết danh sách đầy đủ các tài sản có thể lọc.

5. Xoá hộp văn bản Bộ lọc của văn bản bất kỳ.

Lọc theo loại tài nguyên

Để tập trung vào một loại tệp nhất định, chẳng hạn như biểu định kiểu:

1. Nhấp vào CSS. Tất cả các loại tệp khác sẽ được lọc ra.

   

   Hình 28. Chỉ hiển thị các tệp CSS

2. Để xem cả tập lệnh, hãy giữ phím Control hoặc Command (Mac) rồi nhấp vào JS.

   

   Hình 29. Chỉ hiển thị các tệp CSS và JS

3. Nhấp vào Tất cả để xoá bộ lọc và xem lại tất cả tài nguyên.

Hãy xem phần Yêu cầu bộ lọc để biết các quy trình lọc khác.

Chặn yêu cầu

Một trang có giao diện và hoạt động như thế nào khi một số tài nguyên trên trang không có sẵn? Trình quản lý này có hoàn toàn không thành công hay vẫn hoạt động bình thường? Chặn yêu cầu tìm hiểu:

1. Nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (Mac) để mở Command Menu.

   

   Hình 30. Trình đơn lệnh

2. Nhập block, chọn Hiển thị chặn yêu cầu và nhấn Enter.

   

   Hình 31. Hiển thị chặn yêu cầu

3. Nhấp vào biểu tượng Thêm hình mở khoá .

4. Nhập main.css.

   

   Hình 32. Đang chặn main.css

5. Nhấp vào Thêm.

6. Tải lại trang. Đúng như dự kiến, kiểu của trang sẽ hơi lộn xộn vì biểu định kiểu chính của trang đã bị chặn. Hãy lưu ý hàng main.css trong Nhật ký mạng. Văn bản màu đỏ có nghĩa là tài nguyên đã bị chặn.

   

   Hình 33. main.css đã bị chặn

7. Bỏ chọn hộp đánh dấu Bật tính năng chặn yêu cầu.

Các bước tiếp theo

Xin chúc mừng, bạn đã hoàn tất hướng dẫn. Nhấp vào Phân phối phần thưởng để nhận phần thưởng.

Hãy xem Tài liệu tham khảo mạng để khám phá thêm các tính năng trong Công cụ cho nhà phát triển liên quan đến việc kiểm tra hoạt động mạng.