Tài liệu tham khảo về các tính năng mạng

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Khám phá các cách mới để phân tích cách tải trang của bạn trong tài liệu tham khảo toàn diện này về Công cụ của Chrome cho nhà phát triển các tính năng phân tích mạng.

Ghi lại các yêu cầu mạng

Theo mặc định, Công cụ cho nhà phát triển ghi lại tất cả các yêu cầu mạng trong bảng điều khiển Mạng, miễn là Công cụ cho nhà phát triển đang mở.

Bảng điều khiển Mạng.

Dừng ghi lại các yêu cầu mạng

Cách dừng ghi yêu cầu:

  • Nhấp vào Dừng ghi nhật ký mạng Dừng ghi mạng. trên bảng Network (Mạng). Nhãn này chuyển sang màu xám để cho biết Công cụ cho nhà phát triển không còn ghi lại yêu cầu.
  • Nhấn Command> + E (máy Mac) hoặc Control + E (Windows, Linux) trong khi bảng điều khiển Network (Mạng) nằm ở tiêu điểm.

Xoá yêu cầu

Nhấp vào Clear (Xoá) Xóa. trên bảng Mạng để xoá tất cả yêu cầu khỏi bảng Yêu cầu.

Nút Xoá.

Lưu yêu cầu trong các lần tải trang

Để lưu yêu cầu trong các lần tải trang, hãy đánh dấu vào hộp Duy trì nhật ký trên bảng điều khiển Mạng. Công cụ cho nhà phát triển lưu tất cả các yêu cầu cho đến khi bạn tắt Duy trì nhật ký.

Chụp ảnh màn hình trong khi tải trang

Chụp ảnh màn hình để phân tích nội dung người dùng nhìn thấy khi họ chờ trang của bạn tải.

Để bật ảnh chụp màn hình, hãy mở phần Cài đặt Cài đặt. bên trong bảng điều khiển Mạng rồi chọn Chụp ảnh màn hình.

Hãy tải lại trang trong khi đặt bảng điều khiển Network (Mạng) để chụp ảnh màn hình.

Sau khi chụp, bạn có thể tương tác với ảnh chụp màn hình theo các cách sau:

  • Di chuột qua ảnh chụp màn hình để xem thời điểm chụp ảnh màn hình đó. Đường kẻ màu vàng sẽ xuất hiện trên ngăn Tổng quan.
  • Nhấp vào hình thu nhỏ của ảnh chụp màn hình để lọc ra mọi yêu cầu phát sinh sau khi ảnh chụp màn hình đã chụp.
  • Nhấp đúp vào một hình thu nhỏ để phóng to hình đó.

Đã bật tính năng chụp ảnh màn hình.

Phát lại yêu cầu XHR

Để phát lại yêu cầu XHR, hãy thực hiện một trong những thao tác sau trong bảng Yêu cầu:

  • Chọn yêu cầu rồi nhấn phím R.
  • Nhấp chuột phải vào yêu cầu rồi chọn Phát lại XHR.

Chọn Phát lại XHR.

Thay đổi hành vi tải

Mô phỏng khách truy cập lần đầu bằng cách tắt bộ nhớ đệm của trình duyệt

Để mô phỏng cách người dùng lần đầu trải nghiệm trang web của bạn, hãy chọn hộp đánh dấu Tắt bộ nhớ đệm. Công cụ cho nhà phát triển sẽ tắt bộ nhớ đệm của trình duyệt. Tính năng này mô phỏng chính xác hơn trải nghiệm của người dùng lần đầu. vì các yêu cầu được phân phát từ bộ nhớ đệm của trình duyệt khi truy cập nhiều lần.

Hộp kiểm Disabled (Tắt bộ nhớ đệm).

Tắt bộ nhớ đệm của trình duyệt trong ngăn Điều kiện mạng

Nếu bạn muốn tắt bộ nhớ đệm trong khi làm việc trong các bảng điều khiển khác của Công cụ cho nhà phát triển, hãy sử dụng Điều kiện mạng ngăn.

  1. Nhấp vào biểu tượng Tình trạng mạng. để mở ngăn Network Conditions (Điều kiện mạng).
  2. Chọn hoặc bỏ chọn hộp kiểm Tắt bộ nhớ đệm.

Xoá bộ nhớ đệm của trình duyệt theo cách thủ công

Để xoá bộ nhớ đệm của trình duyệt theo cách thủ công bất cứ lúc nào, hãy nhấp chuột phải vào vị trí bất kỳ trong bảng Requests (Yêu cầu) rồi chọn Xoá bộ nhớ đệm của trình duyệt.

Chọn Xoá bộ nhớ đệm của trình duyệt.

Mô phỏng khi không có mạng

Có một lớp ứng dụng web mới tên là Ứng dụng web tiến bộ, có thể hoạt động ngoại tuyến với với sự trợ giúp của service worker. Khi xây dựng loại ứng dụng này, sẽ rất hữu ích nếu bạn mô phỏng nhanh một thiết bị không có kết nối dữ liệu.

Để mô phỏng trải nghiệm mạng hoàn toàn ngoại tuyến, hãy chọn Ngoại tuyến trong trình đơn thả xuống Điều tiết mạng bên cạnh hộp đánh dấu Tắt bộ nhớ đệm.

Đã chọn ngoại tuyến từ trình đơn thả xuống.

Công cụ cho nhà phát triển hiển thị biểu tượng cảnh báo bên cạnh thẻ Mạng để nhắc bạn rằng chế độ ngoại tuyến đang bật.

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

Để mô phỏng mạng 4G nhanh, 4G chậm hoặc 3G, hãy chọn giá trị đặt trước tương ứng trong trình đơn thả xuống Tăng tốc trong thanh thao tác ở trên cùng.

Trình đơn thả xuống điều tiết mạng có các giá trị đặt trước.

Công cụ cho nhà phát triển hiển thị biểu tượng cảnh báo cảnh báo bên cạnh bảng điều khiển Mạng để nhắc bạn rằng chế độ điều tiết đang bật.

