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

Khám phá các cách mới để phân tích cách trang 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 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 biểu tượng Dừng ghi nhật ký mạng trên bảng điều khiển Mạng. Biểu tượng này chuyển sang màu xám để cho biết rằng DevTools 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 Network (Mạng) đang ở tiêu điểm.

Xoá yêu cầu

Nhấp vào biểu tượng Xoá 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.

Lưu yêu cầu trong các lần 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 đánh dấu Preserve log (Duy trì 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 tuỳ chọn Preserve log (Duy trì 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 nội dung mà người dùng nhìn thấy khi 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 bên 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 Network (Mạng) đang ở 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 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 đó. 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 thu 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.

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. Đ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 trong các bảng điều khiển khác của DevTools, hãy sử dụng ngăn Network conditions (Điều kiện mạng).

1. Nhấp vào biểu tượng để mở ngăn Network Conditions (Đ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 tên là Ứng dụng web tiến bộ. Các ứ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 xây dựng loại ứng dụng này, bạn nên nhanh chóng mô phỏng 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.

Công cụ của Chrome cho nhà phát triển 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 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.

Công cụ của Chrome cho nhà phát triển sẽ hiển thị biểu tượng cảnh báo warning (cảnh báo) bên cạnh bảng điều khiển Network (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ế độ cài đặt trước, chẳng hạn như 4G chậm hoặc nhanh, bạn cũng có thể thêm các hồ sơ điều tiết tuỳ chỉnh của riêng mình:

1. Mở trình đơn Điều tiết rồi chọn Tuỳ chỉnh > Thêm....
2. Thiết lập 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), chọn hồ sơ mới của bạn trong trình đơn thả xuống Throttling (Giới hạn).

   

DevTools hiển thị biểu tượng cảnh báo bên cạnh bảng điều khiển Network (Mạng) để nhắc bạn rằng tính năng điều tiết đã được bật.

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

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

Cách quan sát tính năng điều tiết 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 một hồ sơ điều tiết tuỳ chỉnh rất chậm, ví dụ: 10 kbit/s. 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ơ đó rồi gửi một thông báo khác.
5. Bật/tắt bộ lọc WS, nhấp vào tên kết nối, mở thẻ Messages (Tin nhắn) rồi kiểm tra chênh lệch thời gian giữa tin nhắn đã gửi và tin nhắn đượ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 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 DevTools, hãy sử dụng ngăn Network conditions (Đ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 Đ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.

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. Xoá Chọn tự động.
3. Chọn một tuỳ chọn tác nhân người dùng trong trình đơn hoặc nhập một tuỳ chọn tuỳ chỉnh vào hộp.

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

Cách tìm kiếm trên các tiêu đề 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, 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 Mạng làm nổi bật yêu cầu khớp bằng màu vàng. Ngoài ra, bảng điều khiển cũng mở thẻ Tiêu đề hoặc Phản hồi và làm nổi bật chuỗi 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 khối 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 phần 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 tài sản

Sử dụng hộp 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 đó, thì có thể là do thanh Bộ lọc bị ẩn. Xem bài viết Ẩn thanh Bộ lọc.

Để đảo ngược bộ lọc, hãy đánh dấu vào hộp đánh dấu Đả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. Ví dụ: mime-type:image/gif larger-than:1K hiển thị tất cả ảnh GIF lớn hơn 1 kilobyte. Những bộ lọc nhiều cơ sở lưu trú này tương đương với toán tử AND. Không hỗ trợ toán tử OR.

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

• cookie-domain. Hiển thị các tài nguyên đặt một miền cookie cụ thể.
• cookie-name. Hiển thị các tài nguyên đặt tên cookie cụ thể.
• cookie-path. Hiển thị các tài nguyên đặ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 được chỉ định. Bạn có thể 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ẽ 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à trình đơn này đã gặp.
• has-overrides. Hiển thị các yêu cầu đã ghi đè content, headers, mọi yêu cầu ghi đè (yes) hoặc không có yêu cầu ghi đè (no). Bạn có thể thêm cột Có ghi đè tương ứng vào bảng yêu cầu.
• has-response-header. Hiển thị các 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 tất cả tiêu đề phản hồi đã gặp vào trình đơn thả xuống tự động hoàn thành.
• is. Sử dụng is:running để tìm tài nguyên WebSocket.
• larger-than. Hiển thị các tài nguyên 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 đã chỉ định. Công cụ cho nhà phát triển điền sẵn tất cả các phương thức HTTP mà công cụ đó gặp phải trong trình đơn thả xuống tự động hoàn thành.
• mime-type. Hiển thị tài nguyên của một loại MIME đã chỉ định. Công cụ cho nhà phát triển sẽ điền tất cả loại MIME đã gặp vào trình đơn thả xuống tự động hoàn thành.
• 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. DevTools sẽ điền sẵn tất cả các loại tài nguyên đã gặp vào trình đơn thả xuống tự động hoàn thành.
• response-header-set-cookie. Hiển thị các tiêu đề Set-Cookie thô trong thẻ Vấn đề. Cookie có định dạng không chính xác với 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ị đã chỉ định. Công cụ cho nhà phát triển điền sẵn tất cả miền cookie mà công cụ đó đã gặp phải cho tính năng tự động hoàn thành.
• set-cookie-name. Hiển thị 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 điền sẵn tất cả tên cookie đã truy cập cho tính năng tự động hoàn thành.
• 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ị đã chỉ định. DevTools sẽ điền tính năng tự động hoàn thành bằng tất cả các giá trị cookie mà nó đã gặp.
• status-code. Chỉ hiển thị các tài nguyên có mã trạng thái HTTP khớp với mã đã chỉ định. DevTools sẽ điền tất cả mã trạng thái đã gặp vào trình đơn thả xuống tự động hoàn thành.
• url. Hiển thị các 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 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, Media, 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 những nút này, thì có thể thanh thao tác Bộ lọc bị ẩn. Hãy xem phần Ẩn thanh Bộ lọc.

Để hiển thị đồ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 sang phải trên tiến trình Tổng quan để chỉ hiển thị các yêu cầu đang hoạt động trong khung thời gian đó. Bộ lọc này có tính toàn bộ. Mọi yêu cầu đang hoạt động trong khoảng thời gian được làm nổi bật sẽ được hiển thị.

Ẩ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 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) > check_box Hide data URLs (Ẩn URL dữ liệ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.

Ẩn URL của tiện ích

Để tập trung vào mã mà bạn viết, 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 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 > check_box Ẩn URL tiện ích.

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 yêu cầu ngoại trừ những yêu cầu có cookie phản hồi bị chặn vì lý do bất kỳ, 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. Hãy thử trên trang minh hoạ này.

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 thông tin.

Ngoài ra, bảng điều khiển Network (Mạng) sẽ hiện biểu tượng cảnh báo cảnh báo bên cạnh yêu cầu có cookie bị chặn do cờ Chrome hoặc do cấu hình. 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.

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

Để lọc ra mọi yêu cầu ngoại trừ 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ử điều này, bạn có thể sử dụng thẻ Chặn yêu cầu mạng trong ngă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 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 yêu cầu ngoại trừ những yêu cầu có nguồn gốc khác với nguồn gốc 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. Hãy thử tính năng này trên trang minh hoạ.

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.

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

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. Tuy nhiên, bạn có thể sắp xếp bảng này bằng các tiêu chí khác.

Sắp xếp theo cột

Nhấp vào tiêu đề của bất kỳ cột nào 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 Waterfall 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 Waterfall rồi chọn một trong các tuỳ 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 đầ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 sẽ nằm ở 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. Thao tác nhấp vào tiêu đề của cột Thác nước sẽ đảo ngược thứ tự.

Trong ví dụ này, Dòng thá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à DevTools đ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 Network (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 khi DevTools đ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 đó.

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ể hiển thị các giá trị sau:

  

  • Mã trạng thái HTTP, ví dụ: 200 hoặc 404.
  • CORS error đối với các yêu cầu không thành công do tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS).
  • (blocked:origin) đối với các yêu cầu có tiêu đề được định cấu hình không chính xác. Di chuột qua giá trị trạng thái này để xem chú giải có gợi ý về vấn đề.
  • (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.

• 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. Một 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 đế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 các 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 tuỳ chọn để ẩn hoặc hiện tiêu đề đó. Các lựa chọn hiển thị sẽ có dấu kiểm 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ã kết nối, Có ghi đè và Trình tự.

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

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ở Settings (Cài đặt) bên trong bảng điều khiển Network (Mạng) rồi đánh dấu vào check_box Group by frame (Nhóm theo khung).

Để xem yêu cầu do một 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 so với nhau. Theo mặc định, Thác nước được sắp xếp theo thời gian bắt đầu 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 bài viết Giai đoạn sắp xếp theo 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 kết nối WebSocket

Cách xem thông báo của 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 thấy 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 chứa 3 cột:

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

Các 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ã opcode 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 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 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.
2. Trong Mạng, hãy chọn một yêu cầu rồi mở 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.

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

Trong phần General (Chung), DevTools 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 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. Để 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 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 đề 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 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ể vô hiệu hoá tính năng lưu vào bộ nhớ đệm để xem toàn bộ tiêu đề 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.

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 yêu cầu

Để xem tải trọng của yêu cầu, tức là các thông 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, DevTools hiển thị tải trọng ở dạng dễ đọc.

Để xem nguồn của các thông 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 Thông 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 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á.

Xem cookie

Cách 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.

Để 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 bài viết Xem, chỉnh sửa và xoá cookie.

Xem bảng chi tiết về thời gian của một 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.

Hãy xem phần Xem trước bảng 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 trong bảng chi tiết về 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 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 qua mục yêu cầu đó trong cột Waterfall (Dòng thác) của bảng Yêu cầu.

Hãy xem phần Xem bảng 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 trong bảng chi tiết về thời gian

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

• Thêm vào danh sách chờ. 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.
  • Giới hạn là 6 kết nối TCP đang mở cho nguồn gốc này. Chỉ áp dụng cho HTTP/1.0 và HTTP/1.1.
  • Trình duyệt đang phân bổ không gian trong bộ nhớ đệm ổ đĩa trong thời gian ngắn.
• Bị gián đoạn. 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 cả bắt tay TCP hoặc thử lại và đàm phán SSL.
• Thương lượng proxy. Trình duyệt đang đàm phán 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 worker dịch vụ.
• Yêu cầu gửi đến ServiceWorker. Yêu cầu đang được gửi đến worker dịch vụ.
• Đang đợi (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 To First Byte (Thời gian cho byte đầu tiên). Thời gian này bao gồm 1 lượt truyền dữ liệu qua lạ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 được 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. 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 một 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. 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.

Khi bảng 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 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 ở phía trên, thì yêu cầu cao hơn đó là trình khởi tạo của trình khởi tạo. Và tương tự như vậy.

Xem sự kiện tải

DevTools 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 Network (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.

Xem tổng kích thước của các tài nguyên đã 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 truyền và tải (không nén) trên thanh trạng thái ở cuối bảng điều khiển Mạng.

Hãy 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.

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

Khi một câu lệnh JavaScript yêu cầu một tài nguyên, 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 không nén của tài nguyên

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

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ả ở phần 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 trường cụ thể.

Để giảm nguy cơ rò rỉ thông tin nhạy cảm do nhầm lẫn, theo mặc định, bạn có thể xuất nhật ký mạng "đã dọn dẹp" ở định dạng HAR, loại trừ 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ùng dữ liệu nhạy cảm.

Để lưu tất cả cá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 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).

  

• Nhấp vào tải xuống Export HAR (sanitized)... (Xuất 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 có dữ liệu nhạy cảm), sau đó nhấp và giữ nút download Export (tải xuống) rồi chọn Export HAR (with sensitive data) (Xuất HAR (có dữ liệu nhạy cảm)).

  

Sau khi có tệp HAR, bạn có thể nhập tệp đó trở lại DevTools để 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 Tải lên Nhập tệp HAR trong thanh thao tác ở đầu bảng 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ả 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 qua 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 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 HAR (đã dọn dẹp). Sao chép tất cả yêu cầu dưới dạng dữ liệu HAR 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ướ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 dưới dạng dữ liệu HAR có dữ liệu nhạy cảm.

Để 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ả 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ả đượ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ả 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 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ả 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ả các yêu cầu đã lọc dưới dạng dữ liệu HAR không có dữ liệu nhạy cảm như tiêu đề Cookie, Set-Cookie và Authorization.
• Sao chép tất cả được liệt kê dưới dạng HAR (với 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ó 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 phần của giao diện người dùng 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, Công cụ dành 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 filter_alt Bộ lọc để ẩn bộ lọc.

Sử 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ó thêm khoảng trắng 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 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à 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 kênh Tổng quan

Theo mặc định, Công cụ dành cho nhà phát triển sẽ hiển thị kênh Tổng quan. Mở phần 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.