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

Kayce Basques
Kayce Basques
X GitHub

Đây là một hướng dẫn thực hành 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 Tài liệu tham khảo về mạng nếu bạn muốn duyệt xem các tính năng.

Hãy đọ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 dùng bảng điều khiển Mạng khi bạn cần đảm bảo rằng các 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 tài nguyên thực sự đang được tải lên hoặc tải xuống.
  • Kiểm tra các thuộc tính của một tài nguyên riêng lẻ, 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, đừng bắt đầu bằng bảng 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ì bảng này đưa ra các đề xuất có mục tiêu về cách cải thiện trang của bạn. 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.

    Trang web minh hoạ.

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

    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ở DevTools 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.

    Bảng điều khiển trong Công cụ cho nhà phát triển.

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

    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.

    Bảng điều khiển Mạng của 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 Mạng đang trống. Đó là vì Công cụ cho nhà phát triển chỉ ghi nhật ký 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

Cách 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 ghi nhật ký tất cả hoạt động mạng trong Nhật ký mạng.

    Nhật ký mạng có 5 yêu cầu.

    Mỗi hàng trong 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 trình tự thời gian. Tài nguyên hàng đầu thường là tài liệu HTML chính. Tài nguyên dưới cùng là bất cứ thứ gì được yêu cầu gần đây nhất.

    Mỗi cột đại diện cho thông tin về một tài nguyên. Các cột mặc định là:

    • Trạng thái: Mã phản hồi HTTP.
    • 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 chuyển đến mã nguồn gây ra yêu cầu.
    • Kích thước: Lượng tài nguyên được chuyển qua mạng.
    • Thời gian: Thời gian yêu cầu mất.

  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 lại hoạt động gần đây nhất.

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

  4. Hãy xem lại phần cuối của Nhật ký mạng. Có một tài nguyên mới tên là getstarted.json. Khi bạn nhấp vào nút Lấy dữ liệu, trang sẽ yêu cầu tệp này.

    Một tài nguyên mới trong Nhật ký mạng.

Hiện thêm thông tin

Bạn có thể định cấu hình các cột của Nhật ký mạng. Bạn có thể ẩn những cột mà mình không sử dụng. Ngoài ra, 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. Miền của từng tài nguyên hiện đã xuất hiện.

    Bật cột Miề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 để tạo trang web có thể nhanh hơn kết nối mạng của thiết bị di động mà người dùng sử 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 trang trên thiết bị di động.

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

    Trình đơn thả xuống hạn chế băng thông trong bảng điều khiển Mạng.

  2. Chọn 3G.

    Chọn 3G trong bảng điều khiển Mạng.

  3. Nhấn và giữ biểu tượng Tải lại rồi chọn Xoá bộ nhớ đệm và tải lại hoàn toàn.

    Xoá bộ nhớ đệm và tải lại hoàn toàn.

    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 của trình duyệt. Điều này giúp tăng tốc quá trình tải trang. Empty Cache And Hard Reload (Xoá bộ nhớ đệm và tải lại hoàn toàn) buộc trình duyệt truy cập vào mạng để lấy tất cả tài nguyên. Điều này hữu ích khi bạn muốn xem trải nghiệm tải trang của khách truy cập lần đầu.

Chụp ảnh màn hình

Ảnh chụp màn hình ghi lại giao diện trang của bạn tại nhiều thời điểm trong quá trình tải và báo cáo những tài nguyên được tải ở mỗi khoảng thời gian.

Để chụp ảnh màn hình, hãy làm theo các bước sau:

  1. Nhấp vào Cài đặt mạng .

  2. Bật hộp đánh dấu Ảnh chụp màn hình .

  3. Tải lại trang bằng quy trình Xoá bộ nhớ đệm và tải lại toàn bộ dữ liệu. Hãy xem bài viết Mô phỏng kết nối chậm hơn nếu bạn cần được nhắc về cách thực hiện việc này. Thẻ Ảnh chụp màn hình cung cấp hình thu nhỏ về giao diện của trang tại nhiều thời điểm trong quá trình tải.

    Ảnh chụp màn hình của quá trình tải trang trong bảng điều khiển Mạng.

  4. 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 đó.

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

  5. Bỏ đánh dấu hộp Ảnh chụp màn hình để đóng thẻ Ảnh chụp màn hình.

  6. Tải lại trang.

