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

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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

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

Theo mặc định, Công cụ cho nhà phát triển sẽ 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ở.

Giao diện bảng điều khiển Mạng của Chrome DevTools.

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

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

  • Nhấp vào Dừng ghi nhật ký mạng Nút dừng ghi nhật ký mạng. trên bảng điều khiển Mạng. Biểu tượng này sẽ 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 các yêu cầu nữa.
  • Nhấn tổ hợp phím Command> + E (máy Mac) hoặc Control + E (Windows, Linux) khi bảng điều khiển Mạng đang được chọn.

Xoá yêu cầu

Nhấp vào Xoá Nút Xoá nhật ký mạng. trên bảng điều khiển Mạng để xoá tất cả yêu cầu khỏi bảng Yêu cầu.

Vị trí của nút Xoá trong thanh thao tác.

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

Để lưu các yêu cầu trong quá trình tải trang, hãy đánh dấu vào hộp Preserve log (Lưu nhật ký) trên bảng điều khiển Network (Mạng). Công cụ cho nhà phát triển sẽ lưu tất cả các yêu cầu cho đến khi bạn tắt chế độ Giữ lại 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 những gì người dùng nhìn thấy khi chờ trang của bạn tải.

Để bật tính năng chụp ảnh màn hình, hãy mở phần Cài đặt Biểu tượng bánh răng Cài đặt của bảng điều khiển Mạng. trong bảng điều khiển Mạng rồi chọn Chụp ảnh màn hình.

Tải lại trang trong khi bảng điều khiển Mạng đang được lấy tiêu điểm để 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 những cách sau:

  • Di chuột lên ảnh chụp màn hình để xem thời điểm chụp ảnh đó. Một đường màu vàng sẽ xuất hiện trên dòng thời gian 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 xảy ra sau khi chụp ảnh màn hình.
  • Nhấp đúp vào một hình thu nhỏ để phóng to hình đó.

Ví dụ cho thấy các khung hình được chụp trong quá trình tải trang.

Chỉnh sửa và gửi lại yêu cầu

Bạn có thể chỉnh sửa và gửi lại mọi yêu cầu mạng có thể tìm nạp từ bảng Requests (Yêu cầu):

  1. Nhấp chuột phải vào yêu cầu rồi chọn Edit and resend as fetch (Chỉnh sửa và gửi lại dưới dạng tìm nạp). Công cụ cho nhà phát triển sẽ mở ngăn Bảng điều khiển với yêu cầu được điền sẵn dưới dạng lệnh gọi fetch(), giữ nguyên các tham số yêu cầu và bối cảnh thực thi ban đầu.
  2. Nếu muốn, hãy chỉnh sửa lệnh gọi fetch() trong Bảng điều khiển, sau đó nhấn phím Enter để gửi lại yêu cầu.

Tuỳ chọn trong trình đơn theo bối cảnh để chỉnh sửa và gửi lại yêu cầu dưới dạng lệnh tìm nạp trong Bảng điều khiển.

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 tiên trải nghiệm trang web của bạn, hãy đánh dấu vào hộp Tắt bộ nhớ đệm. Công cụ cho nhà phát triển tắt bộ nhớ đệm của trình duyệt. Điều này mô phỏng chính xác hơn trải nghiệm của người dùng lần đầu tiên, vì các yêu cầu được phân phát từ bộ nhớ đệm của trình duyệt trong các lượt truy cập lặp lại.

Hộp đánh dấu Tắt bộ nhớ đệm trên thanh cài đặt.

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 ngăn Điều kiện mạng.

  1. Nhấp vào biểu tượng Nút Điều kiện mạng trong ngăn. để mở ngăn Điều kiện mạng.
  2. Đánh dấu hoặc bỏ đánh dấu hộp 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 Yêu cầu rồi chọn Xoá bộ nhớ đệm của trình duyệt.

Lựa chọn trong trình đơn theo bối cảnh để xoá bộ nhớ đệm của trình duyệt.

Mô phỏng chế độ ngoại tuyến

Có một loại ứng dụng web mới, được gọi là Ứng dụng web tiến bộ, có thể hoạt động khi không có mạng nhờ sự trợ giúp của trình chạy dịch vụ. Khi tạo loại ứng dụng này, bạn nên có thể 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 hoàn toàn ngoại tuyến trên mạng, hãy chọn Offline (Ngoại tuyến) trong trình đơn thả xuống Network throttling (hạn chế băng thông mạng) bên cạnh hộp đánh dấu Disable cache (Tắt bộ nhớ đệm).

Chọn Ngoại tuyến trong trình đơn thả xuống.