Tạo hồ sơ điều tiết tuỳ chỉnh

Ngoài các giá trị đặt trước, chẳng hạn như mạng 4G tốc độ chậm hoặc nhanh, bạn cũng có thể thêm hồ sơ điều tiết tuỳ chỉnh:

  1. Mở trình đơn Điều tiết rồi chọn Tuỳ chỉnh > Thêm....
  2. Thiết lập một hồ sơ điều tiết mới như mô tả trong phần cài đặt Cài đặt > Điều tiết.

  3. Quay lại bảng Mạng, chọn hồ sơ mới của bạn trong trình đơn thả xuống Điều chỉnh.

    Một hồ sơ tuỳ chỉnh được chọn từ trình đơn điều tiết. Bảng điều khiển Mạng hiển thị biểu tượng cảnh báo.

Công cụ cho nhà phát triển hiển thị biểu tượng cảnh báo Cảnh báo. bên cạnh bảng điều khiển Mạng để nhắc bạn rằng chế độ điều tiết đã được bật.

Hạn chế kết nối WebSocket

Ngoài các yêu cầu HTTP, Công cụ cho nhà phát triển còn hạn chế các kết nối WebSocket kể từ phiên bản 99.

Cách quan sát quy trình điều tiết của WebSocket:

  1. Bắt đầu một kết nối mới, ví dụ: bằng cách sử dụng một công cụ kiểm tra.
  2. Trên bảng Mạng, hãy chọn Không điều tiết rồi gửi thông báo qua kết nối.
  3. Tạo hồ sơ điều tiết tuỳ chỉnh rất chậm, ví dụ như 10 kbit/s. Với tốc độ chậm như vậy, bạn sẽ nhận thấy sự khác biệt.
  4. Trên bảng Mạng, hãy chọn hồ sơ rồi gửi một thông báo khác.
  5. Bật bộ lọc WS, nhấp vào tên kết nối, mở thẻ Messages (Thông báo) rồi kiểm tra chênh lệch thời gian giữa các tin nhắn đã gửi và tin nhắn lặp lại khi có và không được điều tiết. Ví dụ:

Tin nhắn được gửi và lặp lại cùng với và không bị điều tiết.

Mô phỏng kết nối mạng chậm trong ngăn Điều kiện mạng

Nếu bạn muốn điều tiết kết nối mạng trong khi làm việc trong các bảng điều khiển khác của Công cụ cho nhà phát triển, hãy sử dụng Ngăn Điều kiện mạng.

  1. Nhấp vào biểu tượng Tình trạng mạng. để mở ngăn Network Conditions (Điều kiện mạng).
  2. Chọn tốc độ kết nối trong trình đơn Điều tiết mạng.

Xoá cookie của trình duyệt theo cách thủ công

Để xoá cookie của trình duyệt theo cách thủ công bất cứ lúc nào, hãy nhấp chuột phải vào vị trí bất kỳ trong bảng Yêu cầu rồi chọn Xoá cookie của trình duyệt.

Chọn Xoá cookie của trình duyệt.

Ghi đè tiêu đề phản hồi HTTP

Hãy xem phần Ghi đè tệp và tiêu đề phản hồi HTTP cục bộ.

Ghi đè tác nhân người dùng

Cách ghi đè tác nhân người dùng theo cách thủ công:

  1. Nhấp vào biểu tượng Tình trạng mạng. để mở ngăn Network Conditions (Điều kiện mạng).
  2. Xoá tuỳ chọn Tự động chọn.
  3. Chọn một tuỳ chọn tác nhân người dùng từ trình đơn hoặc nhập một tuỳ chỉnh vào hộp.

Cách tìm kiếm theo tiêu đề, tải trọng và phản hồi của yêu cầu:

  1. Nhấn phím tắt sau đây để mở thẻ Tìm kiếm ở bên phải:

    • Trên macOS, hãy nhấn tổ hợp phím Command + F.
    • Trên Windows hoặc Linux, hãy nhấn tổ hợp phím Control + F.

  2. Trong thẻ Tìm kiếm, hãy nhập cụm từ tìm kiếm rồi nhấn phím Enter. (Không bắt buộc) Nhấp vào match_case hoặc regular_expression để bật phân biệt chữ hoa chữ thường hoặc biểu thức chính quy tương ứng.

  3. Nhấp vào một trong các kết quả tìm kiếm. Bảng điều khiển Network (Mạng) sẽ được đánh dấu bằng màu vàng đối với yêu cầu và chuỗi khớp trong các thẻ Headers (Tiêu đề), Paload (Tải lên) hoặc Response (Phản hồi).

Thẻ Tìm kiếm ở bên phải trong bảng điều khiển Mạng.

Để làm mới kết quả tìm kiếm, hãy nhấp vào làm mới Làm mới. Để xoá kết quả, hãy nhấp vào chặn Xoá.

Để biết thêm thông tin về tất cả các cách tìm kiếm trong Công cụ cho nhà phát triển, hãy xem phần Tìm kiếm: Tìm văn bản trên tất cả tài nguyên được tải.

Lọc yêu cầu

Lọc yêu cầu theo cơ sở lưu trú

Sử dụng hộp Bộ lọc để lọc các yêu cầu theo tài sản, chẳng hạn như miền hoặc kích thước của của bạn.

Nếu bạn không thấy hộp đó, thì có thể ngăn Bộ lọc bị ẩn. Hãy xem phần Ẩn ngăn Bộ lọc.

Hộp văn bản Bộ lọc và hộp kiểm Đảo ngược.

Để đảo ngược bộ lọc, hãy chọn hộp kiểm Đảo ngược bên cạnh hộp Bộ lọc.

Bạn có thể sử dụng nhiều tài sản cùng lúc bằng cách dùng dấu cách để phân tách từng tài sản. Cho ví dụ: mime-type:image/gif larger-than:1K sẽ hiện tất cả ảnh GIF lớn hơn 1 kilobyte. Các bộ lọc nhiều thuộc tính này tương đương với phép toán AND. Không hỗ trợ thao tác OR.

