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

Kayce Basques

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

Dừng ghi lại các 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 trên bảng Mạng. Nút 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 (Mac) hoặc Control + E (Windows, Linux) khi bảng điều khiển Mạng đang ở chế độ tiêu điểm.

Xoá yêu cầu

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

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

Để lưu các yêu cầu trên các lần tải trang, hãy đánh dấu vào hộp Giữ lại nhật ký trên bảng điều khiển 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 quá trình 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 họ đợi 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 trong bảng điều khiển Mạng rồi đánh dấu vào mục Chụp ảnh màn hình.

Tải lại trang trong khi bảng điều khiển Network (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 một ảnh chụp màn hình để xem thời điểm chụp ảnh màn hì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 ảnh chụp màn hình được chụp.
• Nhấp đúp vào một hình thu nhỏ để phóng to hình thu nhỏ đó.

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

Để phát lại một yêu cầu XHR, hãy làm theo một trong những cách sau trong bảng Requests (Yêu cầu):

• Chọn yêu cầu và nhấn phím R.
• Nhấp chuột phải vào yêu cầu rồi chọn Replay XHR (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 trải nghiệm của người dùng lần đầu trên 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 sẽ vô hiệu hoá 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, 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ần truy cập lặp lại.

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 ở 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 để 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.

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

Có một lớp ứng dụng web mới, được gọi là Ứng dụng web tiến bộ. Lớp ứng dụng này 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 không có mạng, hãy chọn Offline (Không có mạng) trong trình đơn thả xuống Network throttling (Điều tiết mạng) bên cạnh hộp đánh dấu Disable cache (Tắt bộ nhớ đệm).

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 đã được bật.

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

Để mô phỏng 4G nhanh, 4G chậm hoặc 3G, hãy chọn chế độ cài đặt sẵn tương ứng trong trình đơn thả xuống Điều tiết ở thanh thao tác trên cùng.

Công cụ cho nhà phát triển sẽ 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 tính năng điều tiết đã được bật.

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

Ngoài các chế độ đặt sẵn, chẳng hạn như 4G chậm hoặc nhanh, bạn cũng có thể thêm các cấu hình đ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 Cài đặt > Điều tiết.

3. Quay lại bảng điều khiển Network (Mạng), hãy chọn hồ sơ mới của bạn trong trình đơn thả xuống Throttling (Điều tiết).

   

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 được bật.

Điều chỉnh 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 một thông báo qua kết nối.
3. Tạo một hồ sơ điều tiết tuỳ chỉnh có tốc độ rất chậm, ví dụ: 10 kbit/s. Một hồ sơ chậm như vậy sẽ giúp bạn nhận thấy sự khác biệt.
4. Trên bảng 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ụ:

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 chỉnh tốc độ kết nối mạng trong khi làm việc ở 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 để 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 Requests (Yêu cầu) rồi chọn Clear browser cookies (Xoá cookie của trình duyệt).

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

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

Yêu cầu tìm kiếm

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

1. Nhấn tổ hợp 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ũng có thể nhấp vào match_case hoặc regular_expression để bật tính năng phân biệt chữ hoa chữ thường hoặc biểu thức chính quy.

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ẽ làm nổi bật 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ó).

Để 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 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 bạn có thể 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 trong tất cả cá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 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.

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.

Để đả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 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ả ảnh GIF có kích thước lớn hơn 1 kilobyte. Các bộ lọc có nhiều thuộc tính này tương đương với các thao tác AND. Không hỗ trợ các thao tác OR.

Sau đây 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. Hiện 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 đã chỉ định. Bạn có thể sử dụng ký tự đại diện (*) để thêm nhiều miền. Ví dụ: *.com hiển thị tài nguyên từ tất cả tên miền có đuôi là .com. Công cụ cho nhà phát triển sẽ điền sẵn tất cả các miền mà công cụ này đã gặp vào trình đơn thả xuống của tính năng tự động hoàn thành.
• has-overrides. Hiện các yêu cầu đã ghi đè content, headers, mọi nội dung ghi đè (yes) hoặc không có nội dung ghi đè (no). Bạn có thể thêm cột Có nội dung ghi đè tương ứng vào bảng yêu cầu.
• has-response-header. Hiện những tài nguyên có 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ả tiêu đề phản hồi mà công cụ này đã gặp phải.
• is. Sử dụng is:running để tìm các 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 những 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 thuộc một loại MIME 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 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 những tài nguyên có mức độ ưu tiên khớp với giá trị được 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 thị tiêu đề Set-Cookie thô trong thẻ Vấn đề. Cookie bị lỗi với 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. Hiện 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 với 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 sẵn tất cả các miền cookie mà công cụ này đã gặp vào tính năng tự động hoàn thành.
• set-cookie-name. Hiện những tài nguyên có tiêu đề Set-Cookie với tên khớp với giá trị được chỉ định. Công cụ cho nhà phát triển sẽ điền sẵn tất cả tên cookie mà công cụ này đã gặp vào tính năng tự động hoàn thành.
• 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. Công cụ cho nhà phát triển sẽ điền sẵn tất cả các giá trị cookie mà công cụ này đã gặp phải vào tính năng tự động hoàn thành.
• status-code. Chỉ hiện những tài nguyên có mã trạng thái HTTP khớp với mã được chỉ định. DevTools sẽ điền sẵn trình đơn thả xuống tự động hoàn thành bằng 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ị được chỉ định.

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

Để lọc các yêu cầu theo loại tài nguyên, hãy nhấp vào nút Tất cả, Tìm nạp/XHR, JS, CSS, Img, Đa phương tiện, Phông chữ, Tài liệu, WS (WebSocket), Wasm (WebAssembly), Tệp kê khai hoặc Khác (mọi loại khác không có trong danh sách này) trên bảng điều khiển 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.

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 gồm. Mọi yêu cầu đang hoạt động trong thời gian được đánh dấu đều xuất hiện.

Ẩn URL của 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. Mọi yêu cầu mà bạn thấy trong bảng Requests (Yêu cầu) bắt đầu bằng data: đều là một URL dữ liệu.

Để ẩn những yêu cầu này, trong thanh thao tác Bộ lọc, hãy chọn Bộ lọc khác > check_box Ẩn URL dữ liệ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 các tiện ích mà bạn có thể đã cài đặt trong Chrome gửi. Các yêu cầu về tiện ích có URL bắt đầu bằng chrome-extension://.

Để ẩn yêu cầu cấp quyền truy cập vào tiện ích, trong thanh thao tác Bộ lọc, hãy chọn Bộ lọc khác > check_box Ẩn URL của tiện ích.

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.

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

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

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.

Để 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 info.

Ngoài ra, bảng điều khiển Mạng sẽ cho thấy 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 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.

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 > check_box 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 kéo.

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ố 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 > check_box 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 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 bắt đầu nằm ở trên cùng.
• Thời gian phản hồi. Yêu cầu bắt đầu tải xuống đầu tiên 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ó chế độ 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 chờ phản hồi trong thời gian ngắn nhất sẽ ở trên cùng.

Những 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, 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ờ. Phần tối hơn là thời gian tải các byte xuố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 Requests (Yêu cầu) để xem nhật ký của 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ở. Khi bạn nhấp vào hoặc di chuột qua các yêu cầu, thông tin chi tiết về các yêu cầu đó sẽ xuất hiện.

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

• 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:

  

  • 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 cơ chế 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. 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.
  • Tập lệnh. Một hàm JavaScript.
  • Khác. Một quy trình hoặc hành động khác, chẳng hạn như chuyển đến một trang bằng cách sử dụng đường liên kết hoặc nhập một URL vào thanh địa chỉ.

• Kích thước. Tổng kích thước 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 cho đế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 Requests (Yêu cầu) rồi chọn một lựa chọn để ẩn hoặc hiện tiêu đề đó. Các lựa chọn được hiển thị sẽ có dấu đánh dấu bên cạnh.

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ã nhận dạng kết nối, Có chế độ ghi đè và Thác nước.

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 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 rồi nhấp vào Thêm.

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

Nếu các khung hình nội tuyến trên một trang tạo ra nhiều yêu cầu, bạn có thể nhóm các yêu cầu đó để nhật ký yêu cầu dễ đọc hơn.

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

Để xem một 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 so với nhau

Sử dụng Thác nước để xem thời gian của các yêu cầu so với 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 hơn sẽ bắt đầu sớm hơn các yêu cầu ở xa bên phải hơn.

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.

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. Nhấp vào 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.

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

• Dữ liệu. Tải trọng thông báo. Nếu là văn bản thuần tuý, thì thông báo 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. Hệ thống hỗ trợ các mã thao tác sau: 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 thông báo.

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ã thao tác 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.

Để lọc cá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 chặn Xoá.

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 dùng để xem hình ảnh.

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.

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ẻ 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 đề yêu cầu) và Early Hints Headers (Tiêu đề Gợi ý ban đầu) (không bắt buộc).