Kiểm tra thông tin chi tiết về 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 đó. Thử ngay:

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

    Thẻ Tiêu đề trong bảng điều khiển Mạng.

  2. Nhấp vào thẻ Xem trước để xem bản kết xuất chế độ HTML cơ bản.

    Thẻ Xem trước trong bảng điều khiển Mạng.

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

  3. Nhấp vào thẻ Response (Phản hồi) để xem mã nguồn HTML.

    Thẻ Phản hồi trong bảng điều khiển Mạng.

  4. Nhấp vào thẻ Trình khởi tạo để xem cây ánh xạ chuỗi trình khởi tạo yêu cầu.

    Thẻ Trình khởi tạo trong bảng điều khiển Mạng.

  5. Nhấp vào thẻ Thời gian để xem thông tin chi tiết về hoạt động mạng cho tài nguyên này.

    Thẻ Thời gian trong bảng điều khiển Mạng.

  6. Nhấp vào Đóng để xem lại Nhật ký mạng.

    Nút Đóng cho thẻ chi tiết.

Sử dụng thẻ Tìm kiếm khi bạn cần tìm kiếm tiêu đề và phản hồi HTTP của tất cả 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 các tài nguyên của mình có đang sử 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 trong thanh thao tác của bảng điều khiển hoặc nhấn tổ hợp phím Command + F (macOS) hoặc Control + F (Windows / Linux).

    Thẻ Tìm kiếm sẽ mở ra ở bên trái Nhật ký mạng.

    Thẻ Tìm kiếm ở bên trái Nhật ký mạng.

  2. Nhập Cache-Control rồi nhấn Enter. Thẻ Tìm kiếm liệt kê tất cả các trường hợp Cache-Control mà thẻ này tìm thấy trong tiêu đề hoặc nội dung của tài nguyên.

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

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

    Một kết quả tìm kiếm được làm nổi bật trong thẻ Tiêu đề.

  4. Đóng thẻ Tìm kiếm và thẻ Tiêu đề.

    Các 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 làm 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.

Thanh công cụ Bộ lọc.

Theo mặc định, thanh công cụ Bộ lọc sẽ được bật. Nếu không:

  1. Nhấp vào Bộ lọc để hiện bộ lọc.

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

Ô nhập dữ liệu Bộ lọc hỗ trợ nhiều loại bộ lọc.

  1. Nhập png vào ô nhập dữ liệu Bộ lọc. Chỉ những tệp có chứa văn bản png mới xuất hiện. 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.

    Lọc chuỗi trong Nhật ký mạng.

  2. Nhập /.*\.[cj]s+$/. DevTools sẽ lọc ra 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.

    Kết quả lọc biểu thức chính quy trong Nhật ký mạng.

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

    Kết quả lọc âm bản trong Nhật ký mạng.

  4. Nhập domain:raw.githubusercontent.com vào hộp văn bản Bộ lọc. DevTools sẽ lọc ra mọi tài nguyên có URL không khớp với miền này.

    Kết quả lọc thuộc tính trong Nhật ký mạng.

    Hãy xem phần Lọc yêu cầu theo thuộc tính để biết danh sách đầy đủ các thuộc tính có thể lọc.

  5. Xóa mọi văn bản trong ô nhập dữ liệu Bộ lọc.

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

Cách 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 đều bị lọc bỏ.

    Bảng điều khiển Mạng 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.

    Bảng điều khiển Mạng 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 Lọc yêu cầu để biết các quy trình lọc khác.

Chặn yêu cầu

Một trang sẽ trông như thế nào và hoạt động ra sao khi một số tài nguyên của trang không có sẵn? Thiết bị hoàn toàn không hoạt động hay vẫn hoạt động được phần nào? 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ở Trình đơn lệnh.

    Trình đơn Lệnh trong bảng điều khiển Mạng.

  2. Nhập block, chọn Show Request Blocking (Hiện tính năng chặn yêu cầu) rồi nhấn Enter.

    Lựa chọn "Hiển thị tính năng chặn yêu cầu".

  3. Nhấp vào nút Thêm mẫu.

  4. Nhập main.css.

    Chặn main.css trong bảng điều khiển Mạng

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

  6. Tải lại trang. Như dự kiến, kiểu dáng của trang bị rối loạn nhẹ vì biểu định kiểu chính của trang đã bị chặn. 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.

    main.css đã bị chặn.

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

Để khám phá thêm các tính năng 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, hãy xem Tài liệu tham khảo về mạng.