כללי ספקולציות לניפוי באגים באמצעות כלי הפיתוח ל-Chrome

Barry Pollard

אפשר להשתמש בכללי ספקולציה כדי לבצע שליפה מראש ועיבוד מראש של ניווטים בדפים הבאים, כמו שמתואר בפוסט הקודם. השימוש בטכניקה הזו יכול להאיץ מאוד את טעינת הדפים, או אפילו לטעון אותם באופן מיידי, וכך לשפר משמעותית את מדדי הליבה של חוויית המשתמש באתר עבור הניווטים הנוספים האלה בדפים.

ניפוי באגים של כללי ספקולציות יכול להיות מסובך. זה נכון במיוחד לגבי דפים שעברו עיבוד מראש, כי הדפים האלה עוברים עיבוד במעבד נפרד – בדומה לכרטיסיית רקע מוסתרת שמחליפה את הכרטיסייה הנוכחית כשהיא מופעלת. לכן, לא תמיד אפשר להשתמש באפשרויות הרגילות של כלי הפיתוח כדי לנפות באגים ולפתור בעיות.

צוות Chrome עבד קשה כדי לשפר את התמיכה בכלי הפיתוח לניפוי באגים של כללי ניחוש. בפוסט הזה נסביר על הדרכים השונות שבהן אפשר להשתמש בכלים האלה כדי להבין את כללי הניחוש של דף מסוים, למה יכול להיות שהם לא פועלים ומתי מפתחים יכולים להשתמש באפשרויות המוכרות יותר של כלי הפיתוח – ומתי לא.

הסבר על מונחים שמתחילים ב-'pre-'

יש הרבה מונחים שמתחילים ב-pre, ולכן נתחיל בהסבר עליהם:

• Prefetch (אחזור מראש): אחזור של משאב או מסמך מראש כדי לשפר את הביצועים בעתיד. במאמר הזה נסביר איך לבצע אחזור מראש של מסמכים באמצעות 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="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"],
        "tag": "rule-set-tag-1"
      }
    ]
  }
</script>

לשימוש בכללי ניחוש מוקדם לאחזור מראש של ניווטים יש כמה יתרונות על פני התחביר הישן יותר <link rel="prefetch">, כמו API יותר מפורט והתוצאות מאוחסנות במטמון בזיכרון ולא במטמון בדיסק של HTTP.

ניפוי באגים של prefetch כללי ספקולציות

אפשר לראות שליפות מראש (prefetch) שמופעלות על ידי כללי ניחוש בחלונית Network, בדיוק כמו שליפות אחרות:

שתי הבקשות שמודגשות באדום הן המשאבים שנטענו מראש, כפי שאפשר לראות בעמודה Type (סוג). המשאבים האלה מאוחזרים בעדיפות Lowest כי הם מיועדים לניווטים עתידיים, ו-Chrome נותן עדיפות למשאבים של הדף הנוכחי.

לחיצה על אחת השורות מציגה גם את כותרת ה-HTTP‏ Sec-Purpose: prefetch, שבאמצעותה אפשר לזהות את הבקשות האלה בצד השרת:

ניפוי באגים ב-prefetch באמצעות הכרטיסיות Speculative load (טעינה ספקולטיבית)

נוסף קטע חדש בשם Speculative loads (טעינות ספקולטיביות) בחלונית Application (אפליקציה) בכלי הפיתוח ל-Chrome, בקטע Background services (שירותים ברקע), כדי לעזור בניפוי באגים של כללי ספקולציה:

בקטע הזה יש שלוש כרטיסיות:

• טעינות מראש שבהן מפורט הסטטוס של הטרום-רנדור של הדף הנוכחי.
• Rules (כללים) – מציג את כל קבוצות הכללים שנמצאו בדף הנוכחי, שמסומנות ככתובות URL או כתגי כללים, אם יש כאלה.
• Speculations (ספקולציות) – רשימה של כל כתובות ה-URL שבוצעו להן אחזור מראש וטרום-עיבוד מתוך קבוצות הכללים.

בצילום המסך הקודם מוצגת הכרטיסייה Speculations, ואפשר לראות שלדף הדוגמה הזה יש קבוצה אחת של כללי ספקולציה לשליפה מראש של 3 דפים. שתיים מהפעולות האלה של אחזור מראש הצליחו ואחת נכשלה. אפשר ללחוץ על הסמל שליד Rule set כדי לעבור למקור של קבוצת הכללים בחלונית Elements. לחלופין, אפשר ללחוץ על הקישור סטטוס כדי לעבור לכרטיסייה השערות עם סינון לפי קבוצת הכללים הזו.

