Gỡ lỗi các quy tắc suy đoán bằng Công cụ của Chrome cho nhà phát triển

Bạn có thể sử dụng quy tắc suy đoán để tìm nạp trước và kết xuất trước các lần điều hướng trang tiếp theo như đã nêu chi tiết trong bài đăng trước. Điều này có thể cho phép tải trang nhanh hơn nhiều (hoặc thậm chí là tức thì), giúp cải thiện đáng kể Chỉ số quan trọng chính của trang web cho những thao tác điều hướng trang bổ sung này.

Việc gỡ lỗi các quy tắc suy đoán có thể phức tạp. Điều này đặc biệt đúng với các trang được kết xuất trước, vì những trang này được hiển thị trong một trình kết xuất riêng biệt – giống như một thẻ nền ẩn sẽ thay thế thẻ hiện tại khi được kích hoạt. Do đó, không phải lúc nào bạn cũng sử dụng các tuỳ chọn thông thường của Công cụ cho nhà phát triển để gỡ lỗi sự cố.

Nhóm Chrome đã và đang nỗ lực làm việc để tăng cường hỗ trợ Công cụ cho nhà phát triển đối với việc gỡ lỗi theo quy tắc suy đoán. Trong bài đăng này, bạn sẽ tìm hiểu tất cả các cách sử dụng các công cụ này để hiểu các quy tắc suy đoán của một trang, lý do tại sao chúng có thể không hoạt động và thời điểm nhà phát triển có thể sử dụng các tuỳ chọn quen thuộc hơn trong Công cụ cho nhà phát triển (và khi nào thì không).

Giải thích về trạng thái "trước" điều khoản

Có rất nhiều cụm từ "trước" gây nhầm lẫn, do đó, chúng tôi sẽ bắt đầu bằng việc giải thích những điều sau:

  • Tìm nạp trước: tìm nạp trước tài nguyên hoặc tài liệu để cải thiện hiệu suất trong tương lai. Bài đăng này đề cập đến việc tìm nạp trước các tài liệu bằng API Quy tắc suy đoán thay vì tuỳ chọn <link rel="prefetch"> tương tự nhưng cũ hơn thường dùng để tìm nạp trước các tài nguyên phụ.
  • Kết xuất trước: đây là một bước tiến xa hơn việc tìm nạp trước và thực sự hiển thị toàn bộ trang như thể người dùng đã điều hướng đến trang này, nhưng giữ trang này trong quy trình kết xuất đồ hoạ nền ẩn sẵn sàng để sử dụng nếu người dùng thực sự chuyển đến đó. Xin nhắc lại rằng tài liệu này liên quan đến phiên bản API Quy tắc suy đoán mới hơn của phiên bản này, thay vì tuỳ chọn <link rel="prerender"> cũ (không còn thực hiện quá trình kết xuất trước đầy đủ).
  • Thông tin suy đoán điều hướng: thuật ngữ chung cho các tuỳ chọn tìm nạp trước và kết xuất trước mới được kích hoạt bằng các quy tắc suy đoán.
  • Tải trước: thuật ngữ quá tải có thể đề cập đến một số công nghệ và quy trình bao gồm <link rel="preload">, trình quét tải trướctải trước điều hướng trình chạy dịch vụ. Những mục này sẽ không được đề cập ở đây, nhưng thuật ngữ này được đưa vào để phân biệt rõ ràng các mục đó với "các suy đoán điều hướng" cụm từ tìm kiếm.

Quy tắc suy đoán cho prefetch

Bạn có thể dùng quy tắc suy đoán để tìm nạp trước tài liệu của thao tác điều hướng tiếp theo. Ví dụ: khi chèn JSON sau đây vào một trang, next.htmlnext2.html sẽ được tìm nạp trước:

<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

Việc sử dụng các quy tắc suy đoán cho việc tìm nạp trước điều hướng có một số ưu điểm so với cú pháp <link rel="prefetch"> cũ, chẳng hạn như API có tính biểu đạt hơn và kết quả được lưu trữ trong bộ nhớ đệm của bộ nhớ thay vì bộ nhớ đệm của ổ đĩa HTTP.

Gỡ lỗi quy tắc suy đoán prefetch

