แก้ไขข้อบกพร่องของกฎการคาดเดาด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

Barry Pollard

คุณสามารถใช้กฎการคาดเดาเพื่อดึงข้อมูลล่วงหน้าและแสดงผลล่วงหน้าการนำทางหน้าเว็บถัดไปตามที่อธิบายไว้ในโพสต์ก่อนหน้า ซึ่งจะช่วยให้การโหลดหน้าเว็บเร็วขึ้นมากหรือโหลดได้ทันที ซึ่งจะช่วยปรับปรุง Core Web Vitals สำหรับการนำทางหน้าเว็บเพิ่มเติมเหล่านี้ได้อย่างมาก

การแก้ไขข้อบกพร่องของกฎการคาดเดาอาจเป็นเรื่องที่ซับซ้อน โดยเฉพาะอย่างยิ่งสำหรับหน้าที่แสดงผลล่วงหน้า เนื่องจากหน้าเหล่านี้แสดงผลในโปรแกรมแสดงผลแยกต่างหาก ซึ่งคล้ายกับแท็บเบื้องหลังที่ซ่อนอยู่ซึ่งจะแทนที่แท็บปัจจุบันเมื่อเปิดใช้งาน ดังนั้น คุณจึงไม่สามารถใช้ตัวเลือกเครื่องมือสำหรับนักพัฒนาเว็บตามปกติเพื่อแก้ไขข้อบกพร่องได้เสมอไป

ทีม Chrome ได้ทำงานอย่างหนักเพื่อปรับปรุงการรองรับเครื่องมือสำหรับนักพัฒนาเว็บสำหรับการแก้ไขข้อบกพร่องของกฎการคาดเดา ในโพสต์นี้ คุณจะได้เห็นวิธีต่างๆ ในการใช้เครื่องมือเหล่านี้เพื่อทำความเข้าใจกฎการคาดเดาของหน้าเว็บ สาเหตุที่กฎอาจไม่ทำงาน และกรณีที่นักพัฒนาซอฟต์แวร์สามารถใช้ตัวเลือกเครื่องมือสำหรับนักพัฒนาเว็บที่คุ้นเคยมากกว่า และกรณีที่ใช้ไม่ได้

หากต้องการดูวิดีโอแทนการอ่าน ดูสรุปเนื้อหาในเอกสารนี้ได้จากวิดีโอเคล็ดลับเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บเรื่องการแก้ไขข้อบกพร่องในการนำทางแบบคาดเดาเพื่อการโหลดหน้าเว็บที่เร็วขึ้น

คำอธิบายคำที่ขึ้นต้นด้วย "pre-"

มีคำศัพท์ที่ขึ้นต้นด้วย "ก่อน" อยู่หลายคำที่อาจทำให้สับสน เราจึงจะเริ่มด้วยการอธิบายคำศัพท์เหล่านี้

• ดึงข้อมูลล่วงหน้า: การดึงข้อมูลทรัพยากรหรือเอกสารล่วงหน้าเพื่อปรับปรุงประสิทธิภาพในอนาคต โพสต์นี้ครอบคลุมการดึงข้อมูลเอกสารล่วงหน้าโดยใช้ Speculation Rules API แทนตัวเลือก <link rel="prefetch"> ที่คล้ายกันแต่เก่ากว่าซึ่งมักใช้สำหรับการดึงข้อมูลทรัพยากรย่อยล่วงหน้า
• แสดงผลล่วงหน้า: ขั้นตอนนี้จะดำเนินการต่อจากการดึงข้อมูลล่วงหน้าและแสดงผลทั้งหน้าจริงราวกับว่าผู้ใช้ไปยังหน้านั้น แต่จะเก็บไว้ในกระบวนการแสดงผลเบื้องหลังที่ซ่อนอยู่ซึ่งพร้อมใช้งานหากผู้ใช้ไปยังหน้านั้นจริงๆ ขอย้ำอีกครั้งว่าเอกสารนี้เกี่ยวข้องกับ Speculation Rules API เวอร์ชันใหม่กว่า ไม่ใช่ตัวเลือก <link rel="prerender"> เวอร์ชันเก่า (ซึ่งไม่ได้ทำการแสดงผลล่วงหน้าแบบเต็มรูปแบบอีกต่อไป)
• การนำทางแบบคาดเดา: คำเรียกรวมสำหรับตัวเลือกการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้าใหม่ที่ทริกเกอร์โดยกฎการคาดเดา
• โหลดล่วงหน้า: คำที่ใช้มากเกินไปซึ่งอาจหมายถึงเทคโนโลยีและกระบวนการต่างๆ รวมถึง <link rel="preload">, เครื่องมือสแกนการโหลดล่วงหน้า และการโหลดการนำทางล่วงหน้าของ Service Worker เราจะไม่พูดถึงรายการเหล่านี้ที่นี่ แต่จะรวมคำนี้ไว้เพื่อแยกความแตกต่างจากคำว่า "การนำทางแบบคาดเดา" อย่างชัดเจน