Tiếp theo là danh sách đầy đủ các cơ sở lưu trú được hỗ trợ.

  • cookie-domain. Hiển thị các tài nguyên thiết lập một miền cookie cụ thể.
  • cookie-name. Hiển thị tài nguyên đã đặt tên cookie cụ thể.
  • cookie-path. Hiển thị các tài nguyên đã thiết lập một đường dẫn cookie cụ thể.
  • cookie-value. Hiển thị các tài nguyên đã đặt một giá trị cookie cụ thể.
  • domain. Chỉ hiển thị tài nguyên từ miền đã chỉ định. Bạn có thể dùng ký tự đại diện (*) để bao gồm nhiều miền. Ví dụ: *.com hiển thị tài nguyên từ tất cả các phần cuối cùng của tên miền trong .com. Công cụ cho nhà phát triển hiển thị một trình đơn thả xuống tự động hoàn thành có tất cả các miền mà nó hiển thị đã gặp phải.
  • has-overrides. Hiện các yêu cầu đã ghi đè content, headers, mọi cơ chế ghi đè (yes) hoặc không có cơ chế ghi đè (no). Bạn có thể thêm cột Có cơ chế ghi đè tương ứng vào bảng yêu cầu.
  • has-response-header. Hiển thị tài nguyên có chứa tiêu đề phản hồi HTTP đã chỉ định. Công cụ cho nhà phát triển điền sẵn tất cả các tiêu đề phản hồi mà công cụ này có trong trình đơn thả xuống tự động hoàn thành gặp phải.
  • is. Sử dụng is:running để tìm tài nguyên WebSocket.
  • larger-than. Hiển thị các tài nguyên có kích thước lớn hơn kích thước đã chỉ định, tính bằng byte. Đặt giá trị 1000 tương đương với việc thiết lập giá trị 1k.
  • method. Hiển thị các tài nguyên đã được truy xuất qua loại phương thức HTTP chỉ định. Nội dung điền sẵn trong Công cụ cho nhà phát triển trình đơn thả xuống tự động hoàn thành cùng với tất cả phương thức HTTP mà công cụ này đã gặp.
  • mime-type. Hiển thị tài nguyên thuộc một loại MIME đã chỉ định. Công cụ cho nhà phát triển điền sẵn trong trình đơn thả xuống của tính năng tự động hoàn thành với tất cả các loại MIME mà công cụ đó đã gặp phải.
  • mixed-content. Hiển thị tất cả tài nguyên nội dung hỗn hợp (mixed-content:all) hoặc chỉ những tài nguyên hiển thị (mixed-content:displayed).
  • priority. Hiển thị các tài nguyên có mức độ ưu tiên khớp với giá trị đã chỉ định.
  • resource-type. Hiển thị tài nguyên của một loại tài nguyên, ví dụ: hình ảnh. Công cụ cho nhà phát triển điền sẵn trình đơn thả xuống tự động hoàn thành với tất cả các loại tài nguyên đã gặp.
  • response-header-set-cookie. Hiện tiêu đề Set-Cookie thô trong thẻ Vấn đề. Cookie không đúng định dạng có tiêu đề Set-Cookie không chính xác sẽ bị gắn cờ trong bảng điều khiển Mạng.
  • scheme. Hiển thị các tài nguyên được truy xuất qua HTTP không được bảo vệ (scheme:http) hoặc HTTPS được bảo vệ (scheme:https).
  • set-cookie-domain. Hiển thị các tài nguyên có tiêu đề Set-Cookie với thuộc tính Domain khớp với giá trị được chỉ định. Công cụ cho nhà phát triển điền sẵn tất cả cookie cho tính năng tự động hoàn thành mà công cụ đó đã gặp phải.
  • set-cookie-name. Hiển thị những tài nguyên có tiêu đề Set-Cookie với tên khớp với giá trị đã chỉ định. Công cụ cho nhà phát triển điền sẵn tất cả tên cookie có trong tính năng tự động hoàn thành gặp phải.
  • set-cookie-value. Hiển thị các tài nguyên có tiêu đề Set-Cookie với giá trị khớp với giá trị được chỉ định. Công cụ cho nhà phát triển điền sẵn tất cả giá trị cookie mà công cụ này có gặp phải.
  • status-code. Chỉ hiển thị các tài nguyên có mã trạng thái HTTP khớp với mã được chỉ định. DevTools điền tất cả mã trạng thái gặp phải vào trình đơn thả xuống tự động hoàn thành.
  • url. Hiển thị những tài nguyên có url khớp với giá trị đã chỉ định.

Lọc yêu cầu theo loại

Để lọc yêu cầu theo loại yêu cầu, hãy nhấp vào Tất cả, Tìm nạp/XHR, JS, CSS, Img, Phương tiện, Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest hoặc Khác (bất kỳ loại nào khác không được liệt kê ở đây) trên bảng điều khiển Network (Mạng).

Nếu bạn không thấy những nút này, thì ngăn Bộ lọc có thể bị ẩn. Xem Ẩn bộ lọc .

Để bật nhiều bộ lọc loại cùng lúc, hãy giữ Command (Mac) hoặc Control (Windows, Linux) và rồi nhấp vào.

Sử dụng bộ lọc Loại để hiển thị tài nguyên JS, CSS và Tài liệu.

Lọc yêu cầu theo thời gian

Kéo sang trái hoặc phải trên ngăn Overview (Tổng quan) để chỉ hiển thị các yêu cầu có hiệu lực trong khoảng thời gian đó trong khoảng thời gian đó. Bộ lọc này có tính toàn bộ. Mọi yêu cầu có hiệu lực trong thời gian được đánh dấu sẽ hiển thị.

Lọc ra mọi yêu cầu không hoạt động trong khoảng 21 – 25 mili giây.

Ẩn URL dữ liệu

