Kiểm tra hoạt động mạng

Kayce Basques

Đây là hướng dẫn trực tiếp về một số tính năng thường dùng nhất của Công cụ cho nhà phát triển liên quan đến việc kiểm tra hoạt động mạng của một trang.

Hãy xem Tham chiếu mạng nếu bạn muốn duyệt qua các tính năng.

Hãy đọc tiếp hoặc xem phiên bản video của hướng dẫn này:

Trường hợp sử dụng bảng điều khiển Mạng

Nhìn chung, hãy sử dụng bảng điều khiển Mạng khi bạn cần đảm bảo rằng tài nguyên đang được tải xuống hoặc tải lên như dự kiến. Các trường hợp sử dụng phổ biến nhất cho bảng điều khiển Mạng là:

  • Đảm bảo rằng các tài nguyên thực sự đang được tải lên hoặc tải xuống.
  • Kiểm tra thuộc tính của từng tài nguyên, chẳng hạn như tiêu đề HTTP, nội dung, kích thước, v.v.

Nếu bạn đang tìm cách cải thiện hiệu suất tải trang, đừng bắt đầu bằng bảng điều khiển Mạng. Có nhiều loại vấn đề về hiệu suất tải không liên quan đến hoạt động mạng. Hãy bắt đầu với bảng điều khiển Lighthouse vì bảng này đưa ra các đề xuất phù hợp về cách cải thiện trang của bạn. Hãy xem phần Tối ưu hoá tốc độ trang web.

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

Để khai thác tối đa hướng dẫn này, hãy mở bản minh hoạ và thử các tính năng trên trang minh hoạ.

  1. Mở Bản minh hoạ về cách bắt đầu.

    Trang web minh hoạ.

    Bạn nên di chuyển bản minh hoạ sang một cửa sổ riêng.

    Bản minh hoạ trong một cửa sổ và hướng dẫn này trong một cửa sổ khác.

  2. Mở DevTools bằng cách nhấn tổ hợp phím Control+Shift+J hoặc Command+Option+J (Mac). Bảng điều khiển Console (Bảng điều khiển) sẽ mở ra.

    Bảng điều khiển trong Devtools.

    Bạn nên đóng Công cụ dành cho nhà phát triển vào cuối cửa sổ.

    Công cụ cho nhà phát triển được gắn vào cuối cửa sổ.

  3. Nhấp vào thẻ Mạng. Bảng điều khiển Network (Mạng) sẽ mở ra.

    Bảng điều khiển Mạng của Devtools được gắn vào cuối cửa sổ.

Hiện tại, bảng điều khiển Network (Mạng) đang trống. Đó là vì DevTools chỉ ghi lại hoạt động mạng khi đang mở và không có hoạt động mạng nào xảy ra kể từ khi bạn mở DevTools.

Ghi nhật ký hoạt động mạng

Cách xem hoạt động mạng mà một trang gây ra:

  1. Tải lại trang. Bảng điều khiển Mạng ghi lại tất cả hoạt động mạng trong Nhật ký mạng.

    Nhật ký mạng có 5 yêu cầu.

    Mỗi hàng của Nhật ký mạng đại diện cho một tài nguyên. Theo mặc định, các tài nguyên được liệt kê theo thứ tự thời gian. Tài nguyên trên cùng thường là tài liệu HTML chính. Tài nguyên dưới cùng là bất kỳ tài nguyên nào được yêu cầu gần đây nhất.

    Mỗi cột biểu thị thông tin về một tài nguyên. Các cột mặc định là:

    • Trạng thái: Mã phản hồi HTTP.
    • Loại: Loại tài nguyên.
    • Trình khởi tạo: Nguyên nhân khiến tài nguyên được yêu cầu. Khi nhấp vào một đường liên kết trong cột Trình khởi tạo, bạn sẽ được chuyển đến mã nguồn đã gây ra yêu cầu.
    • Kích thước: Số lượng tài nguyên được chuyển qua mạng.
    • Thời gian: Thời gian thực hiện yêu cầu.

  2. Miễn là bạn mở DevTools, công cụ này sẽ ghi lại hoạt động mạng trong Nhật ký mạng. Để minh hoạ điều này, trước tiên, hãy xem phần cuối của Nhật ký mạng và ghi lại hoạt động gần đây nhất.

  3. Bây giờ, hãy nhấp vào nút Get Data (Nhận dữ liệu) trong bản minh hoạ.

  4. Xem lại phần dưới cùng của Nhật ký mạng. Có một tài nguyên mới tên là getstarted.json. Thao tác nhấp vào nút Lấy dữ liệu khiến trang yêu cầu tệp này.

    Một tài nguyên mới trong Nhật ký mạng.

Hiện thêm thông tin

Bạn có thể định cấu hình các cột của Nhật ký mạng. Bạn có thể ẩn những cột mà bạn không sử dụng. Ngoài ra, có nhiều cột bị ẩn theo mặc định mà bạn có thể thấy hữu ích.

  1. Nhấp chuột phải vào tiêu đề của bảng Nhật ký mạng rồi chọn Miền. Miền của từng tài nguyên hiện đã hiển thị.

    Bật cột Miền.

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