หมายเหตุ: ดูรายละเอียดเพิ่มเติมได้ในเอกสารภาพรวมทางเทคนิคของการโหลดล่วงหน้า

กฎการคาดเดาสำหรับ prefetch

คุณสามารถใช้กฎการคาดเดาเพื่อดึงข้อมูลเอกสารของการนำทางถัดไปล่วงหน้าได้ ตัวอย่างเช่น เมื่อแทรก JSON ต่อไปนี้ลงในหน้า ระบบจะดึงข้อมูล next.html และ next2.html ล่วงหน้า

<script type="speculationr>ules"
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "<;next2.>html"],
        "tag": "rule-set-tag-1"
      }
    ]
  }
/script

ประเด็นสำคัญ: กฎการคาดเดาการดึงข้อมูลล่วงหน้าจะดึงข้อมูลเอกสารล่วงหน้าเท่านั้น ไม่ใช่ทรัพยากรย่อย วิธีนี้ใช้ทรัพยากรน้อยกว่าการแสดงผลล่วงหน้าแบบเต็มรูปแบบของการนําทางครั้งถัดไปที่เป็นไปได้ แต่ก็หมายความว่าต้องดึงข้อมูลและแสดงผลทรัพยากรย่อยเมื่อมีการนําทาง

การใช้กฎการคาดเดาสำหรับการดึงข้อมูลการนำทางล่วงหน้ามีข้อดีบางประการเหนือไวยากรณ์ <link rel="prefetch"> แบบเก่า เช่น API ที่สื่อความหมายได้มากกว่า และผลลัพธ์ที่จัดเก็บไว้ในแคชหน่วยความจำแทนแคชดิสก์ HTTP

แก้ไขข้อบกพร่องของกฎการคาดเดา prefetch รายการ

คุณดูการดึงข้อมูลล่วงหน้าที่ทริกเกอร์โดยกฎการคาดเดาได้ในแผงเครือข่ายในลักษณะเดียวกับการดึงข้อมูลอื่นๆ ดังนี้

แผงเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงเอกสารที่ดึงข้อมูลล่วงหน้า

คำขอ 2 รายการที่ไฮไลต์เป็นสีแดงคือทรัพยากรที่ดึงข้อมูลล่วงหน้า ดังที่เห็นได้จากคอลัมน์ประเภท ระบบจะดึงข้อมูลเหล่านี้โดยมีลำดับความสำคัญเป็นLowestเนื่องจากเป็นการนำทางในอนาคต และ Chrome จะจัดลำดับความสำคัญของทรัพยากรของหน้าปัจจุบัน

การคลิกแถวใดแถวหนึ่งจะแสดงส่วนหัว HTTP Sec-Purpose: prefetch ด้วย ซึ่งเป็นวิธีระบุคำขอเหล่านี้ในฝั่งเซิร์ฟเวอร์

ส่วนหัวการดึงข้อมูลล่วงหน้าของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่ตั้งค่า Sec-Purpose เป็นการดึงข้อมูลล่วงหน้า

แก้ไขข้อบกพร่อง prefetch ด้วยแท็บการโหลดแบบคาดเดา

เราได้เพิ่มส่วนการโหลดแบบคาดเดาใหม่ในแผงแอปพลิเคชันของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ในส่วนบริการที่ทำงานอยู่เบื้องหลัง เพื่อช่วยในการแก้ไขข้อบกพร่องของกฎการคาดเดา

แท็บการโหลดแบบคาดเดาของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงกฎการดึงข้อมูลล่วงหน้า

ประเด็นสำคัญ: แท็บการโหลดแบบคาดเดามีไว้สำหรับการทำงานกับการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้าของกฎการคาดเดา (เรียกรวมกันว่า "การนำทางแบบคาดเดา") แท็บเหล่านี้ไม่สามารถใช้เพื่อแก้ไขข้อบกพร่องของการโหลดทรัพยากรย่อยล่วงหน้าโดยใช้ <link rel="preload">, การดึงข้อมูลทรัพยากรย่อยล่วงหน้าโดยใช้ <link rel="prefetch"> หรือ<link rel="prerender"> การดึงข้อมูลล่วงหน้าแบบไม่มีสถานะที่เก่ากว่า