URL dữ liệu là các tệp nhỏ được nhúng vào các tài liệu khác. Bất kỳ yêu cầu nào mà bạn thấy trong Bảng Yêu cầu bắt đầu bằng data: là một URL dữ liệu.

Để ẩn các yêu cầu này, hãy đánh dấu vào Hộp đánh dấu. Ẩn URL dữ liệu.

URL dữ liệu bị ẩn khỏi bảng Yêu cầu.

Thanh trạng thái ở dưới cùng hiển thị số lượng yêu cầu đã hiển thị trong tổng số.

Ẩn URL của tiện ích

Để tập trung vào mã bạn viết, bạn có thể lọc ra các yêu cầu không liên quan được gửi bởi các tiện ích mà bạn có thể đã cài đặt trong Chrome. Các yêu cầu của tiện ích có URL bắt đầu bằng chrome-extension://.

Để ẩn các yêu cầu của tiện ích, hãy đánh dấu chọn Hộp đánh dấu. Ẩn URL của tiện ích.

URL của tiện ích bị ẩn khỏi bảng Yêu cầu.

Thanh trạng thái ở dưới cùng hiển thị số lượng yêu cầu đã hiển thị trong tổng số.

Chỉ hiển thị các yêu cầu có cookie phản hồi bị chặn

Để lọc ra mọi thứ ngoại trừ các yêu cầu có cookie phản hồi bị chặn vì bất kỳ lý do nào, hãy xem mục Hộp đánh dấu. Cookie phản hồi bị chặn. Hãy thử tính năng này trên trang minh hoạ.

Bảng Yêu cầu chỉ hiển thị các yêu cầu có cookie phản hồi bị chặn.

Thanh trạng thái ở dưới cùng hiển thị số lượng yêu cầu đã hiển thị trong tổng số.

Để tìm hiểu lý do cookie phản hồi bị chặn, hãy chọn yêu cầu, mở thẻ Cookie rồi di chuột qua biểu tượng thông tin .

Ngoài ra, trên bảng Mạng, bạn sẽ thấy biểu tượng cảnh báo cảnh báo bên cạnh một yêu cầu chịu ảnh hưởng của việc ngừng sử dụng cookie của bên thứ ba hoặc được miễn trừ. Hãy di chuột qua biểu tượng này để xem phần chú thích kèm theo gợi ý, rồi nhấp vào đó để chuyển đến bảng Vấn đề để xem thêm thông tin.

Biểu tượng cảnh báo bên cạnh những yêu cầu bị ảnh hưởng bởi việc loại bỏ cookie của bên thứ ba.

Chỉ hiển thị các yêu cầu bị chặn

Để lọc mọi thứ ngoại trừ các yêu cầu bị chặn, hãy xem mục Hộp đánh dấu. Yêu cầu bị chặn. Để kiểm tra điều này, bạn có thể sử dụng thẻ ngăn Chặn yêu cầu kết nối mạng.

Bảng Yêu cầu chỉ hiển thị các yêu cầu bị chặn.

Bảng Yêu cầu được đánh dấu bằng màu đỏ đối với các yêu cầu bị chặn. Thanh trạng thái ở dưới cùng hiển thị số lượng yêu cầu đã hiển thị trong tổng số.

Chỉ hiển thị các yêu cầu của bên thứ ba

Để lọc ra mọi thứ, ngoại trừ những yêu cầu có nguồn gốc khác với nguồn gốc trang, hãy xem Hộp đánh dấu. yêu cầu của bên thứ ba. Hãy thử tính năng này trên trang minh hoạ.

Bảng Yêu cầu chỉ hiển thị các yêu cầu của bên thứ ba.

Thanh trạng thái ở dưới cùng hiển thị số lượng yêu cầu đã hiển thị trong tổng số.

Yêu cầu sắp xếp

Theo mặc định, các yêu cầu trong bảng Yêu cầu được sắp xếp theo thời gian bắt đầu, nhưng bạn có thể sắp xếp bảng sử dụng các tiêu chí khác.

Sắp xếp theo cột

Nhấp vào tiêu đề của một cột bất kỳ trong bảng Yêu cầu để sắp xếp các yêu cầu theo cột đó.

Sắp xếp theo giai đoạn hoạt động

Để thay đổi cách Thác nước sắp xếp các yêu cầu, hãy nhấp chuột phải vào tiêu đề của bảng Yêu cầu, rồi di chuột qua Thác nước và chọn một trong các phương án sau:

  • Thời gian bắt đầu. Yêu cầu đầu tiên đã được khởi tạo nằm ở trên cùng.
  • Thời gian phản hồi. Yêu cầu đầu tiên bắt đầu tải xuống nằm ở trên cùng.
  • Thời gian kết thúc. Yêu cầu đầu tiên hoàn tất nằm ở trên cùng.
  • Tổng thời lượng. Yêu cầu có cách thiết lập kết nối ngắn nhất và yêu cầu / phản hồi vào ở trên cùng.
  • Độ trễ. Yêu cầu mà thời gian ngắn nhất để nhận được phản hồi nằm ở trên cùng.

Những mô tả này giả định rằng mỗi tùy chọn tương ứng được xếp hạng từ ngắn nhất đến dài nhất. Nhấp vào trên tiêu đề của cột Thác nước đảo ngược thứ tự.

Trong ví dụ này, Thác nước được sắp xếp theo tổng thời lượng. Phần nhẹ hơn của mỗi thanh là thời gian phải chờ đợi. Phần tối hơn là thời gian tải xuống các byte.

Sắp xếp Thác nước theo tổng thời gian.

Phân tích yêu cầu

Miễn là Công cụ cho nhà phát triển đang mở, công cụ này sẽ ghi lại tất cả các yêu cầu trong bảng điều khiển Mạng. Sử dụng bảng điều khiển Mạng để phân tích yêu cầu.

Xem nhật ký yêu cầu