Kết nối mạng của máy tính mà bạn sử dụng để xây dựng trang web có thể nhanh hơn kết nối mạng trên thiết bị di động của người dùng. Bằng cách điều tiết trang, bạn có thể hiểu rõ hơn về thời gian tải trang trên thiết bị di động.

  1. Nhấp vào trình đơn thả xuống Giới hạn. Theo mặc định, trình đơn này được đặt thành Không giới hạn.

    Trình đơn thả xuống điều tiết trong bảng điều khiển Mạng.

  2. Chọn 3G.

    Chọn 3G trong bảng điều khiển Mạng.

  3. Nhấn và giữ Tải lại , sau đó chọn Empty Cache And Hard Reload (Rỗng bộ nhớ đệm và tải lại hoàn toàn).

    Xoá bộ nhớ đệm và tải lại hoàn toàn.

    Trong các lần truy cập lặp lại, trình duyệt thường phân phát một số tệp từ bộ nhớ đệm, giúp tăng tốc độ tải trang. Empty Cache And Hard Reload (Xoá bộ nhớ đệm và tải lại hoàn toàn) buộc trình duyệt truy cập vào mạng cho tất cả tài nguyên. Điều này rất hữu ích khi bạn muốn xem trải nghiệm tải trang của khách truy cập lần đầu.

Chụp ảnh màn hình

Ảnh chụp màn hình ghi lại giao diện của trang tại nhiều thời điểm trong khi tải và báo cáo những tài nguyên được tải tại mỗi khoảng thời gian.

Để chụp ảnh màn hình, hãy làm theo các bước sau:

  1. Nhấp vào phần Cài đặt .

  2. Bật hộp đánh dấu Ảnh chụp màn hình.

  3. Tải lại trang bằng quy trình Rỗng bộ nhớ đệm và tải lại toàn bộ dữ liệu của trang. Hãy xem phần Mô phỏng kết nối chậm hơn nếu bạn cần lời nhắc về cách thực hiện việc này. Thẻ Ảnh chụp màn hình cung cấp ảnh thu nhỏ về giao diện của trang tại nhiều thời điểm trong quá trình tải.

    Ảnh chụp màn hình quá trình tải trang trong bảng điều khiển Mạng.

  4. Nhấp vào hình thu nhỏ đầu tiên. DevTools cho bạn biết hoạt động mạng nào đang diễn ra tại thời điểm đó.

    Hoạt động mạng đang diễn ra trong ảnh chụp màn hình đầu tiên.

  5. Chuyển đổi hộp kiểm Ảnh chụp màn hình để đóng tab Ảnh chụp màn hình.

  6. Tải lại trang.

Kiểm tra thông tin chi tiết của tài nguyên

Nhấp vào một tài nguyên để tìm hiểu thêm thông tin về tài nguyên đó. Hãy thử ngay:

  1. Nhấp vào getstarted.html. Thẻ Tiêu đề sẽ xuất hiện. Sử dụng thẻ này để kiểm tra tiêu đề HTTP.

    Thẻ Tiêu đề trong bảng điều khiển Mạng.

  2. Nhấp vào thẻ Xem trước để xem giao diện hiển thị HTML cơ bản.

    Thẻ Xem trước trong bảng điều khiển Mạng.

    Thẻ này hữu ích khi một API trả về mã lỗi trong HTML và bạn dễ đọc HTML đã kết xuất hơn mã nguồn HTML hoặc khi kiểm tra hình ảnh.

  3. Nhấp vào thẻ Phản hồi để xem mã nguồn HTML.

    Thẻ Phản hồi trong bảng điều khiển Mạng.

  4. Nhấp vào thẻ Trình khởi tạo để xem cây ánh xạ chuỗi trình khởi tạo yêu cầu.

    Thẻ Trình khởi tạo trong bảng điều khiển Mạng.

  5. Nhấp vào thẻ Timing (Thời gian) để xem thông tin chi tiết về hoạt động mạng của tài nguyên này.

    Thẻ Thời gian trong bảng điều khiển Mạng.

  6. Nhấp vào Đóng để xem lại Nhật ký mạng.

    Nút Đóng cho thẻ thông tin chi tiết.

Sử dụng thẻ Tìm kiếm khi bạn cần tìm kiếm tiêu đề HTTP và phản hồi của tất cả tài nguyên cho một chuỗi hoặc biểu thức chính quy nhất định.