Bạn có thể xem quá trình tìm nạp trước do các quy tắc suy đoán kích hoạt trong bảng điều khiển Mạng theo cách tương tự như các lần tìm nạp khác:

Bảng điều khiển mạng trong Công cụ của Chrome cho nhà phát triển hiển thị các tài liệu đã tìm nạp trước
Bảng điều khiển mạng trong Công cụ của Chrome cho nhà phát triển hiển thị các tài liệu đã tìm nạp trước

Hai yêu cầu được đánh dấu màu đỏ là các tài nguyên được tìm nạp trước và có thể được nhìn thấy qua cột Type (Loại). Những trang này được tìm nạp ở mức độ ưu tiên Lowest vì chúng dành cho các thao tác sau này và Chrome sẽ ưu tiên tài nguyên của trang hiện tại.

Thao tác nhấp vào một trong các hàng cũng sẽ hiển thị tiêu đề HTTP Sec-Purpose: prefetch, đây là cách xác định những yêu cầu này ở phía máy chủ:

Tiêu đề tìm nạp trước của Công cụ cho nhà phát triển của Chrome có Sec-Purpose được đặt thành tìm nạp trước
Tiêu đề tìm nạp trước của Công cụ cho nhà phát triển của Chrome có chế độ Sec-Purpose được đặt thành tìm nạp trước

Gỡ lỗi prefetch bằng các thẻ Tải theo suy đoán

Chúng tôi đã thêm một mục mới có tên là Tải theo suy đoán vào bảng điều khiển Ứng dụng của Chrome Công cụ cho nhà phát triển, trong mục Dịch vụ nền, để hỗ trợ các quy tắc suy đoán gỡ lỗi:

Các thẻ Tải theo suy đoán của Công cụ cho nhà phát triển của Chrome cho thấy quy tắc tìm nạp trước
Các thẻ Tải theo suy đoán của Công cụ cho nhà phát triển của Chrome hiển thị quy tắc tìm nạp trước

Có ba thẻ trong phần này:

  • Tải suy đoán liệt kê trạng thái được kết xuất trước của trang hiện tại.
  • Quy tắc liệt kê tất cả các bộ quy tắc có trên trang hiện tại.
  • Thông tin suy đoán liệt kê tất cả URL được tìm nạp trước và kết xuất trước từ các bộ quy tắc.

Thẻ Suy đoán được hiển thị trong ảnh chụp màn hình trước và chúng ta có thể thấy trang ví dụ này có một bộ quy tắc suy đoán duy nhất để tìm nạp trước 3 trang. Hai trong số những lần tìm nạp trước đó đã thành công và một lần không thành công. Bên cạnh Bộ quy tắc, bạn có thể nhấp vào biểu tượng để đưa bạn đến nguồn của bộ quy tắc trong bảng điều khiển Phần tử. Ngoài ra, bạn có thể nhấp vào đường liên kết Trạng thái để chuyển đến thẻ Dự đoán đã lọc theo bộ quy tắc đó.

Thẻ Suy đoán liệt kê tất cả URL mục tiêu, cùng với hành động (tìm nạp trước hoặc kết xuất trước), bắt nguồn của tập hợp quy tắc nào (vì có thể có nhiều URL trên một trang) và trạng thái của từng suy đoán:

Thẻ Suy đoán của Công cụ cho nhà phát triển của Chrome cho thấy các URL được tìm nạp trước cùng trạng thái của các URL đó
Thẻ Dự đoán của Công cụ cho nhà phát triển của Chrome hiển thị các URL được tìm nạp trước cùng với trạng thái của chúng

Phía trên URL, bạn có thể sử dụng trình đơn thả xuống để hiển thị URL từ tất cả các bộ quy tắc hoặc chỉ các URL từ bộ quy tắc cụ thể. Bên dưới phần đó, tất cả URL đều được liệt kê. Khi nhấp vào một URL, bạn sẽ thấy thông tin chi tiết hơn.

Trong ảnh chụp màn hình này, chúng ta có thể thấy lý do trang next3.html không tồn tại (không tồn tại và do đó trả về mã 404 – mã trạng thái HTTP không phải 2xx).