בכרטיסייה Speculations מופיעות כל כתובות ה-URL של היעד, יחד עם הפעולה (prefetch או prerender), קבוצת הכללים שממנה הן הגיעו (כי יכולות להיות כמה כאלה בדף) והסטטוס של כל ספקולציה:

מעל כתובות ה-URL, יש תפריט נפתח שמאפשר להציג כתובות URL מכל קבוצות הכללים או רק כתובות URL מקבוצת כללים מסוימת. מתחת לזה מופיעות כל כתובות ה-URL. לחיצה על כתובת URL תציג מידע מפורט יותר.

בצילום המסך הזה אפשר לראות את סיבת הכשל בדף next3.html (שלא קיים ולכן מחזיר 404, שהוא קוד סטטוס HTTP שאינו 2xx).

בכרטיסיית הסיכום Speculative loads (טעינה מראש) מוצג הדוח Speculative loading status for this page (סטטוס הטעינה מראש של הדף הזה) כדי להראות אם נעשה שימוש בשליפה מראש או בעיבוד מראש של הדף הזה.

בדף שנשלף מראש, אמורה להופיע הודעה על הצלחה כשעוברים לדף הזה:

ספקולציות ייחודיות

כשמתבצע ניווט מדף עם כללי ספקולציה שלא מוביל לשימוש בשליפה מראש או בעיבוד מראש, מוצג קטע נוסף בכרטיסייה עם פרטים נוספים שמסבירים למה כתובת ה-URL לא תאמה לאף אחת מכתובות ה-URL של הספקולציה. זה שימושי לזיהוי שגיאות הקלדה בכללי הספקולציה.

לדוגמה, כאן עברנו אל next4.html, אבל רק next.html, ‏next2.html או next3.html הם אחזור מראש, ולכן אפשר לראות שאין התאמה לאף אחד משלושת הכללים האלה.

הכרטיסיות Speculative loads שימושיות מאוד לניפוי באגים בכללי הניחוש עצמם, ולמציאת שגיאות תחביר ב-JSON.

לגבי האחזור המקדים עצמו, סביר להניח שחלונית הרשת מוכרת יותר. בדוגמה של כשל באחזור מראש, אפשר לראות את שגיאת 404 של האחזור מראש כאן:

עם זאת, הכרטיסיות Speculative loads שימושיות הרבה יותר לכללי ספקולציה של עיבוד מראש, שמוסברים בהמשך.

כללי ספקולציות בחשבון prerender

כללי ספקולציה של טרום-עיבוד פועלים לפי אותו תחביר כמו כללי ספקולציה של שליפה מראש (prefetch). לדוגמה:

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

הפעלת קבוצת הכללים הזו גורמת לטעינה ולעיבוד מלאים של הדפים שצוינו (בכפוף להגבלות מסוימות). השימוש בטכניקה הזו מאפשר טעינה מיידית של האתר, אבל כרוך בעלויות נוספות של משאבים.

עם זאת, בניגוד לאחזור מראש, אי אפשר לראות את הנתונים האלה בחלונית Network, כי הם מאוחזרים ועוברים עיבוד בתהליך עיבוד נפרד ב-Chrome. לכן, הכרטיסיות Speculative loads חשובות יותר לניפוי באגים בכללי ספקולציות של טרום-רנדור.

ניפוי באגים ב-prerender באמצעות הכרטיסיות Speculative loads (טעינות ספקולטיביות)

אפשר להשתמש באותם מסכים של טעינות ספקולטיביות גם לכללי ספקולציה של עיבוד מראש, כמו בדף ההדגמה הדומה שמנסה לעבד מראש את שלושת הדפים במקום לבצע שליפה מראש:

כאן אפשר לראות שוב שאחת משלוש כתובות ה-URL לא עברה טרום-עיבוד. כדי לראות את הפרטים של כל כתובת URL, המפתחים יכולים ללחוץ על הקישור 2 מוכנות, 1 נכשלה בכרטיסייה ניחושים.

ב-Chrome 121 השקנו תמיכה בכללי מסמכים. כך הדפדפן יכול לאסוף אותם מקישורים מאותו מקור בדף, במקום להציג רשימה של קבוצה ספציפית של כתובות URL:

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

בדוגמה הזו נבחרו כל הקישורים מאותו מקור, מלבד אלה שמתחילים ב-/not-safe-to-prerender, כמועמדים לעיבוד מראש.