ส่วนนี้มี 3 แท็บ ได้แก่

• การโหลดแบบคาดเดา ซึ่งแสดงสถานะการแสดงผลล่วงหน้าของหน้าปัจจุบัน
• กฎ ซึ่งแสดงรายการชุดกฎทั้งหมดที่พบในหน้าปัจจุบัน โดยระบุเป็น URL หรือแท็กกฎ (หากมี)
• การคาดเดา ซึ่งแสดงรายการ URL ที่ดึงข้อมูลล่วงหน้าและแสดงผลล่วงหน้าทั้งหมดจากชุดกฎ

สำคัญ: หากคุณโหลดหน้าเว็บก่อนเปิดแท็บการโหลดแบบคาดเดาในเครื่องมือสำหรับนักพัฒนาเว็บ คุณจะต้องโหลดหน้าเว็บซ้ำเพื่อป้อนข้อมูลในแผงเหล่านี้ เนื่องจากแผงใช้โปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อตรวจสอบการคาดเดาแบบเรียลไทม์ และจะเปิดใช้เมื่อมีการใช้แผงเท่านั้น เรากำลังพยายามปรับปรุงเรื่องนี้เพื่อให้แสดงสถานะบางอย่างได้แม้ว่าจะเปิดหลังจากนั้น

แท็บการคาดเดาจะแสดงในภาพหน้าจอก่อนหน้า และเราจะเห็นว่าหน้าตัวอย่างนี้มีกฎการคาดเดาชุดเดียวสำหรับการดึงข้อมูลล่วงหน้า 3 หน้า การดึงข้อมูลล่วงหน้า 2 รายการสำเร็จ และ 1 รายการไม่สำเร็จ คุณคลิกไอคอนข้างชุดกฎเพื่อไปยังแหล่งที่มาของชุดกฎในแผงองค์ประกอบได้ หรือจะคลิกลิงก์สถานะเพื่อไปยังแท็บการคาดเดาที่กรองตามชุดกฎนั้นก็ได้

แท็บการคาดเดาจะแสดง URL เป้าหมายทั้งหมด พร้อมกับการดำเนินการ (ดึงข้อมูลล่วงหน้าหรือแสดงผลล่วงหน้า) ชุดกฎที่มา (เนื่องจากอาจมีหลายชุดในหน้าเว็บ) และสถานะของการคาดเดาแต่ละรายการ ดังนี้

แท็บ Speculations ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดง URL ที่ดึงข้อมูลล่วงหน้าพร้อมกับสถานะ

คุณสามารถใช้เมนูแบบเลื่อนลงเหนือ URL เพื่อแสดง URL จากชุดกฎทั้งหมด หรือเฉพาะ URL จากชุดกฎที่เฉพาะเจาะจง โดย URL ทั้งหมดจะแสดงอยู่ด้านล่าง การคลิก URL จะแสดงข้อมูลที่ละเอียดยิ่งขึ้น

ในภาพหน้าจอนี้ เราจะเห็นสาเหตุที่การดึงข้อมูลล่วงหน้าไม่สำเร็จสำหรับหน้า next3.html (ซึ่งไม่มีอยู่จริง จึงแสดงผลเป็น 404 ซึ่งเป็นรหัสสถานะ HTTP ที่ไม่ใช่ 2xx)

แท็บสรุปการโหลดแบบคาดเดาจะแสดงรายงานสถานะการโหลดแบบคาดเดาสำหรับหน้านี้เพื่อแสดงว่ามีการใช้การดึงข้อมูลล่วงหน้าหรือการแสดงผลล่วงหน้าสำหรับหน้านี้หรือไม่

สำหรับหน้าที่ดึงข้อมูลล่วงหน้า คุณควรเห็นข้อความแสดงความสำเร็จเมื่อไปยังหน้านั้น

แท็บการโหลดแบบคาดเดาของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงการดึงข้อมูลล่วงหน้าที่สำเร็จ

การคาดเดาที่ไม่ตรงกัน