Sử dụng bảng Yêu cầu để xem nhật ký tất cả các yêu cầu được thực hiện trong khi Công cụ cho nhà phát triển đang mở. Nhấp hoặc Khi di chuột lên các yêu cầu, bạn sẽ xem được thêm thông tin về yêu cầu đó.

Bảng Yêu cầu.

Theo mặc định, bảng Yêu cầu hiển thị các cột sau:

  • Tên. Tên tệp của tài nguyên hoặc giá trị nhận dạng của tài nguyên.

  • Trạng thái. Cột này có thể hiển thị các giá trị sau:

    Các giá trị khác nhau trong cột Trạng thái.

    • Mã trạng thái HTTP, ví dụ: 200 hoặc 404.
    • CORS error cho các yêu cầu không thành công do Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS).
    • (blocked:origin) cho các yêu cầu có tiêu đề bị định cấu hình sai. Hãy di chuột qua giá trị trạng thái này để xem chú thích với gợi ý về lỗi.
    • (failed), sau đó là một thông báo lỗi.

  • Type (Loại). Loại MIME của tài nguyên được yêu cầu.

  • Trình khởi tạo. Các đối tượng hoặc quy trình sau có thể khởi tạo yêu cầu:

    • Trình phân tích cú pháp. Trình phân tích cú pháp HTML của Chrome.
    • Chuyển hướng. Lệnh chuyển hướng HTTP.
    • Tập lệnh. Hàm JavaScript.
    • Khác. Một số quy trình hoặc hành động khác, chẳng hạn như điều hướng tới một trang bằng đường liên kết hoặc nhập URL trong thanh địa chỉ.

  • Kích thước. Kích thước kết hợp của tiêu đề phản hồi cộng với nội dung phản hồi, như được phân phối bởi máy chủ.

  • Thời gian. Tổng thời lượng, từ khi bắt đầu yêu cầu đến khi nhận byte cuối cùng trong nội dung phản hồi.

  • Thác nước. Bảng phân tích trực quan hoạt động của từng yêu cầu.

Thêm hoặc xóa cột

Nhấp chuột phải vào tiêu đề của bảng Yêu cầu rồi chọn một chế độ để ẩn hoặc hiển thị yêu cầu đó. Các tuỳ chọn đang hiển thị sẽ có dấu kiểm bên cạnh.

Thêm hoặc xoá một cột khỏi bảng Yêu cầu.

Bạn có thể thêm hoặc xoá các cột bổ sung sau: Đường dẫn, URL, Phương thức, Giao thức, Lược đồ, Miền, Địa chỉ từ xa, Không gian địa chỉ từ xa, Không gian địa chỉ của trình khởi tạo, Cookie, Đặt cookie, Mức độ ưu tiên, Mã kết nối, Có cơ chế ghi đè và Thác nước.

Thêm cột tuỳ chỉnh

Cách thêm một cột tuỳ chỉnh vào bảng Yêu cầu:

  1. Nhấp chuột phải vào tiêu đề của bảng Yêu cầu rồi chọn Tiêu đề phản hồi > Quản lý cột tiêu đề.
  2. Trong cửa sổ hộp thoại, hãy nhấp vào Thêm tiêu đề tuỳ chỉnh, nhập tên tiêu đề rồi nhấp vào Thêm.

Thêm một cột tuỳ chỉnh vào bảng Yêu cầu.

Nhóm các yêu cầu theo khung cùng dòng

Nếu các khung nội tuyến trên một trang khởi tạo nhiều yêu cầu, bạn có thể nhóm các khung hình này lại với nhau để thân thiện hơn với nhật ký yêu cầu.

Để nhóm các yêu cầu theo iframe, hãy mở phần Cài đặt Cài đặt. bên trong bảng điều khiển Mạng rồi chọn Hộp đánh dấu. Nhóm theo khung.

Nhật ký yêu cầu mạng với các yêu cầu được nhóm theo iframe.

Để xem một yêu cầu do một khung cùng dòng khởi tạo, hãy mở rộng yêu cầu đó trong nhật ký yêu cầu.

Xem thời gian của các yêu cầu liên quan đến nhau

Sử dụng Thác nước để xem thời gian gửi yêu cầu của các yêu cầu khác nhau. Theo mặc định, Thác nước được sắp xếp theo thời điểm bắt đầu yêu cầu. Vì vậy, các yêu cầu ở xa bên trái bắt đầu sớm hơn các thuộc tính ở xa bên phải.

Hãy xem bài viết Giai đoạn sắp xếp theo hoạt động để tham khảo các cách sắp xếp Thác nước.

Cột Thác nước trong ngăn Yêu cầu.

Phân tích thông báo khi kết nối WebSocket

Cách xem thông báo khi kết nối WebSocket:

  1. Trong cột Tên của bảng Yêu cầu, hãy nhấp vào URL của kết nối WebSocket.
  2. Nhấp vào thẻ Thông báo. Bảng này hiển thị 100 tin nhắn gần đây nhất.

Để làm mới bảng, hãy nhấp lại vào tên của kết nối WebSocket trong cột Name (Tên) của Bảng Yêu cầu.

Thẻ Tin nhắn.

Bảng này chứa 3 cột:

  • Dữ liệu. Tải trọng tin nhắn. Nếu thư là văn bản thuần tuý, thì thư sẽ xuất hiện tại đây. Dành cho tệp nhị phân opcodes, cột này hiển thị tên và mã của opcode. Các mã hoạt động sau được hỗ trợ: Khung tiếp tục, khung nhị phân, khung đóng kết nối, khung ping và khung hình Pong.
  • Thời lượng. Độ dài của tải trọng thư, tính bằng byte.
  • Thời gian. Thời điểm tin nhắn được nhận hoặc gửi.

Thông báo được mã hoá bằng màu tuỳ theo loại:

  • Tin nhắn văn bản đi có màu xanh lục nhạt.
  • Tin nhắn văn bản đến có màu trắng.
  • Mã hoạt động của WebSocket có màu vàng nhạt.
  • Lỗi có màu đỏ nhạt.