Ví dụ: giả sử bạn muốn kiểm tra xem tài nguyên của mình có đang sử dụng chính sách bộ nhớ đệm hợp lý hay không.

  1. Nhấp vào Tìm kiếm . Thẻ Search (Tìm kiếm) sẽ mở ra ở bên trái Network log (Nhật ký mạng).

    Thẻ Tìm kiếm ở bên trái Nhật ký mạng.

  2. Nhập Cache-Control rồi nhấn Enter. Thẻ Search (Tìm kiếm) liệt kê tất cả các thực thể của Cache-Control mà trình tìm kiếm tìm thấy trong tiêu đề hoặc nội dung tài nguyên.

    Kết quả tìm kiếm cho Cache-Control.

  3. Nhấp vào một kết quả để xem. Nếu tìm thấy truy vấn trong tiêu đề, thẻ Tiêu đề sẽ mở ra. Nếu tìm thấy truy vấn trong nội dung, thẻ Phản hồi sẽ mở ra.

    Một kết quả tìm kiếm được làm nổi bật trong thẻ Tiêu đề.

  4. Đóng thẻ Tìm kiếm và thẻ Tiêu đề.

    Nút Đóng.

Lọc tài nguyên

Công cụ cho nhà phát triển cung cấp nhiều quy trình công việc để lọc ra những tài nguyên không liên quan đến tác vụ đang thực hiện.

Thanh công cụ Bộ lọc.

Theo mặc định, thanh công cụ Filters (Bộ lọc) sẽ được bật. Nếu không:

  1. Nhấp vào biểu tượng Bộ lọc để hiển thị biểu tượng này.

Lọc theo chuỗi, biểu thức chính quy hoặc thuộc tính

Hộp nhập dữ liệu Bộ lọc hỗ trợ nhiều kiểu lọc khác nhau.

  1. Nhập png vào hộp nhập dữ liệu Filter (Bộ lọc). Chỉ những tệp chứa văn bản png mới xuất hiện. Trong trường hợp này, chỉ có hình ảnh PNG là phù hợp với bộ lọc.

    Kết quả lọc chuỗi trong nhật ký mạng.

  2. Nhập /.*\.[cj]s+$/. Công cụ phát triển lọc ra mọi tài nguyên có tên tệp không kết thúc bằng j hoặc c, theo sau là 1 hoặc nhiều ký tự s.

    Kết quả của bộ lọc biểu thức chính quy trong Nhật ký mạng.

  3. Nhập -main.css. Công cụ cho nhà phát triển sẽ lọc ra main.css. Nếu có tệp nào khác khớp với mẫu, thì tệp đó cũng sẽ bị lọc ra.

    Kết quả lọc tiêu cực trong nhật ký Mạng.

  4. Nhập domain:raw.githubusercontent.com vào hộp văn bản Lọc. Công cụ cho nhà phát triển sẽ lọc ra mọi tài nguyên có URL không khớp với miền này.

    Kết quả lọc tài sản trong Nhật ký mạng.

    Hãy xem bài viết Lọc yêu cầu theo tài sản để biết danh sách đầy đủ các tài sản có thể lọc.

  5. Xoá hộp nhập Bộ lọc của văn bản bất kỳ.

Lọc theo loại tài nguyên

Cách tập trung vào một loại tệp nhất định, chẳng hạn như các tệp kiểu:

  1. Nhấp vào CSS. Tất cả các loại tệp khác sẽ bị lọc ra.

    Bảng điều khiển mạng chỉ hiển thị các tệp CSS.

  2. Để xem cả tập lệnh, hãy giữ phím Control hoặc Command (Mac), sau đó nhấp vào JS.

    Bảng điều khiển Mạng chỉ hiển thị các tệp CSS và JS.

  3. Nhấp vào Tất cả để xoá bộ lọc và xem lại tất cả tài nguyên.

Hãy xem phần Lọc yêu cầu để biết các quy trình lọc khác.

Chặn yêu cầu

Trang sẽ trông như thế nào và hoạt động ra sao khi một số tài nguyên của trang không có sẵn? Liệu ứng dụng có hoàn toàn không hoạt động hay vẫn có chức năng nào đó? Chặn yêu cầu tìm hiểu:

  1. Nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (Mac) để mở Command Menu (Trình đơn lệnh).

    Trình đơn lệnh trong bảng điều khiển Mạng.

  2. Nhập block, chọn Hiển thị tính năng Chặn yêu cầu rồi nhấn Enter.

    Tuỳ chọn "Hiện tính năng Chặn yêu cầu".

  3. Nhấp vào nút Thêm mẫu.

  4. Nhập main.css.

    Chặn main.css trong bảng điều khiển Mạng

  5. Nhấp vào Thêm.

  6. Tải lại trang. Đúng như dự kiến, kiểu của trang sẽ hơi lộn xộn vì bảng định kiểu chính của trang đã bị chặn. Lưu ý hàng main.css trong Nhật ký mạng. Văn bản màu đỏ có nghĩa là tài nguyên bị chặn.

    main.css đã bị chặn.

  7. Bỏ đánh dấu hộp Bật tính năng chặn yêu cầu.

Để khám phá thêm các tính năng của DevTools liên quan đến việc kiểm tra hoạt động mạng, hãy xem Tài liệu tham khảo về mạng.