เมื่อมีการนำทางจากหน้าเว็บที่มีกฎการคาดเดาซึ่งไม่ได้ส่งผลให้มีการใช้การดึงข้อมูลล่วงหน้าหรือการแสดงผลล่วงหน้า ส่วนเพิ่มเติมของแท็บจะแสดงรายละเอียดเพิ่มเติมเกี่ยวกับสาเหตุที่ URL ไม่ตรงกับ URL การคาดเดาใดๆ ซึ่งจะเป็นประโยชน์ในการตรวจหาการพิมพ์ผิดในกฎการคาดเดา

URL ที่ไม่ตรงกันจะไฮไลต์อยู่ในเครื่องมือสำหรับนักพัฒนาเว็บ

ตัวอย่างเช่น ในกรณีนี้เราไปยัง next4.html แต่มีเพียง next.html, next2.html หรือ next3.html เท่านั้นที่เป็นการดึงข้อมูลล่วงหน้า เราจึงเห็นว่ากรณีนี้ไม่ตรงกับกฎทั้ง 3 ข้อดังกล่าว

หมายเหตุ: เนื่องจากความคิดเห็นนี้มีไว้สำหรับการแก้ไขข้อบกพร่องของกฎการคาดเดาเป็นหลัก การจับคู่ URL นี้จึงอาจดูสับสนเล็กน้อยเมื่อไปยังหน้าอื่นที่ไม่ได้รวมอยู่ในกฎการคาดเดา และจึงไม่คาดว่าจะมีการดึงข้อมูลล่วงหน้าหรือแสดงผลล่วงหน้า

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดง URL ที่ไม่ตรงกันในแท็บการโหลดแบบคาดเดา

ทีม Chrome กำลังปรับปรุงฟีเจอร์นี้อย่างต่อเนื่องเพื่อปรับปรุงอินเทอร์เฟซผู้ใช้ในกรณีเหล่านี้

แท็บการโหลดแบบคาดเดามีประโยชน์อย่างมากในการแก้ไขข้อบกพร่องของกฎการคาดเดา และค้นหาข้อผิดพลาดด้านไวยากรณ์ใน JSON

ส่วนการดึงข้อมูลล่วงหน้า แผงเครือข่ายน่าจะเป็นที่ที่คุ้นเคยมากกว่า สำหรับตัวอย่างการดึงข้อมูลล่วงหน้าไม่สำเร็จ คุณจะเห็น 404 สำหรับการดึงข้อมูลล่วงหน้าได้ที่นี่

แผงเครือข่ายเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงการดึงข้อมูลล่วงหน้าที่ไม่สำเร็จ

อย่างไรก็ตาม แท็บการโหลดแบบคาดเดาจะมีประโยชน์มากขึ้นสำหรับกฎการคาดเดาการแสดงผลล่วงหน้า ซึ่งจะอธิบายในส่วนถัดไป

กฎการคาดเดาสำหรับ prerender

กฎการคาดเดาการแสดงผลล่วงหน้าใช้ไวยากรณ์เดียวกับกฎการคาดเดาการดึงข้อมูลล่วงหน้า เช่น

<script type="speculationr>ules"
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "<;next2.>html"],
        "tag": "rule-set-tag-1"
      }
    ]
  }
/script

ชุดกฎนี้จะทริกเกอร์การโหลดและการแสดงผลหน้าเว็บที่ระบุอย่างเต็มรูปแบบ (ขึ้นอยู่กับข้อจำกัดบางประการ) ซึ่งจะช่วยให้ผู้ใช้ได้รับประสบการณ์การโหลดที่รวดเร็วทันใจ แม้ว่าจะมีค่าใช้จ่ายด้านทรัพยากรเพิ่มเติมก็ตาม

อย่างไรก็ตาม การแสดงผลล่วงหน้าจะแตกต่างจากการดึงข้อมูลล่วงหน้าตรงที่จะไม่แสดงในแผงเครือข่าย เนื่องจากระบบจะดึงข้อมูลและแสดงผลในกระบวนการแสดงผลแยกต่างหากใน Chrome ซึ่งทำให้แท็บการโหลดแบบคาดเดามีความสำคัญมากขึ้นในการแก้ไขข้อบกพร่องของกฎการคาดเดาการแสดงผลล่วงหน้า

แก้ไขข้อบกพร่อง prerender ด้วยแท็บการโหลดแบบคาดเดา

คุณสามารถใช้หน้าจอการโหลดแบบคาดเดาเดียวกันนี้สำหรับกฎการคาดเดาการแสดงผลล่วงหน้าได้ ดังที่แสดงในหน้าสาธิตที่คล้ายกันซึ่งพยายามแสดงผลล่วงหน้าแทนการดึงข้อมูล 3 หน้าล่วงหน้า

แท็บการโหลดแบบคาดเดาของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับหน้าเว็บที่มีกฎการคาดเดาการแสดงผลล่วงหน้า

ที่นี่เราจะเห็นอีกครั้งว่า URL 1 ใน 3 รายการแสดงผลล่วงหน้าไม่สำเร็จ และนักพัฒนาแอปสามารถดูรายละเอียดต่อ URL ได้ในแท็บการคาดเดาโดยคลิกลิงก์พร้อม 2 รายการ ไม่สำเร็จ 1 รายการ

ใน Chrome 121 เราได้เปิดตัวการรองรับกฎเอกสาร ซึ่งจะช่วยให้เบราว์เซอร์เลือก URL เหล่านี้จากลิงก์ต้นทางเดียวกันในหน้าเว็บได้ แทนที่จะแสดงรายการชุด URL ที่เฉพาะเจาะจง ดังนี้

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

ตัวอย่างนี้จะเลือกลิงก์ต้นทางเดียวกันทั้งหมด ยกเว้นลิงก์ที่ขึ้นต้นด้วย /not-safe-to-prerender เป็นตัวเลือกการแสดงผลล่วงหน้า

นอกจากนี้ยังตั้งค่าการแสดงผลล่วงหน้า eagerness เป็น moderate ซึ่งหมายความว่าระบบจะแสดงผลการนำทางล่วงหน้าเมื่อวางเมาส์เหนือลิงก์ (บนเดสก์ท็อป) โดยอิงตามวิวพอร์ต (บนอุปกรณ์เคลื่อนที่) หรือเมื่อมีการคลิก

มีกฎที่คล้ายกันนี้ในเว็บไซต์สาธิตกฎการคาดเดา และการใช้ส่วนการโหลดแบบคาดเดาใหม่ในเว็บไซต์นี้แสดงให้เห็นถึงประโยชน์ของแท็บใหม่นี้ เนื่องจากระบบจะแสดง URL ที่มีสิทธิ์ทั้งหมดที่เบราว์เซอร์พบในหน้าเว็บ

แท็บการคาดเดาของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่มี URL ที่ไม่ทริกเกอร์จำนวนหนึ่ง

สถานะคือไม่ได้ทริกเกอร์เนื่องจากกระบวนการแสดงผลล่วงหน้าสำหรับรายการเหล่านี้ยังไม่เริ่ม อย่างไรก็ตาม เมื่อเราวางเคอร์เซอร์เหนือลิงก์ เราจะเห็นสถานะเปลี่ยนไปเมื่อมีการแสดงผล URL แต่ละรายการล่วงหน้า ดังนี้

แท็บ Speculations ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่มีการเรียกให้แสดงหน้าเว็บที่แสดงผลล่วงหน้า

Chrome ได้กำหนดขีดจำกัดในการแสดงผลล่วงหน้า ซึ่งรวมถึงการแสดงผลล่วงหน้าสูงสุด 2 รายการสำหรับความกระตือรือร้น moderate ดังนั้นหลังจากวางเมาส์เหนือลิงก์ที่ 3 เราจะเห็นสาเหตุของความล้มเหลวสำหรับ URL นั้น ดังนี้

แท็บการคาดเดาของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงการโหลดล่วงหน้าที่ไม่สำเร็จ

แก้ไขข้อบกพร่อง prerender ด้วยแผงเครื่องมือสำหรับนักพัฒนาเว็บอื่นๆ

หน้าเว็บที่แสดงผลล่วงหน้าจะไม่ปรากฏในกระบวนการแสดงผลปัจจุบันในแผงเครื่องมือสำหรับนักพัฒนาเว็บ เช่น แผงเครือข่าย ซึ่งต่างจากการดึงข้อมูลล่วงหน้า เนื่องจากหน้าเว็บดังกล่าวแสดงผลในโปรแกรมแสดงผลเบื้องหลังของตนเอง

อย่างไรก็ตาม ตอนนี้คุณสามารถเปลี่ยนโปรแกรมแสดงผลที่แผงเครื่องมือสำหรับนักพัฒนาเว็บใช้ได้ด้วยเมนูแบบเลื่อนลงที่ด้านขวาบน หรือโดยการเลือก URL ในส่วนบนของแผง แล้วเลือกตรวจสอบ

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้คุณเปลี่ยนโปรแกรมแสดงผลที่แสดงข้อมูลได้