Phân tích sự kiện trong luồng

Cách xem những sự kiện mà máy chủ phát trực tuyến thông qua API Tìm nạp, API EventSource và XHR:

  1. Ghi lại các yêu cầu mạng trên trang truyền trực tuyến sự kiện. Ví dụ: mở trang minh hoạ này rồi nhấp vào một trong ba nút bất kỳ.
  2. Trong Network (Mạng), hãy chọn một yêu cầu rồi mở thẻ EventStream.

Thẻ EventStream.

Để lọc sự kiện, hãy chỉ định một biểu thức chính quy trong thanh bộ lọc ở đầu thẻ EventStream.

Để xoá danh sách sự kiện đã ghi lại, hãy nhấp vào chặn Xoá.

Xem bản xem trước nội dung phản hồi

Cách xem trước nội dung phản hồi:

  1. Nhấp vào URL của yêu cầu, trong cột Tên của bảng Yêu cầu.
  2. Nhấp vào thẻ Xem trước.

Thẻ này chủ yếu hữu ích khi xem hình ảnh.

Thẻ Xem trước.

Xem nội dung phản hồi

Cách xem nội dung phản hồi cho một yêu cầu:

  1. Nhấp vào URL của yêu cầu, trong cột Tên của bảng Yêu cầu.
  2. Nhấp vào thẻ Phản hồi.

Thẻ Phản hồi.

Xem tiêu đề HTTP

Cách xem dữ liệu tiêu đề HTTP của một yêu cầu:

  1. Nhấp vào một yêu cầu trong bảng Yêu cầu.
  2. Mở thẻ Tiêu đề rồi cuộn xuống phần Chung, Tiêu đề phản hồi, Tiêu đề yêu cầu và các phần Tiêu đề gợi ý ban đầu (không bắt buộc).

Thẻ Tiêu đề của yêu cầu được chọn từ bảng Yêu cầu.

Trong phần Chung, Công cụ cho nhà phát triển hiển thị cho bạn thông báo trạng thái mà con người có thể đọc được bên cạnh mã trạng thái HTTP đã nhận.

Trong phần Tiêu đề phản hồi, bạn có thể di chuột qua giá trị tiêu đề rồi nhấp vào nút Chỉnh sửa Chỉnh sửa để ghi đè cục bộ tiêu đề phản hồi.

Xem nguồn tiêu đề HTTP

Theo mặc định, thẻ Tiêu đề hiển thị tên tiêu đề theo thứ tự bảng chữ cái. Để xem tên tiêu đề HTTP trong đơn đặt hàng mà họ đã nhận được:

  1. Mở thẻ Tiêu đề cho yêu cầu mà bạn quan tâm. Hãy xem phần Xem tiêu đề HTTP.
  2. Nhấp vào xem nguồn, bên cạnh phần Tiêu đề yêu cầu hoặc Tiêu đề phản hồi.

Cảnh báo tạm thời tiêu đề

Đôi khi, thẻ Tiêu đề hiển thị thông báo cảnh báo Provisional headers are shown.... Nguyên nhân có thể là do:

  • Yêu cầu không được gửi qua mạng mà được phân phát từ một bộ nhớ đệm cục bộ, bộ nhớ đệm này không lưu trữ các tiêu đề ban đầu của yêu cầu. Trong trường hợp này, bạn có thể tắt tính năng lưu vào bộ nhớ đệm để xem toàn bộ tiêu đề của yêu cầu. Thông báo cảnh báo về tiêu đề tạm thời.

  • Tài nguyên mạng không hợp lệ. Ví dụ: thực thi fetch("https://jec.fish.com/unknown-url/") trong Bảng điều khiển. Thông báo cảnh báo về tiêu đề tạm thời.

Vì lý do bảo mật, Công cụ cho nhà phát triển cũng chỉ có thể hiển thị tiêu đề tạm thời.

Xem tải trọng của yêu cầu

Để xem tải trọng của yêu cầu, tức là các tham số chuỗi truy vấn và dữ liệu biểu mẫu của yêu cầu, hãy chọn một yêu cầu từ bảng Yêu cầu rồi mở thẻ Tải trọng.

Thẻ Tải trọng.

Xem nguồn tải trọng

Theo mặc định, Công cụ cho nhà phát triển hiển thị tải trọng ở dạng mà con người có thể đọc được.

Để xem nguồn của tham số chuỗi truy vấn và dữ liệu biểu mẫu, trên thẻ Tải trọng, hãy nhấp vào xem nguồn bên cạnh các phần Tham số chuỗi truy vấn hoặc Dữ liệu biểu mẫu.

Các nút nguồn của chế độ xem.

Xem đối số đã giải mã URL của tham số chuỗi truy vấn

Để bật/tắt chế độ mã hoá URL cho đối số, trên thẻ Payload (Tải trọng), hãy nhấp vào view đã giải mã hoặc xem URL được mã hoá.

Bật/tắt chế độ mã hoá URL.

Xem cookie

Để xem cookie được gửi trong tiêu đề HTTP của yêu cầu:

  1. Nhấp vào URL của yêu cầu, trong cột Tên của bảng Yêu cầu.
  2. Nhấp vào thẻ Cookie.

Thẻ Cookie.

Để xem nội dung mô tả về từng cột, hãy xem mục Trường.

Để sửa đổi cookie, hãy xem phần Xem, chỉnh sửa và xoá cookie.

Xem bảng chi tiết về thời gian của yêu cầu

Cách xem bảng chi tiết về thời gian của một yêu cầu:

  1. Nhấp vào URL của yêu cầu, trong cột Tên của bảng Yêu cầu.
  2. Nhấp vào thẻ Thời gian.

Xem bài viết Xem trước bảng chi tiết về thời gian để biết cách truy cập dữ liệu này nhanh hơn.

Thẻ Thời gian.

Xem Giải thích về các giai đoạn phân tích thời gian để biết thêm thông tin về từng giai đoạn mà bạn có thể xem trong thẻ Thời gian.