Trong phần Chung, Công cụ cho nhà phát triển cho bạn biết thông báo trạng thái dễ đọc bên cạnh mã trạng thái HTTP đã nhận được.

Trong phần Response Headers (Tiêu đề phản hồi), bạn có thể di chuột lên một giá trị tiêu đề rồi nhấp vào nút edit (chỉnh sửa) Edit (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 đề sẽ hiển thị tên tiêu đề theo 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 đề 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 này 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 đề 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.

• 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.

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.

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 dễ đọ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.

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

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

Xem cookie

Cách xem cookie được gửi trong tiêu đề HTTP 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ẻ Cookie.

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

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

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

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.

Hãy xem phần Giải thích 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 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.

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

Sau đây là thông tin khác 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 xếp hàng các yêu cầu 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 bằng 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 đang 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 phân bổ tạm thời dung lượng trong bộ nhớ đệm trên ổ đĩa.
• Stalled (Bị kẹt). 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 hoặc thử lại TCP và thương lượng một SSL.
• Đàm phán qua trung gian. 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 service worker.
• Đang đợi (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 khứ hồi của độ trễ 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 thao tác khác, khiến việc đọc phản hồi bị chậm trễ.

Xem các 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 đánh dấu màu xanh lục cho các trình khởi tạo và màu đỏ cho các phần phụ thuộc.

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 đến 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 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 đỏ.

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.

Thận trọng: Thận trọng: Con số này chỉ theo dõi những yêu cầu đã được ghi lại kể từ khi Công cụ cho nhà phát triển được mở. Nếu các yêu cầu khác xảy ra trước khi Công cụ cho nhà phát triển được mở, thì những yêu cầu đó sẽ không được tính.

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

DevTools liệt kê tổng kích thước của các tài nguyên đã truyền và tải (chưa nén) trong thanh trạng thái ở cuối bảng điều khiển Mạng.

Thận trọng: Thận trọng: Con số này chỉ theo dõi những yêu cầu đã được ghi lại kể từ khi Công cụ cho nhà phát triển được mở. Nếu các yêu cầu khác xảy ra trước khi Công cụ cho nhà phát triển được mở, thì những yêu cầu đó sẽ không được tính.

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

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

Kiểm tra Cài đặt > 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.

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ả tiếp theo.

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 cụ thể gồm các trường.

Để giảm nguy cơ vô tình làm 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. Nhật ký này sẽ loại trừ thông tin nhạy cảm, chẳng hạn 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ác yêu cầu được liệt kê] dưới dạng tệp HAR (đã dọn dẹp) hoặc Lưu tất cả [các yêu cầu được liệt kê] dưới dạng tệp HAR (có dữ liệu nhạy cảm).

  

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

  Để xuất dữ liệu nhạy cảm, trước tiên, hãy bật chế độ cài đặt Settings (Cài đặt) > Preferences (Lựa chọn ưu tiên) > Network (Mạng) > check_box 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 download (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.

  

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

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

Lưu ý: Bảng điều khiển Mạng sẽ đọc và cho biết trình khởi tạo cho các yêu cầu được nhập từ tệp HAR.

Sao chép một yêu cầu, một nhóm yêu cầu được lọc hoặc tất cả các yêu cầu 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, di chuột lên Sao chép rồi chọn một trong các lựa 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 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 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 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ả cá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 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 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 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 chuỗi lệnh gọi tìm nạp Node.js.
• Sao chép tất cả dưới dạng HAR (đã dọn dẹp). Sao chép tất cả các yêu cầu dưới dạng dữ liệu HAR mà không có dữ liệu nhạy cảm, chẳng hạn như tiêu đề Cookie, Set-Cookie và Authorization.
• Sao chép tất cả dưới dạng HAR (bao gồm cả dữ liệu nhạy cảm). Sao chép tất cả các yêu cầu dưới dạng dữ liệu HAR có chứa dữ liệu nhạy cảm.

Để 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ả cá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 tìm nạp. Sao chép tất cả các yêu cầu đã lọc dưới dạng 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 tìm nạp (Node.js). Sao chép tất cả các yêu cầu đã lọc dưới dạng 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ả cá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, chẳng hạn 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ả cá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.

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 mục 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 nội dung quan trọng đối với bạn.

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

Theo mặc định, DevTools 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 filter_alt Bộ lọc để ẩn bộ lọc.

Dùng các 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 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 chưa nén của một yêu cầu và cột 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à mức độ ưu tiên tìm nạp cuối cùng (giá trị trên cùng).

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

Ẩn bản Tổng quan

Theo mặc định, Công cụ cho nhà phát triển sẽ cho thấy bản ghi Tổng quan. Mở phần Cài đặt rồi bỏ chọn hộp Hiện thông tin tổng quan để ẩn thông tin này.