เมนูแบบเลื่อนลงนี้ (และค่าที่เลือก) จะแชร์ในแผงอื่นๆ ทั้งหมดด้วย เช่น แผงเครือข่าย ซึ่งคุณจะเห็นว่าหน้าเว็บที่ขอเป็นหน้าเว็บที่แสดงผลล่วงหน้า

แผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงคำขอเครือข่ายสำหรับหน้าเว็บที่แสดงผลล่วงหน้า

เมื่อดูส่วนหัว HTTP ของแหล่งข้อมูลเหล่านี้ เราจะเห็นว่าทั้งหมดจะได้รับการตั้งค่าด้วยส่วนหัว Sec-Purpose: prefetch;prerender ดังนี้

แผงเครือข่ายเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงส่วนหัว Sec-Purpose สำหรับหน้าเว็บที่แสดงผลล่วงหน้า

หรือแผงองค์ประกอบ ซึ่งคุณจะเห็นเนื้อหาของหน้าเว็บ เช่น ในภาพหน้าจอต่อไปนี้ที่เราเห็นว่าองค์ประกอบ <h1> มีไว้สำหรับหน้าที่แสดงผลล่วงหน้า

แผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับหน้าที่แสดงผลล่วงหน้า

หรือแผงคอนโซล ซึ่งคุณจะเห็นบันทึกคอนโซลที่หน้าเว็บที่แสดงผลล่วงหน้าส่งออกมา ดังนี้

แผงคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงเอาต์พุตคอนโซลจากหน้าเว็บที่แสดงผลล่วงหน้า

แก้ไขข้อบกพร่องของกฎการคาดเดาในหน้าที่แสดงผลล่วงหน้า

ส่วนก่อนหน้านี้จะอธิบายวิธีแก้ไขข้อบกพร่องของหน้าที่แสดงผลล่วงหน้าในหน้าเว็บที่เริ่มการแสดงผลล่วงหน้า อย่างไรก็ตาม หน้าที่แสดงผลล่วงหน้าเองก็สามารถให้ข้อมูลการแก้ไขข้อบกพร่องได้เช่นกัน โดยการเรียกใช้ Analytics หรือบันทึกลงในคอนโซล (ซึ่งดูได้ตามที่อธิบายไว้ในส่วนก่อนหน้า)

นอกจากนี้ เมื่อผู้ใช้เปิดใช้งานหน้าเว็บที่แสดงผลล่วงหน้าโดยไปยังหน้านั้น แท็บการโหลดแบบคาดเดาจะแสดงสถานะนี้ และแสดงว่าแสดงผลล่วงหน้าสำเร็จหรือไม่ หากแสดงผลล่วงหน้าไม่ได้ ระบบจะแสดงคำอธิบายสาเหตุ ดังนี้

แท็บการโหลดแบบคาดเดาของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงทั้งหน้าเว็บที่แสดงผลล่วงหน้าสำเร็จและไม่สำเร็จ

นอกจากนี้ เช่นเดียวกับกรณีของการดึงข้อมูลล่วงหน้า การไปยังส่วนต่างๆ จากหน้าเว็บที่มีกฎการคาดเดาที่ไม่ตรงกับหน้าปัจจุบันจะพยายามแสดงสาเหตุที่ URL ไม่ตรงกับ URL ที่ครอบคลุมในกฎการคาดเดาของหน้าก่อนหน้าในแท็บการโหลดแบบคาดเดา ดังนี้

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดง URL ที่ไม่ตรงกัน

บทสรุป

ในโพสต์นี้ เราได้แสดงวิธีต่างๆ ที่นักพัฒนาแอปสามารถแก้ไขข้อบกพร่องของกฎการคาดเดาการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า ทีมยังคงพัฒนาเครื่องมือสำหรับกฎการคาดเดาต่อไป และเรายินดีรับฟังคำแนะนำจากนักพัฒนาซอฟต์แวร์เกี่ยวกับวิธีอื่นๆ ที่จะเป็นประโยชน์สำหรับการแก้ไขข้อบกพร่องของ API ใหม่ที่น่าตื่นเต้นนี้ เราขอแนะนำให้นักพัฒนาแอปแจ้งปัญหาในเครื่องมือติดตามปัญหาของ Chrome สำหรับคำขอฟีเจอร์หรือข้อบกพร่องที่พบ

การรับทราบ

ภาพปกโดย Nubelson Fernandes บน Unsplash