Xem trước bảng chi tiết về thời gian

Để xem trước bảng chi tiết về thời gian của một yêu cầu, hãy di chuột lên mục nhập của yêu cầu đó trong Cột Thác nước của bảng Yêu cầu.

Hãy tham khảo bài viết Xem bảng chi tiết về thời gian của yêu cầu để biết cách truy cập vào dữ liệu này mà không cần đến di chuột.

Xem trước bảng phân tích thời gian của một yêu cầu.

Giải thích các giai đoạn phân tích thời gian

Dưới đây là thông tin thêm về từng giai đoạn mà bạn có thể thấy trong thẻ Thời gian:

  • Thêm vào hàng đợi. Trình duyệt sẽ đưa yêu cầu vào hàng đợi trước khi bắt đầu kết nối và khi:
    • Có những yêu cầu có mức độ ưu tiên cao hơn.
    • Hiện đã có 6 kết nối TCP đang mở đối với nguồn gốc này và đây cũng là giới hạn. Áp dụng cho Chỉ HTTP/1.0 và HTTP/1.1.
    • Trình duyệt đang phân bổ nhanh dung lượng trong bộ nhớ đệm của ổ đĩa.
  • Bị treo. Yêu cầu có thể bị trì hoãn sau khi bắt đầu kết nối vì bất kỳ lý do nào được mô tả trong phần Xếp hàng.
  • Tra cứu DNS. Trình duyệt đang phân giải địa chỉ IP của yêu cầu.
  • Kết nối ban đầu. Trình duyệt đang thiết lập kết nối, bao gồm bắt tay TCP hoặc thử lại và thương lượng SSL.
  • Thương lượng proxy. Trình duyệt đang thương lượng yêu cầu với một máy chủ proxy.
  • Đã gửi yêu cầu. Yêu cầu đang được gửi.
  • Chuẩn bị ServiceWorker. Trình duyệt đang khởi động trình chạy dịch vụ.
  • Yêu cầu đối với ServiceWorker. Yêu cầu đang được gửi đến trình chạy dịch vụ.
  • Đang chờ (TTFB). Trình duyệt đang chờ byte đầu tiên của phản hồi. TTFB là viết tắt của Time (Thời gian) Đến byte đầu tiên. Thời gian này bao gồm 1 vòng trễ của độ trễ và thời gian máy chủ thực hiện chuẩn bị câu trả lời.
  • Tải nội dung xuống. Trình duyệt đang nhận phản hồi, trực tiếp từ mạng hoặc từ một trình chạy dịch vụ. Giá trị này là tổng thời gian dành để đọc nội dung phản hồi. Giá trị lớn hơn dự kiến có thể cho biết mạng chậm hoặc trình duyệt đang bận thực hiện công việc khác khiến phản hồi không được đọc.

Xem trình khởi tạo và phần phụ thuộc

Để xem trình khởi tạo và phần phụ thuộc của yêu cầu, hãy giữ phím Shift và di chuột qua yêu cầu đó trong Bảng Yêu cầu. Trình khởi tạo màu cho Công cụ cho nhà phát triển màu xanh lục và phần phụ thuộc màu đỏ.

Xem trình khởi tạo và phần phụ thuộc của yêu cầu.

Khi bảng Yêu cầu được sắp xếp theo trình tự thời gian, yêu cầu màu xanh lục đầu tiên ở phía trên yêu cầu mà bạn đang di chuột qua là trình khởi tạo của phần phụ thuộc. Nếu có một yêu cầu màu xanh lục khác ở trên rằng yêu cầu cao hơn đó chính là yếu tố khởi tạo cho trình khởi tạo. Và tương tự như vậy.

Xem các sự kiện tải

Công cụ cho nhà phát triển hiển thị thời gian của các sự kiện DOMContentLoaded và load ở nhiều vị trí trên Bảng điều khiển Mạng. Sự kiện DOMContentLoaded có màu xanh dương và sự kiện load có màu đỏ.

Vị trí của DOMContentLoaded và các sự kiện tải trên bảng điều khiển Mạng.

Xem tổng số yêu cầu

Tổng số yêu cầu được liệt kê trong ngăn Tóm tắt, ở cuối bảng Mạng.

Tổng số yêu cầu kể từ khi Công cụ cho nhà phát triển được mở.

Xem tổng kích thước của các tài nguyên được truyền và tải

Công cụ cho nhà phát triển liệt kê tổng kích thước của các tài nguyên được truyền và tải (không nén) trong ngăn Tóm tắt, ở cuối bảng điều khiển Mạng.

Tổng kích thước của các tài nguyên được truyền và tải.

Xem phần Xem kích thước không nén của tài nguyên để biết kích thước của tài nguyên sau khi trình duyệt giải nén chúng.

Xem dấu vết ngăn xếp đã tạo ra yêu cầu

Khi câu lệnh JavaScript khiến tài nguyên được yêu cầu, hãy di chuột qua cột Trình khởi tạo để xem dấu vết ngăn xếp dẫn đến yêu cầu.

Dấu vết ngăn xếp dẫn đến yêu cầu tài nguyên.

Xem kích thước không nén của một tài nguyên

Kiểm tra phần Cài đặt Cài đặt. > Các hàng yêu cầu lớn và sau đó xem giá trị dưới cùng của cột Kích thước.

Ví dụ về tài nguyên không nén.

Trong ví dụ này, kích thước nén của tài liệu www.google.com được gửi qua mạng là 43.8 KB, trong khi kích thước không nén là 136 KB.

Xuất dữ liệu về các yêu cầu

Lưu tất cả yêu cầu mạng vào tệp HAR

HAR (HTTP Lưu trữ) là định dạng tệp được một số công cụ phiên HTTP sử dụng để xuất dữ liệu đã thu thập. Định dạng này là một đối tượng JSON có một nhóm trường cụ thể.