DevTools sẽ hiển thị một 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 chế độ đặt sẵn tương ứng trong trình đơn thả xuống Điều tiết trên thanh thao tác ở trên cùng.

Trình đơn thả xuống hạn chế băng thông mạng có các giá trị đặt sẵn.

Nếu bạn bật Chỉ số thực tế trong bảng điều khiển Hiệu suất, thì một trong các lựa chọn điều tiết trong trình đơn có thể được đánh dấu là lựa chọn được đề xuất dựa trên dữ liệu của Báo cáo trải nghiệm người dùng trên Chrome.

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

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

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

  1. Mở trình đơn Throttling (Điều tiết) rồi chọn Custom (Tuỳ chỉnh) > Add... (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 > Điều tiết.
  3. Quay lại bảng điều khiển Network (Mạng), chọn hồ sơ mới trong trình đơn thả xuống Throttling (Điều tiết).

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

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

Điều tiết kết nối WebSocket

Ngoài các yêu cầu HTTP, DevTools còn điều chỉnh tốc độ kết nối WebSocket kể từ phiên bản 99.

Cách quan sát hoạt động điều tiết WebSocket:

  1. Khởi tạo một kết nối mới, chẳng hạn như bằng cách sử dụng công cụ kiểm thử.
  2. Trên bảng điều khiển Mạng, hãy chọn Không điều tiết rồi gửi tin nhắn qua kết nối.
  3. Tạo một hồ sơ điều tiết tuỳ chỉnh rất chậm, ví dụ: 10 kbit/s. Hồ sơ có tốc độ chậm như vậy sẽ giúp bạn nhận thấy sự khác biệt.
  4. Trên bảng điều khiển Mạng, hãy chọn hồ sơ và gửi một tin nhắn 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) và kiểm tra chênh lệch thời gian giữa các thông báo đã gửi và thông báo được phản hồi có và không có tính năng điều tiết. Ví dụ:

Các thông báo được gửi và lặp lại có và không có giới hạn tốc độ.