Thẻ tóm tắt, Tải theo suy đoán, hiển thị báo cáo Trạng thái tải theo suy đoán cho trang này để cho biết liệu có sử dụng quá trình tìm nạp trước hoặc kết xuất trước cho trang này hay không.

Đối với trang được tìm nạp trước, bạn sẽ thấy một thông báo thành công khi trang đó được điều hướng tới:

Thẻ Tải theo suy đoán của Công cụ cho nhà phát triển của Chrome cho thấy quá trình tìm nạp trước thành công
Thẻ Tải theo suy đoán của Công cụ cho nhà phát triển của Chrome hiển thị quá trình tìm nạp trước thành công

Những suy đoán chưa thể hiện được

Khi quá trình điều hướng xảy ra trên một trang có các quy tắc suy đoán không dẫn đến việc sử dụng quá trình tìm nạp trước hoặc kết xuất trước, một phần bổ sung của thẻ sẽ hiển thị thêm thông tin chi tiết về lý do URL không khớp với bất kỳ URL suy đoán nào. Điều này rất hữu ích để phát hiện lỗi chính tả trong quy tắc suy đoán của bạn.

Thẻ Tải theo suy đoán của Công cụ cho nhà phát triển của Chrome, cho biết URL hiện tại không khớp với URL nào trong các quy tắc suy đoán của trang trước
Các URL không khớp được làm nổi bật trong Công cụ cho nhà phát triển

Ví dụ: ở đây, chúng ta đã chuyển đến next4.html, nhưng chỉ có next.html, next2.html hoặc next3.html là giá trị tìm nạp trước. Vì vậy, chúng ta có thể thấy quy tắc này không khớp với bất kỳ quy tắc nào trong 3 quy tắc đó.

Các thẻ Tải theo suy đoán rất hữu ích trong việc tự gỡ lỗi các quy tắc suy đoán và tìm mọi lỗi cú pháp trong tệp JSON.

Đối với các lượt tìm nạp trước, bảng điều khiển Network (Mạng) có thể là nơi quen thuộc hơn. Để xem ví dụ về lỗi tìm nạp trước không thành công, bạn có thể thấy mã 404 cho quá trình tìm nạp trước tại đây:

Bảng điều khiển mạng Công cụ của Chrome cho nhà phát triển hiển thị quá trình tìm nạp trước không thành công
Bảng điều khiển mạng Công cụ của Chrome cho nhà phát triển hiển thị quá trình tìm nạp trước không thành công

Tuy nhiên, các thẻ Tải theo suy đoán trở nên hữu ích hơn nhiều đối với các quy tắc suy đoán kết xuất trước. Các quy tắc này sẽ được đề cập trong phần tiếp theo.

Quy tắc suy đoán cho prerender

Các quy tắc suy đoán kết xuất trước tuân theo cú pháp giống như quy tắc suy đoán tìm nạp trước. Ví dụ:

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

Bộ quy tắc này kích hoạt quá trình tải đầy đủ và hiển thị các trang được chỉ định (tuân theo một số hạn chế nhất định). Điều này có thể mang lại trải nghiệm tải tức thì – mặc dù sẽ tốn thêm chi phí tài nguyên.

Tuy nhiên, không giống như tìm nạp trước, bạn không thể nhìn thấy những lượt tìm nạp trước này trong bảng điều khiển Network (Mạng), vì những lượt tìm nạp này được tìm nạp và kết xuất trong một quy trình kết xuất riêng trên Chrome. Điều này khiến các thẻ Tải theo suy đoán trở nên quan trọng hơn để gỡ lỗi các quy tắc suy đoán kết xuất trước.

Gỡ lỗi prerender bằng các thẻ Tải theo suy đoán

Bạn có thể sử dụng cùng các màn hình Tải theo suy đoán cho các quy tắc suy đoán kết xuất trước như được minh hoạ trên trang minh hoạ tương tự khi cố gắng kết xuất trước thay vì tìm nạp trước 3 trang:

Tính năng Suy đoán của Chrome Công cụ cho nhà phát triển tải các thẻ cho một trang có các quy tắc suy đoán kết xuất trước
Công cụ suy đoán của Chrome cho nhà phát triển tải các thẻ cho một trang có các quy tắc suy đoán kết xuất trước