הוא גם מגדיר את ה-prerender eagerness ל-moderate, מה שאומר שהניווטים עוברים prerender כשהסמן מוצב מעל הקישור או כשלוחצים עליו.

יש כללים דומים באתר ההדגמה של כללי ספקולציה. השימוש בקטע החדש טעינות ספקולטיביות באתר הזה ממחיש את התועלת של הכרטיסייה החדשה, כי מוצגות בה כל כתובות ה-URL שעומדות בדרישות והדפדפן מצא בדף:

הסטטוס הוא לא הופעל כי תהליך העיבוד מראש של הדפים האלה לא התחיל. עם זאת, כשמעבירים את מצביע העכבר מעל הקישורים, אפשר לראות את השינוי בסטטוס כשכל כתובת URL עוברת טרום-עיבוד:

ל-Chrome יש מגבלות על טעינה מראש, כולל מקסימום 2 טעינות מראש לmoderate eagerness, כך שאחרי שמצביעים על הקישור השלישי, רואים את סיבת הכשל של כתובת ה-URL הזו:

ניפוי באגים ב-prerender באמצעות החלוניות האחרות בכלי הפיתוח

בניגוד לאחזור מראש, דפים שעברו עיבוד מראש לא יופיעו בתהליכי העיבוד הנוכחיים בחלוניות של DevTools, כמו החלונית Network, כי הם עוברים עיבוד במעבד משלהם מאחורי הקלעים.

עם זאת, עכשיו אפשר להחליף את רכיב ה-Renderer שמשמש את החלוניות של כלי הפיתוח באמצעות התפריט הנפתח בפינה השמאלית העליונה, או על ידי בחירת כתובת URL בחלק העליון של החלונית ובחירה באפשרות בדיקה:

הרשימה הנפתחת הזו (והערך שנבחר בה) משותפת גם לכל החלוניות האחרות, כמו החלונית Network, שבה אפשר לראות שהדף שנשלחה לגביו בקשה הוא הדף שעבר טרום-עיבוד:

כשבודקים את כותרות ה-HTTP של המשאבים האלה, אפשר לראות שכולן יוגדרו עם הכותרת Sec-Purpose: prefetch;prerender:

או בחלונית Elements, שבה אפשר לראות את תוכן הדף, כמו בצילום המסך הבא שבו אפשר לראות שהרכיב <h1> הוא של הדף שעבר טרום-עיבוד:

או בחלונית Console, שבה אפשר לראות את יומני המסוף שנוצרו על ידי הדף שעבר טרום-עיבוד:

ניפוי באגים בכללי ספקולציות בדף שעבר עיבוד מראש

בקטעים הקודמים הסברנו איך מנפים באגים בדפים שעברו עיבוד מראש בדף שמתחיל את העיבוד מראש. עם זאת, יכול להיות שדפים שעברו טרום-עיבוד יספקו בעצמם מידע לניפוי באגים, על ידי ביצוע קריאות לניתוח נתונים או רישום ביומן המסוף (שניתן לצפייה בו כמו שמתואר בקטע הקודם).

בנוסף, אחרי שמשתמש מנווט לדף שעבר טרום-עיבוד והדף מופעל, הסטטוס הזה יוצג בכרטיסייה Speculative loads, ויוצג גם אם הטרום-עיבוד בוצע בהצלחה או לא. אם אי אפשר היה לבצע טרום-עיבוד, יופיע הסבר למה זה קרה:

בנוסף – כמו במקרה של שליפות מראש – אם תנווטו מדף עם כללי ספקולציה שלא תואמים לדף הנוכחי, ננסה להראות לכם למה כתובות ה-URL לא תאמו לכתובות שכלולות בכללי הספקולציה של הדף הקודם בכרטיסייה טעינות ספקולטיביות:

סיכום

בפוסט הזה הצגנו דרכים שונות שבהן מפתחים יכולים לנפות באגים בכללי ספקולציה של שליפה מראש ועיבוד מראש. הצוות ממשיך לעבוד על כלים לכללי ניחוש, ונשמח לקבל הצעות מהמפתחים לגבי דרכים נוספות שיכולות לעזור בניפוי הבאגים של ה-API החדש והמעניין הזה. אנחנו ממליצים למפתחים להעלות בעיה בכלי למעקב אחרי בעיות ב-Chrome לגבי כל בקשה לתכונה או באג שהם מזהים.

תודות

תמונה ממוזערת מאת Nubelson Fernandes ב-Unsplash.