Mô phỏng kết nối mạng chậm từ ngăn kéo Network conditions (Đ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 Nút Điều kiện mạng trong ngăn. để mở ngăn Điều kiện mạng.
  2. Chọn tốc độ kết nối trong trình đơn Hạn chế băng thông 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.

Tuỳ chọn trong trình đơn theo bối cảnh để xoá cookie của trình duyệt.

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

Xem bài viết Ghi đè tệp và tiêu đề phản hồi HTTP trên máy.

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 Nút Điều kiện mạng trong ngăn kéo. để mở ngăn Điều kiện mạng.
  2. Bỏ chọn Chọn tự động.
  3. Chọn một tác nhân người dùng trong trình đơn hoặc nhập một tác nhân người dùng tuỳ chỉnh vào hộp.

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

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

    • Trên macOS, nhấn tổ hợp phím Command + F.
    • Trên Windows hoặc Linux, 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. Bạn có thể nhấp vào hoặc để bật tính năng 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 Mạng sẽ đánh dấu yêu cầu trùng khớp bằng màu vàng. Ngoài ra, bảng điều khiển này cũng mở thẻ Tiêu đề hoặc Phản hồi và làm nổi bật chuỗi trùng khớp (nếu có).

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 biểu tượng Làm mới. Để xoá kết quả, hãy nhấp vào 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 bài viết Tìm kiếm: Tìm văn bản trên tất cả tài nguyên đã tải.

Lọc yêu cầu

Lọc yêu cầu theo thuộc tính

Sử dụng hộp Filter (Bộ lọc) để lọc các yêu cầu theo thuộc tính, chẳng hạn như miền hoặc kích thước của yêu cầu, hoặc nhập một chuỗi văn bản để so khớp URL, miền, tên máy chủ hoặc cổng của yêu cầu (ví dụ: localhost hoặc example.com), bao gồm cả các yêu cầu cùng trang web.

Nếu bạn không thấy hộp này, thì có thể thanh Bộ lọc đang bị ẩn. Xem phần Ẩn thanh Bộ lọc.

Hộp văn bản Bộ lọc và hộp đánh dấu Đảo ngược.

Để đảo ngược bộ lọc, hãy đánh dấu vào hộp Đảo ngược bên cạnh hộp Bộ lọc.

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

Tiếp theo là danh sách đầy đủ các thuộc tính được hỗ trợ.

  • cookie-domain. Hiện các tài nguyên đặt một miền cookie cụ thể.
  • cookie-name. Hiện những tài nguyên đặt một tên cookie cụ thể.
  • cookie-path. Cho thấy những tài nguyên đặt một đường dẫn cookie cụ thể.
  • cookie-value. Hiển thị những tài nguyên đặt một giá trị cookie cụ thể.
  • domain. Chỉ hiển thị tài nguyên từ miền được chỉ định. Bạn có thể sử dụng ký tự đại diện (*) để thêm nhiều miền. Ví dụ: *.com cho thấy tài nguyên của tất cả tên miền kết thúc bằng .com. Công cụ cho nhà phát triển sẽ hiển thị một trình đơn thả xuống tự động hoàn thành với tất cả các miền mà công cụ này gặp phải.
  • has-overrides. Hiển thị những yêu cầu đã ghi đè content, headers, mọi giá trị ghi đè (yes) hoặc không có giá trị ghi đè (no). Bạn có thể thêm cột Có giá trị ghi đè tương ứng vào bảng yêu cầu.
  • has-response-header. Cho thấy những tài nguyên chứa tiêu đề phản hồi HTTP được chỉ định. Công cụ cho nhà phát triển sẽ điền vào trình đơn thả xuống tự động hoàn thành tất cả các tiêu đề phản hồi mà công cụ này đã gặp phải.
  • is. Sử dụng is:running để tìm tài nguyên WebSocket.
  • larger-than. Hiện những tài nguyên có kích thước lớn hơn kích thước đã chỉ định, tính bằng byte. Việc đặt giá trị 1000 tương đương với việc đặt giá trị 1k.
  • method. Hiển thị các tài nguyên được truy xuất qua một loại phương thức HTTP cụ thể. Công cụ cho nhà phát triển sẽ điền vào trình đơn thả xuống tự động hoàn thành tất cả các phương thức HTTP mà công cụ này gặp phải.
  • mime-type. Hiện tài nguyên của một loại MIME được chỉ định. Công cụ cho nhà phát triển sẽ điền vào trình đơn thả xuống tự động hoàn thành bằng tất cả các loại MIME mà công cụ này gặp phải.
  • mixed-content. Hiện 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 được hiển thị (mixed-content:displayed).
  • priority. Hiển thị những tài nguyên có mức độ ưu tiên khớp với giá trị đã chỉ định.
  • resource-type. Hiện tài nguyên thuộc một loại tài nguyên, chẳng hạn như hình ảnh. Công cụ cho nhà phát triển sẽ điền sẵn vào trình đơn thả xuống tự động hoàn thành tất cả các loại tài nguyên mà công cụ này gặp phải.
  • 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ẽ được gắn cờ trong bảng điều khiển Mạng.
  • scheme. Cho thấy 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 những tài nguyên có tiêu đề Set-Cookie có thuộc tính Domain khớp với giá trị đã chỉ định. Công cụ cho nhà phát triển sẽ điền vào tính năng tự động hoàn thành tất cả các miền cookie mà công cụ này gặp phải.
  • set-cookie-name. Hiện các 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 sẽ điền vào tính năng tự động hoàn thành tất cả tên cookie mà công cụ này đã gặp.
  • set-cookie-value. Hiện những tài nguyên có tiêu đề Set-Cookie với giá trị khớp với giá trị đã chỉ định. DevTools sẽ điền sẵn tính năng tự động hoàn thành với tất cả giá trị cookie mà công cụ này gặp phải.
  • status-code. Chỉ hiện những tài nguyên có mã trạng thái HTTP khớp với mã đã chỉ định. Công cụ cho nhà phát triển sẽ điền vào trình đơn thả xuống tự động hoàn thành tất cả mã trạng thái mà công cụ này gặp phải.
  • url. Hiện 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 tài nguyên, hãy nhấp vào nút All (Tất cả), Fetch/XHR (Tìm nạp/XHR), JS, CSS, Img (Hình ảnh), Media (Nội dung nghe nhìn), Font (Phông chữ), Doc (Tài liệu), WS (WebSocket), Wasm (WebAssembly), Manifest (Tệp kê khai) hoặc Other (Khác, bất kỳ loại nào khác không có trong danh sách này) trên bảng điều khiển Network (Mạng).

Nếu bạn không thấy các nút này, thì có thể thanh thao tác Bộ lọc đang bị ẩn. Xem phần Ẩn thanh Bộ lọc.

Để hiện đồng thời các tài nguyên thuộc nhiều loại, hãy giữ phím Command (Mac) hoặc Control (Windows, Linux), rồi nhấp vào một số bộ lọc loại.

Sử dụng bộ lọc loại để hiển thị tài nguyên 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 dòng thời gian Tổng quan để chỉ hiển thị những yêu cầu đang hoạt động trong khung thời gian đó. Bộ lọc này là bộ lọc bao hàm. Mọi yêu cầu đang hoạt động trong thời gian được đánh dấu đều sẽ xuất hiện.

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à những 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 bạn thấy trong bảng Yêu cầu bắt đầu bằng data: đều là URL dữ liệu.

Để ẩn các yêu cầu này, trong thanh thao tác Filters (Bộ lọc), hãy chọn More filters (Bộ lọc khác) > Hide data URLs (Ẩ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 cho biết số yêu cầu được hiển thị trong tổng số yêu cầu.

Ẩn URL của tiện ích

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

Để ẩn các yêu cầu về tiện ích, trong thanh thao tác Bộ lọc, hãy chọn Bộ lọc khác > Ẩ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 cho biết số lượng yêu cầu được hiển thị trong tổng số yêu cầu.

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 gì, trong thanh thao tác Bộ lọc, hãy chọn Bộ lọc khác > Cookie phản hồi bị chặn.

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 cho biết số lượng yêu cầu được hiển thị trong tổng số yêu cầu.

Để 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 lên biểu tượng thông tin .

Ngoài ra, bảng điều khiển Mạng còn hiển thị biểu tượng cảnh báo bên cạnh một yêu cầu có cookie bị chặn do các cờ Chrome hoặc do cấu hình. Di chuột lên biểu tượng để xem chú thích có gợi ý và nhấp vào biểu tượng đó để chuyển đến bảng điều khiển Vấn đề để biết thêm thông tin.

Biểu tượng cảnh báo bên cạnh một yêu cầu bị chặn do các cờ hoặc cấu hình của Chrome.

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, trong thanh thao tác Bộ lọc, hãy chọn Bộ lọc khác > Yêu cầu bị chặn. Để kiểm thử, bạn có thể sử dụng thẻ Chặn yêu cầu mạng trong ngăn.

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

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

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ừ các yêu cầu có nguồn gốc khác với nguồn gốc của trang, trong thanh thao tác Bộ lọc, hãy chọn Bộ lọc khác > Yêu cầu của bên thứ ba.

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

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

Sắp xếp yêu cầu

Theo mặc định, các yêu cầu trong bảng Requests (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 này theo 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, di chuột qua Thác nước rồi chọn một trong các lựa chọ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 hoàn tất đầu tiên sẽ ở trên cùng.
  • Tổng thời lượng. Yêu cầu có thời gian thiết lập kết nối và yêu cầu / phản hồi ngắn nhất nằm ở trên cùng.
  • Độ trễ. Yêu cầu có thời gian chờ phản hồi ngắn nhất sẽ nằm ở trên cùng.

Các nội dung mô tả này giả định rằng mỗi lựa chọn tương ứng được xếp hạng từ ngắn nhất đến dài nhất. Khi bạn nhấp vào tiêu đề của cột Thác nước, thứ tự sẽ đảo ngược.

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

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

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 các 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ý của tất cả yêu cầu được thực hiện trong khi Công cụ cho nhà phát triển đang mở. Khi nhấp hoặc di chuột qua các yêu cầu, bạn sẽ thấy thêm thông tin về các yêu cầu đó.

Các yêu cầu mạng được ghi lại trong bảng Yêu cầu.

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

  • Tên. Tên tệp hoặc giá trị nhận dạng của tài nguyên.
  • Trạng thái. Cột này có thể cho thấy 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 khác nguồn gốc (CORS).
    • (blocked:origin) cho các yêu cầu có tiêu đề bị định sai cấu hình. Di chuột qua giá trị trạng thái này để xem chú thích có gợi ý về vấn đề đã xảy ra.
    • (failed), theo sau là thông báo lỗi.
  • Type (Loại). Loại MIME của tài nguyên được yêu cầu.

  • Người khởi tạo. Các đối tượng hoặc quy trình sau đây có thể bắt đầu 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.
    • Script. Một hàm JavaScript. Trong trường hợp này, bảng điều khiển Mạng sẽ cung cấp một đường liên kết đến dòng tương ứng trong tệp nguồn.
    • Gợi ý ban đầu. Phản hồi HTTP 103 Early Hints.
    • Khác. Một số quy trình hoặc hành động khác, chẳng hạn như chuyển đến một trang bằng đường liên kết hoặc nhập URL vào 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, do máy chủ phân phối.

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

  • Thác nước. Bảng chi tiết trực quan về 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 mục để ẩn hoặc hiện mục đó. Các lựa chọn được hiển thị sẽ có dấu kiểm bên cạnh.

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

Bạn có thể thêm hoặc xoá các cột bổ sung sau đây:

  • Yêu cầu số. Thứ tự tuyệt đối của việc bắt đầu yêu cầu, được ghim vào vị trí đầu tiên trong bảng Yêu cầu theo mặc định.
  • Đường dẫn. Phần đường dẫn của URL.
  • URL. URL đầy đủ của yêu cầu.
  • Phương thức. Phương thức HTTP của yêu cầu (ví dụ: GET, POST, PUT, DELETE).
  • Giao thức. Giao thức của yêu cầu (ví dụ: h2 cho HTTP/2, h3 cho HTTP/3, v.v.).
  • Lược đồ. Phần giao thức của URL.
  • Miền. Phần miền của URL.
  • Địa chỉ từ xa. Địa chỉ IP từ xa và cổng của yêu cầu.
  • Không gian địa chỉ từ xa. Không gian địa chỉ từ xa của yêu cầu. Public cho IP công khai, Private cho IP riêng tư.
  • Không gian địa chỉ của trình khởi tạo. Không gian địa chỉ của trình khởi tạo yêu cầu. Giống như điều khiển từ xa.
  • Cookie. Số lượng cookie trong yêu cầu.
  • Đặt cookie. Số lượng cookie trong phản hồi.
  • Mức độ ưu tiên. Mức độ ưu tiên của yêu cầu.
  • Mã nhận dạng kết nối. Mã kết nối của yêu cầu trong một phiên của ứng dụng, nếu có.
  • Có lệnh ghi đè. Liệu yêu cầu có bị ghi đè hay không (có, không, nội dung hoặc tiêu đề).
  • Có liên quan đến quảng cáo. Đúng hay sai.
  • Được tải trước. Yêu cầu có được bắt đầu bằng tính năng tải trước theo suy đoán hay không.
  • Chặn kết xuất. Liệu yêu cầu có chặn quá trình kết xuất, có khả năng chặn hay không.
  • Thác nước. Bảng chi tiết trực quan về hoạt động của từng yêu cầu.

Thêm cột tuỳ chỉnh

Cách thêm 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 Requests (Yêu cầu) rồi chọn Response Headers (Tiêu đề phản hồi) > Manage Header Columns (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 rồi nhấp vào Thêm.

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

Nhóm các yêu cầu theo khung nội tuyến

Nếu khung nội tuyến trên một trang bắt đầu nhiều yêu cầu, bạn có thể làm cho nhật ký yêu cầu dễ đọc hơn bằng cách nhóm các yêu cầu đó lại.

Để nhóm các yêu cầu theo iframe, hãy mở phần Cài đặt Biểu tượng bánh răng Cài đặt của bảng điều khiển Mạng. trong bảng điều khiển Mạng rồi đánh dấu vào 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 yêu cầu do khung nội tuyến 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 của các yêu cầu liên quan đến nhau. Theo mặc định, Thác nước được sắp xếp theo thời gian bắt đầu của các 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 yêu cầu ở xa bên phải.

Hãy xem phần Sắp xếp theo giai đoạn hoạt động để biết các cách sắp xếp Thác nước.

Cột Thác nước của thẻ Yêu cầu.

Phân tích thông báo của một kết nối WebSocket

Cách xem thông báo của một 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. Mở thẻ Tin nhắn. Bảng này cho biết 100 thông báo 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 Tên của bảng Yêu cầu.

Thẻ Tin nhắn của kết nối WebSocket đã chọn.

Bảng này có 3 cột:

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

Tin nhắn được mã hoá bằng màu theo loại:

  • Tin nhắn văn bản gửi đ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 các sự kiện trong luồng

Cách xem các sự kiện mà máy chủ truyền trực tuyến thông qua Fetch API, EventSource API và XHR:

  1. Ghi lại các yêu cầu mạng trên một trang phát trực tuyến sự kiện.
  2. Trong Mạng, hãy chọn một yêu cầu rồi mở thẻ EventStream.

Thẻ EventStream của một kết nối luồng.

Để 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 các sự kiện đã ghi lại, hãy nhấp vào biểu tượng Xoá.

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

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

  1. Chọn một yêu cầu trong cột Tên trong bảng Yêu cầu.
  2. Mở thẻ Xem trước.

Thẻ này chủ yếu dùng để xem hình ảnh.

Thẻ Xem trước của yêu cầu đã chọn.

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. Chọn một yêu cầu trong cột Tên trong bảng Yêu cầu.
  2. Mở thẻ Response (Phản hồi).

Thẻ Phản hồi của yêu cầu đã chọn cho thấy các phản hồi bằng văn bản.

Đối với phản hồi nhị phân hoặc nén, hãy chọn một phương thức giải mã (Base64, Hex hoặc UTF-8) trong trình đơn thả xuống ở cuối thẻ Response (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. Chọn một yêu cầu trong cột Tên trong bảng Yêu cầu.
  2. Mở thẻ Headers (Tiêu đề) rồi di chuyển xuống các mục General (Chung), Response Headers (Tiêu đề phản hồi), Request Headers (Tiêu đề của yêu cầu) và Early Hints Headers (Tiêu đề gợi ý sớm) (không bắt buộc).

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

Trong phần General (Chung), Công cụ cho nhà phát triển sẽ hiển thị 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 được.

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

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. Cách xem tên tiêu đề HTTP theo thứ tự nhận được:

  1. Mở thẻ Tiêu đề cho yêu cầu mà bạn quan tâm. Xem phần Xem tiêu đề HTTP.
  2. Nhấp vào view source (xem nguồn), bên cạnh phần Request Header (tiêu đề của yêu cầu) hoặc Response Header (tiêu đề phản hồi).

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

Đôi khi, thẻ Tiêu đề sẽ 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 gửi từ một bộ nhớ đệm cục bộ. Bộ nhớ đệm này không lưu trữ các tiêu đề của yêu cầu ban đầu. Trong trường hợp này, bạn có thể vô hiệu hoá 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 Console (Bảng điều khiển). Thông báo cảnh báo về tiêu đề tạm thời.

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

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), hãy chọn một yêu cầu trong bảng Yêu cầu rồi mở thẻ Tải trọng.

Thẻ Tải trọng của yêu cầu đã chọn cho thấy các đối số.

Xem nguồn tải trọng

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

Để xem nguồn của các 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 mục Tham số chuỗi truy vấn hoặc Dữ liệu biểu mẫu.

Nút xem nguồn bên cạnh các phần tải trọng.

Xem các tham số truy vấn và biểu mẫu được mã hoá URL

Theo mặc định, Công cụ cho nhà phát triển sẽ hiển thị các tham số chuỗi truy vấn và dữ liệu biểu mẫu ở dạng được giải mã URL. Để bật/tắt tính năng mã hoá URL cho các đối số trên thẻ Tải trọng, hãy nhấp vào Xem URL được mã hoá hoặc Xem URL được giải mã.

Các nút để bật/tắt tính năng giải mã URL của các tham số tải trọng.

Xem tải trọng nhị phân và tải trọng nén

Đối với tải trọng yêu cầu nhị phân hoặc được nén, hãy chọn một phương thức giải mã (Base64, Hex hoặc UTF-8) trong trình đơn thả xuống ở cuối thẻ Payload (Tải trọng).

Xem tải trọng nhị phân.

Xem cookie

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

  1. Chọn một yêu cầu trong cột Tên trong bảng Yêu cầu.
  2. Mở thẻ Cookie.

Thẻ Cookie của yêu cầu đã chọn cho thấy thông tin chi tiết về Cookie.

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

Để sửa đổi cookie, hãy xem bài viết Xem, chỉnh sửa và xoá cookie.

Xem các phiên được liên kết với thiết bị

Thẻ Phiên được liên kết với thiết bị cho biết thông tin hoãn lại (làm mới) liên quan đến yêu cầu đã chọn cho tất cả phiên được liên kết với thiết bị đang hoạt động trên một trang web.

Cách xem thông tin về việc trì hoãn (làm mới):

  1. Chọn một yêu cầu trong cột Tên trong bảng Yêu cầu.
  2. Mở thẻ Phiên được liên kết với thiết bị.

Thẻ Phiên được liên kết với thiết bị.

Thẻ Device bound sessions (Phiên liên kết với thiết bị) chỉ xuất hiện đối với các yêu cầu có liên quan kèm theo cookie. Thẻ này liệt kê tất cả các phiên được liên kết với thiết bị đang hoạt động và liệu các phiên đó có hoãn yêu cầu hay không (và nếu không, lý do là gì). Bạn có thể chọn các phương án trì hoãn sau:

  • Deferred (Refresh)
  • Not deferred (Proactive refresh attempted)
  • Not deferred (Request is in scope of session but proactive refresh is not possible)
  • Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
  • Not deferred (Request is in scope of session but cookies are still present)
  • Not deferred (Request is not in scope of session)

Xem thông tin chi tiết về thời gian của một yêu cầu

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

  1. Chọn một yêu cầu trong cột Tên trong bảng Yêu cầu.
  2. Mở thẻ Thời gian.

Hãy xem phần Xem trước thông tin chi tiết về thời gian để biết cách truy cập nhanh hơn vào dữ liệu này.

Thẻ Thời gian của yêu cầu đã chọn cho thấy thời gian của các giai đoạn.

Hãy xem phần 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ể thấy trong thẻ Thời gian.

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

Để xem trước thông tin 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 xem phần Xem thông tin chi tiết về thời gian của một yêu cầu để biết cách truy cập vào dữ liệu này mà không cần di chuột.

Xem trước thông tin chi tiết về thời gian của một yêu cầu.

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

Sau đây là thông tin chi tiết về từng giai đoạn mà bạn có thể thấy trong thẻ Thời gian:

  • Đang xếp hàng. Trình duyệt sẽ đưa các yêu cầu vào hàng đợi trước khi bắt đầu kết nối và khi:
    • Có các yêu cầu có mức độ ưu tiên cao hơn. Mức độ ưu tiên của yêu cầu được xác định dựa trên các yếu tố như loại tài nguyên, cũng như vị trí của tài nguyên trong tài liệu. Để biết thêm thông tin, hãy đọc phần mức độ ưu tiên của tài nguyên trong hướng dẫn fetchpriority.
    • Đã có 6 kết nối TCP được mở cho nguồn gốc này, đây là giới hạn. (Chỉ áp dụng cho HTTP/1.0 và HTTP/1.1.)
    • Trình duyệt đang tạm thời phân bổ dung lượng trong bộ nhớ đệm của ổ đĩa.
  • Bị đình trệ. Yêu cầu có thể bị tạm dừng 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 một kết nối, bao gồm cả các lần bắt tay TCP hoặc thử lại và thương lượng một SSL.
  • Thương lượng qua proxy. Trình duyệt đang thương lượng yêu cầu với một máy chủ proxy.
  • Yêu cầu đã gửi. 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 đến ServiceWorker. Yêu cầu đang được gửi đến service worker.
  • Đang chờ (TTFB). Trình duyệt đang chờ byte đầu tiên của một phản hồi. TTFB là viết tắt của Thời gian cho byte đầu tiên. Thời gian này bao gồm 1 lượt trễ khứ hồi và thời gian máy chủ cần để chuẩn bị phản hồ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 worker dịch vụ. Giá trị này là tổng thời gian đọc nội dung phản hồi. Các giá trị lớn hơn dự kiến có thể cho thấy mạng chậm hoặc trình duyệt đang bận thực hiện các công việc khác, khiến việc đọc phản hồi bị chậm trễ.

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

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

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

Khi bảng Requests (Yêu cầu) được sắp xếp theo thứ 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 là đối tượng 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 ở phía trên yêu cầu đó, thì yêu cầu cao hơn đó là đối tượng khởi tạo của đối tượng khởi tạo. Và tương tự như vậy.

Xem 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 các sự kiện DOMContentLoaded và 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 thanh trạng thái ở cuối bảng điều khiển 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 tài nguyên được chuyể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 chuyển và tải (chưa nén) trong thanh trạng thái ở cuối bảng điều khiển Mạng.

Tổng kích thước của các tài nguyên đã chuyển và tải.

Hãy xem phần Xem kích thước chưa 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.

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

Khi một câu lệnh JavaScript khiến một tài nguyên được yêu cầu, hãy di chuột lên 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 một yêu cầu tài nguyên.

Xem kích thước chưa nén của tài nguyên

Chọn Cài đặt Biểu tượng bánh răng Cài đặt của bảng điều khiển Mạng. > Hàng yêu cầu lớn, rồi 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 chưa nén là 136 KB.

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

Bạn có thể xuất hoặc sao chép danh sách yêu cầu (đã áp dụng bộ lọc) theo một số cách được mô tả dưới đây.

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

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

Để giảm nguy cơ vô tình rò rỉ thông tin nhạy cảm, theo mặc định, bạn có thể xuất nhật ký mạng "đã dọn dẹp" ở định dạng HAR, không bao gồm thông tin nhạy cảm như tiêu đề Cookie, Set-Cookie và Authorization. Nếu cần, bạn cũng có thể xuất nhật ký có dữ liệu nhạy cảm.

Để lưu tất cả yêu cầu mạng vào tệp HAR, hãy chọn một trong hai cách sau:

  • Nhấp chuột phải vào một yêu cầu bất kỳ trong bảng Yêu cầu rồi chọn Sao chép > Lưu tất cả [được liệt kê] dưới dạng HAR (đã dọn dẹp) hoặc Lưu tất cả [được liệt kê] dưới dạng HAR (có dữ liệu nhạy cảm).

    Chọn "Lưu tất cả dữ liệu được liệt kê dưới dạng tệp HAR (đã dọn dẹp)".

  • Nhấp vào biểu tượng Xuất tệp HAR (đã dọn dẹp)... trong thanh thao tác ở đầu bảng điều khiển Mạng.

    Để xuất dữ liệu nhạy cảm, trước tiên, hãy bật Settings (Cài đặt) > Preferences (Lựa chọn ưu tiên) > Network (Mạng) > Allow to generate HAR with sensitive data (Cho phép tạo HAR kèm theo dữ liệu nhạy cảm), sau đó nhấp vào nút (tải xuống) Export (Xuất) rồi chọn Export HAR (with sensitive data) (Xuất HAR (kèm theo dữ liệu nhạy cảm)) trong trình đơn thả xuống.

    Nút "Xuất HAR" trong thanh thao tác ở trên cùng có 2 lựa chọn xuất được bật.

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 HAR trong thanh thao tác ở đầ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ả yêu cầu vào bảng nhớ tạm

Trong cột Name (Tên) của bảng Requests (Yêu cầu), hãy nhấp chuột phải vào một yêu cầu, di chuột qua Copy (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:

  • 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 lệnh cURL.
  • Sao chép dưới dạng PowerShell. Sao chép yêu cầu dưới dạng một lệnh PowerShell.
  • Sao chép dưới dạng lệnh tìm nạp. Sao chép yêu cầu dưới dạng lệnh tìm nạp.
  • Sao chép dưới dạng lệnh 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 dưới dạng phần tử tải trước. Sao chép yêu cầu dưới dạng thẻ HTML <link rel="preload">.
  • 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 dấu vết 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ả cá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 lệnh 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ả 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ạng HAR (đã dọn dẹp). Sao chép tất cả yêu cầu dưới dạng dữ liệu HAR mà không có dữ liệu nhạy cảm như tiêu đề Cookie, Set-Cookie và Authorization.
  • Sao chép tất cả dữ liệu có dạng HAR (bao gồm cả dữ liệu nhạy cảm). Sao chép tất cả yêu cầu dưới dạng dữ liệu HAR có chứa dữ liệu nhạy cảm.

Các lựa chọn để sao chép tất cả yêu cầu.

Để sao chép một nhóm yêu cầu đã lọc, hãy áp dụng một 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ả lệnh được liệt kê dưới dạng cURL. Sao chép tất cả các yêu cầu đã lọc dưới dạng một chuỗi lệnh cURL.
  • Sao chép tất cả lệnh được liệt kê dưới dạng PowerShell. Sao chép tất cả các yêu cầu đã lọc dưới dạng một chuỗi lệnh PowerShell.
  • Sao chép tất cả lệnh được liệt kê dưới dạng lệnh 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ả lệnh được liệt kê dưới dạng fetch (Node.js). Sao chép tất cả cá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ả dữ liệu được liệt kê ở dạng HAR (đã dọn dẹp). Sao chép tất cả yêu cầu đã lọc dưới dạng dữ liệu HAR mà không có dữ liệu nhạy cảm như tiêu đề Cookie, Set-Cookie và Authorization.
  • Sao chép tất cả dữ liệu được liệt kê dưới dạng HAR (bao gồm cả dữ liệu nhạy cảm). Sao chép tất cả yêu cầu đã lọc dưới dạng dữ liệu HAR có chứa dữ liệu nhạy cảm.

Sao chép các lựa chọn 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 trong giao diện người dùng của bảng điều khiển Mạng để tập trung vào những thông tin quan trọng đối với bạn.

Ẩn thanh thao tác Bộ lọc

Theo mặc định, Công cụ cho nhà phát triển sẽ hiển thị Thanh bộ lọc ở đầu bảng điều khiển Mạng. Nhấp vào biểu tượng Bộ lọc để ẩn.

Nút Ẩn bộ lọc trên thanh cài đặt.

Sử 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ó nhiều khoảng trắng hơn trong bảng yêu cầu mạng. Một số cột cũng 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 Size (Kích thước) là kích thước chưa nén của một yêu cầu và cột Priority (Mức độ ưu tiên) cho thấy 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ị trên cùng).

Mở phần Cài đặt Biểu tượng bánh răng Cài đặt của bảng điều khiển Mạng. 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 bản Tổng quan

Theo mặc định, Công cụ cho nhà phát triển sẽ hiển thị kênh Tổng quan. Mở phần Cài đặt Biểu tượng bánh răng Cài đặt của bảng điều khiển Mạng. rồi bỏ đánh dấu hộp Hiện thông tin tổng quan để ẩn thông tin này.

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