Yêu cầu kết nối mạng: Kiểm thử trang web của bạn bằng cách chặn hoặc điều tiết yêu cầu kết nối mạng

Ewa Gasperowicz

Sử dụng ngăn Điều kiện yêu cầu để kiểm thử cách trang của bạn hoạt động nếu một số tài nguyên (chẳng hạn như hình ảnh hoặc biểu định kiểu) không tải được hoặc nếu các tài nguyên tải chậm hơn.

Tổng quan

Ngăn Điều kiện yêu cầu cho phép bạn chặn nhiều tài nguyên hoặc "mẫu" cùng một lúc và bật/tắt các tài nguyên đó trong danh sách. Bạn cũng có thể chặn các miền hoặc URL của yêu cầu mạng trong bảng Mạng và các mẫu tương ứng sẽ xuất hiện trong ngăn Điều kiện yêu cầu.

Ngăn Các điều kiện của yêu cầu cho phép bạn:

  • Thêm hoặc xoá mẫu.
  • Chỉnh sửa hoa văn.
  • Xoá tất cả mẫu.
  • Bật hoặc tắt tính năng chặn hoặc điều tiết yêu cầu kết nối mạng. Sau khi bật, bạn có thể bật/tắt chế độ chặn hoặc điều tiết cho từng mẫu.

Việc đóng Công cụ cho nhà phát triển sẽ tắt tính năng chặn và điều tiết yêu cầu kết nối mạng. Bạn phải mở bảng điều khiển và bật lại tính năng chặn. Tuy nhiên, Công cụ cho nhà phát triển sẽ lưu các mẫu này ngay cả sau khi trình duyệt đóng.

Chặn hoặc điều tiết một yêu cầu mạng

Bạn có thể chặn các yêu cầu mạng trong bảng điều khiển Mạng của Công cụ cho nhà phát triển.

  1. Trong bảng điều khiển Mạng, trong phần Tên, hãy nhấp chuột phải vào một yêu cầu rồi chọn Chặn yêu cầu hoặc Điều tiết yêu cầu. hình ảnh
  2. Ngăn Điều kiện yêu cầu sẽ tự động mở và liệt kê mẫu có liên quan là bị chặn hoặc bị điều tiết. Thao tác này cũng tự động bật hộp đánh dấu Bật tính năng chặn và điều tiết.

Tìm hiểu những yêu cầu bị điều tiết hoặc chặn

Để phân biệt giữa các yêu cầu có tốc độ chậm và các yêu cầu đang bị Công cụ cho nhà phát triển điều tiết, bạn có thể kiểm tra các bảng điều khiển Mạng và Hiệu suất.

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

  • Yêu cầu bị chặn: Kiểm tra cột Trạng thái. Các yêu cầu bị chặn sẽ xuất hiện rõ ràng (bị chặn:devtools) và có màu đỏ.
  • Yêu cầu bị điều tiết: Biểu tượng màu vàng hoặc nâu sẽ xuất hiện bên cạnh URL yêu cầu. Ngoài ra, bạn cũng có thể kiểm tra cột Thời gian. Biểu tượng này sẽ xuất hiện bên cạnh thông tin thời gian.
    • Di chuột qua biểu tượng để xem chính xác điều kiện mạng nào đã được áp dụng.
    • Nhấp vào biểu tượng này để mở ngay ngăn Điều kiện yêu cầu và làm nổi bật quy tắc chịu trách nhiệm điều tiết.

Bảng điều khiển Mạng trong Công cụ cho nhà phát triển cho thấy các chỉ báo về yêu cầu bị chặn và bị điều tiết.

Trong bảng điều khiển Hiệu suất: Bạn cũng có thể tìm kiếm các điều kiện mạng khi ghi lại hồ sơ hiệu suất. Cách làm như sau:

  1. Chuyển đến bảng điều khiển Hiệu suất rồi ghi lại một bản ghi.
  2. Tìm yêu cầu trong bản theo dõi Mạng.
  3. Di chuột qua yêu cầu để xem chú thích nêu chi tiết các điều kiện mạng đã áp dụng.

Mở ngăn chứa các điều kiện của yêu cầu

Cách mở ngăn Điều kiện của yêu cầu:

  1. Mở Công cụ cho nhà phát triển.
  2. Mở trình đơn Lệnh bằng cách nhấn:
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P Trình đơn lệnh có
  3. Bắt đầu nhập Request conditions, chọn Show Request conditions (Hiện các điều kiện của yêu cầu) rồi nhấn Enter. Công cụ cho nhà phát triển sẽ hiển thị ngăn Điều kiện yêu cầu ở dưới cùng của cửa sổ Công cụ cho nhà phát triển.

Hoặc ở góc trên bên phải, hãy chọn biểu tượng Công cụ khác > Điều kiện yêu cầu.

Sửa đổi chế độ điều tiết

Cách tuỳ chỉnh chế độ điều tiết:

  1. Mở ngăn Điều kiện của yêu cầu rồi chuyển đến yêu cầu cụ thể.
  2. Trong cột Điều tiết, hãy chọn một chế độ cài đặt sẵn (ví dụ: 3G chậm, 3G nhanh) trong trình đơn thả xuống. Bạn cũng có thể thêm một hồ sơ mạng tuỳ chỉnh.

Sửa đổi mẫu yêu cầu

Để sửa đổi một mẫu, trong ngăn Điều kiện yêu cầu, hãy nhấp vào nút Chỉnh sửa bên cạnh mẫu đó, chỉnh sửa rồi nhấp vào Lưu. Bạn cũng có thể nhấp vào nút Thêm điều kiện để tạo một điều kiện mới. Khi nhập một mẫu URL, bạn có thể sử dụng ký tự đại diện (*) để so khớp các phần động của URL. Ví dụ: *://example.com sẽ so khớp tất cả các yêu cầu API đối với miền đó. Bạn có thể sử dụng ký tự đại diện để áp dụng các điều kiện cho nhiều tài nguyên cùng một lúc bằng cách sử dụng URL Pattern API.

Bật/tắt tính năng chặn yêu cầu kết nối mạng

Hộp đánh dấu Bật tính năng chặn và điều tiết cho phép bạn bật và tắt tính năng chặn yêu cầu kết nối mạng cho tất cả các mẫu cùng một lúc.

Sắp xếp lại mẫu so khớp URL

Nếu một yêu cầu khớp với nhiều mẫu, DevTools sẽ áp dụng quy tắc đầu tiên tìm thấy. Để kiểm soát mức độ ưu tiên này, hãy nhấp vào các nút mũi tên bên cạnh quy tắc cụ thể trong ngăn Điều kiện yêu cầu để di chuyển các quy tắc có mức độ ưu tiên cao lên đầu danh sách.

Xoá mẫu chặn yêu cầu kết nối mạng

Cách xoá một mẫu chặn yêu cầu kết nối mạng cụ thể khỏi danh sách:

  • Trong bảng điều khiển Điều kiện yêu cầu, hãy nhấp vào nút Xoá.

Để xoá tất cả các mẫu chặn yêu cầu kết nối mạng, trong thanh hoạt động, hãy nhấp vào nút Xoá tất cả các mẫu chặn yêu cầu kết nối mạng.