Bạn có thể lưu tất cả các yêu cầu mạng vào tệp HAR theo hai cách:

  • Nhấp chuột phải vào yêu cầu bất kỳ trong bảng Yêu cầu rồi chọn Lưu tất cả dưới dạng HAR có nội dung. Chọn Lưu tất cả dưới dạng HAR có nội dung.
  • Nhấp vào Xuất. Xuất HAR trong thanh tác vụ ở đầu bảng điều khiển Mạng. Nút Xuất tệp HAR trong thanh thao tác ở trên cùng.

Sau khi có tệp HAR, bạn có thể nhập lại tệp đó vào Công cụ cho nhà phát triển để phân tích theo hai cách:

  • Kéo và thả tệp HAR vào bảng Yêu cầu.
  • Nhấp vào Nhập. Nhập HAR trong thanh tác vụ ở đầu bảng điều khiển Mạng.

Sao chép một yêu cầu, một nhóm yêu cầu đã lọc hoặc tất cả vào bảng nhớ tạm

Trong cột Tên của bảng Yêu cầu, hãy nhấp chuột phải vào một yêu cầu, rồi di chuột qua mục Sao chép rồi chọn một trong các tuỳ chọn sau.

Cách sao chép một yêu cầu, phản hồi hoặc dấu vết ngăn xếp của yêu cầu đó:

  • Sao chép URL. Sao chép URL của yêu cầu vào bảng nhớ tạm.
  • Sao chép dưới dạng cURL. Sao chép yêu cầu dưới dạng một lệnh cURL.
  • Sao chép dưới dạng PowerShell. Sao chép yêu cầu dưới dạng lệnh PowerShell.
  • Sao chép dưới dạng tìm nạp. Sao chép yêu cầu dưới dạng lệnh gọi tìm nạp.
  • Sao chép dưới dạng tìm nạp (Node.js). Sao chép yêu cầu dưới dạng lệnh gọi tìm nạp Node.js.
  • Sao chép câu trả lời. Sao chép nội dung phản hồi vào bảng nhớ tạm.
  • Sao chép dấu vết ngăn xếp. Sao chép ngăn xếp của yêu cầu vào bảng nhớ tạm.

Cách sao chép tất cả yêu cầu:

  • Sao chép tất cả URL. Sao chép URL của tất cả yêu cầu vào bảng nhớ tạm.
  • Sao chép tất cả dưới dạng cURL. Sao chép tất cả yêu cầu dưới dạng một chuỗi lệnh cURL.
  • Sao chép tất cả dưới dạng PowerShell. Sao chép tất cả yêu cầu dưới dạng một chuỗi lệnh PowerShell.
  • Sao chép tất cả dưới dạng tìm nạp. Sao chép tất cả yêu cầu dưới dạng một chuỗi lệnh gọi tìm nạp.
  • Sao chép tất cả dưới dạng tìm nạp (Node.js). Sao chép tất cả các yêu cầu dưới dạng một chuỗi lệnh gọi tìm nạp Node.js.
  • Sao chép tất cả dưới dạng tệp HAR. Sao chép tất cả yêu cầu dưới dạng dữ liệu HAR.

Chọn tuỳ chọn Sao chép.

Để sao chép nhóm yêu cầu đã lọc, hãy áp dụng bộ lọc cho nhật ký mạng, nhấp chuột phải vào một yêu cầu rồi chọn:

  • Sao chép tất cả URL được liệt kê. Sao chép URL của tất cả yêu cầu đã lọc vào bảng nhớ tạm.
  • Sao chép tất cả được liệt kê dưới dạng cURL. Sao chép tất cả yêu cầu đã lọc dưới dạng một chuỗi lệnh cURL.
  • Sao chép tất cả được liệt kê dưới dạng PowerShell. Sao chép tất cả yêu cầu đã lọc dưới dạng một chuỗi lệnh PowerShell.
  • Sao chép tất cả được liệt kê dưới dạng tìm nạp. Sao chép tất cả yêu cầu đã lọc dưới dạng một chuỗi lệnh gọi tìm nạp.
  • Sao chép tất cả được liệt kê dưới dạng tìm nạp (Node.js). Sao chép tất cả yêu cầu đã lọc dưới dạng một chuỗi lệnh gọi tìm nạp Node.js.
  • Sao chép tất cả được liệt kê dưới dạng HAR. Sao chép tất cả các yêu cầu đã lọc dưới dạng dữ liệu HAR.

Các lựa chọn sao chép cho một nhóm yêu cầu đã lọc.

Thay đổi bố cục của bảng điều khiển Mạng

Mở rộng hoặc thu gọn các phần trên giao diện người dùng của bảng điều khiển Mạng để tập trung vào những điều quan trọng đối với bạn.

Ẩn ngăn Bộ lọc

Theo mặc định, Công cụ cho nhà phát triển sẽ hiển thị ngăn Bộ lọc. Nhấp vào Bộ lọc. Bộ lọc. để ẩn cuộc trò chuyện.

Nút Ẩn bộ lọc.

Dùng hàng yêu cầu lớn

Sử dụng các hàng lớn khi bạn muốn có thêm khoảng trắng trong bảng yêu cầu mạng. Một số cột cũng hãy cung cấp thêm một chút thông tin khi sử dụng các hàng lớn. Ví dụ: giá trị dưới cùng của Cột Kích thước là kích thước không nén của một yêu cầu và cột Mức độ ưu tiên hiển thị cả mức độ ưu tiên tìm nạp ban đầu (giá trị dưới cùng) và cuối cùng (giá trị cao nhất).

Mở phần Cài đặt Cài đặt. rồi nhấp vào Hàng yêu cầu lớn để xem các hàng lớn.

Đã bật hàng yêu cầu lớn.

Ẩn kênh Tổng quan

Theo mặc định, Công cụ cho nhà phát triển hiển thị kênh Tổng quan. Mở phần Cài đặt Cài đặt. rồi bỏ chọn hộp đánh dấu Hiển thị tổng quan để ẩn phần tổng quan.

Hộp đánh dấu hiển thị tổng quan.