Ở đây, chúng ta thấy rằng một trong ba URL không thể kết xuất trước và nhà phát triển có thể lấy thông tin chi tiết về từng URL trong thẻ Suy đoán bằng cách nhấp vào liên kết 2 Sẵn sàng, 1 Không thành công.

Trong Chrome 121, chúng tôi đã ra mắt tính năng hỗ trợ các quy tắc trong tài liệu. Cách này cho phép trình duyệt chọn những đường liên kết này từ cùng một đường liên kết gốc trên trang, thay vì liệt kê một tập hợp URL cụ thể:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": { "href_matches": "/not-safe-to-prerender/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Ví dụ này chọn tất cả các đường liên kết gốc giống nhau, ngoại trừ những đường liên kết bắt đầu bằng /not-safe-to-prerender là đề xuất kết xuất trước.

Thao tác này cũng đặt quá trình kết xuất trước eagerness thành moderate, có nghĩa là các mục điều hướng được kết xuất trước khi di chuột hoặc nhấp vào đường liên kết.

Có các quy tắc tương tự như thế này trên trang web minh hoạ về các quy tắc suy đoán. Việc sử dụng phần Tải theo suy đoán (mới) trên trang web này cho thấy tính hữu ích của thẻ mới này vì tất cả URL đủ điều kiện mà trình duyệt tìm thấy trên trang đều có trong danh sách:

Thẻ Suy đoán của Công cụ cho nhà phát triển của Chrome có một số URL chưa được kích hoạt
Thẻ Nội dung suy đoán của Công cụ của Chrome cho nhà phát triển có một số URL chưa được kích hoạt

Trạng tháiChưa được kích hoạt vì quá trình kết xuất trước cho những nội dung này chưa bắt đầu. Tuy nhiên, khi giữ con trỏ trên các đường liên kết, chúng ta thấy trạng thái thay đổi khi từng URL được kết xuất trước:

Thẻ Suy đoán của Công cụ cho nhà phát triển của Chrome với các trang được kết xuất trước đã kích hoạt
Thẻ Suy đoán của Công cụ cho nhà phát triển của Chrome với các trang được kết xuất trước đã kích hoạt

Chrome đã đặt giới hạn về số lượt kết xuất trước, trong đó có tối đa 2 lượt kết xuất trước đối với mức độ mong muốn moderate. Vì vậy, sau khi di chuột qua đường liên kết thứ 3, chúng tôi sẽ thấy nguyên nhân không thực hiện được của URL đó:

Thẻ Suy đoán của Công cụ cho nhà phát triển Chrome có nội dung tải trước không thành công đang hiển thị
Thẻ Nội dung suy đoán của Công cụ cho nhà phát triển của Chrome có các lượt tải trước không thành công đang hiển thị

Gỡ lỗi prerender bằng các bảng điều khiển khác trong Công cụ cho nhà phát triển

Không giống như các lượt tìm nạp trước, các trang đã được kết xuất trước sẽ không xuất hiện trong quy trình kết xuất hiện tại trong các bảng điều khiển của Công cụ cho nhà phát triển (như bảng điều khiển Mạng) vì các trang này được kết xuất trong trình kết xuất hậu trường của chính chúng.

Tuy nhiên, bạn hiện có thể chuyển đổi trình kết xuất mà bảng điều khiển Công cụ cho nhà phát triển sử dụng bằng trình đơn thả xuống ở trên cùng bên phải hoặc bằng cách chọn một URL ở phần trên cùng của bảng điều khiển rồi chọn Kiểm tra:

Công cụ của Chrome cho nhà phát triển hiện cho phép bạn chuyển đổi trình kết xuất đồ hoạ mà thông tin được hiển thị
Công cụ của Chrome cho nhà phát triển hiện cho phép bạn chuyển đổi trình kết xuất hiển thị thông tin

Trình đơn thả xuống này (và giá trị đã chọn) cũng được chia sẻ trên tất cả các bảng điều khiển khác, chẳng hạn như bảng điều khiển Network (Mạng), nơi bạn có thể thấy trang đang được yêu cầu là trang được kết xuất trước:

Bảng điều khiển Mạng Chrome Công cụ cho nhà phát triển hiển thị các yêu cầu mạng cho trang được kết xuất trước
Bảng điều khiển Mạng của Chrome cho nhà phát triển hiển thị các yêu cầu mạng cho trang được kết xuất trước

Nhìn vào tiêu đề HTTP của những tài nguyên này, chúng ta có thể thấy tất cả tiêu đề đều được thiết lập bằng tiêu đề Sec-Purpose: prefetch;prerender:

Bảng điều khiển Mạng của Công cụ của Chrome cho nhà phát triển hiển thị tiêu đề Mục đích thứ nhất cho một trang được kết xuất trước
Bảng điều khiển Mạng của Công cụ của Chrome cho nhà phát triển hiển thị tiêu đề Mục đích thứ nhất cho một trang được kết xuất trước

Hoặc bảng điều khiển Elements, nơi bạn có thể xem nội dung trang, như trong ảnh chụp màn hình dưới đây, nơi chúng ta thấy phần tử <h1> dành cho trang được kết xuất trước:

Bảng điều khiển Phần tử của Công cụ cho nhà phát triển của Chrome cho trang được kết xuất trước
Bảng điều khiển Phần tử của Công cụ cho nhà phát triển của Chrome cho trang được kết xuất trước

Hoặc bảng điều khiển, nơi bạn có thể thấy nhật ký bảng điều khiển do trang được kết xuất trước tạo ra:

Bảng điều khiển của Bảng điều khiển Công cụ của Chrome cho nhà phát triển hiển thị kết quả của bảng điều khiển từ một trang được kết xuất trước
Bảng điều khiển Công cụ của Chrome cho nhà phát triển hiển thị kết quả của bảng điều khiển từ một trang được kết xuất trước

Gỡ lỗi các quy tắc suy đoán trên trang được kết xuất trước

Các phần trước thảo luận về cách gỡ lỗi các trang được kết xuất trước trên trang bắt đầu quá trình kết xuất trước. Tuy nhiên, các trang được kết xuất trước cũng có thể cung cấp thông tin gỡ lỗi bằng cách thực hiện lệnh gọi phân tích hoặc ghi nhật ký vào bảng điều khiển (có thể xem như được mô tả trong phần trước).

Ngoài ra, sau khi người dùng kích hoạt trang được kết xuất trước, thẻ Tải theo suy đoán sẽ hiển thị trạng thái này, cũng như trạng thái đó có được kết xuất trước thành công hay không. Nếu không thể kết xuất trước, hãy cung cấp nội dung giải thích lý do dẫn đến trường hợp này:

Thẻ Tải theo suy đoán của Công cụ cho nhà phát triển của Chrome cho thấy cả trang kết xuất trước thành công và không thành công
Thẻ Tải theo suy đoán của Công cụ cho nhà phát triển của Chrome hiển thị cả trang được kết xuất trước thành công và không thành công

Ngoài ra, trong trường hợp tìm nạp trước, khi bạn điều hướng từ một trang có quy tắc suy đoán không khớp với trang hiện tại, hệ thống sẽ tìm cách cho bạn biết lý do tại sao các URL đó không khớp với các URL được đề cập trong quy tắc suy đoán của trang trước trong thẻ Tải theo suy đoán:

Thẻ Tải theo suy đoán của Công cụ cho nhà phát triển của Chrome cho thấy URL hiện tại không khớp với URL hiện tại và những URL có trên trang trước
Công cụ của Chrome cho thấy những URL không khớp

Kết luận

Trong bài đăng này, chúng tôi đã chỉ ra nhiều cách mà nhà phát triển có thể gỡ lỗi quy tắc suy đoán tìm nạp trước và kết xuất trước. Nhóm đang tiếp tục nỗ lực xây dựng công cụ cho các quy tắc suy đoán và chúng tôi muốn nghe đề xuất của nhà phát triển về những cách khác có thể hữu ích để gỡ lỗi API mới thú vị này. Các nhà phát triển nên báo cáo vấn đề trên Công cụ theo dõi lỗi của Chrome nếu phát hiện thấy lỗi hoặc yêu cầu về tính năng.

Xác nhận

Hình ảnh Thumbail của Nubelson Fernandes trên Unsplash.