כללי ספקולציות לניפוי באגים באמצעות כלי הפיתוח ל-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 (שירותים ברקע), כדי לעזור בניפוי באגים של כללי ספקולציה:

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

• טעינות מראש שבהן מפורט הסטטוס של הטעינה מראש של הדף הנוכחי.
• כללים שבו מוצגות כל קבוצות הכללים שנמצאו בדף הנוכחי, שמסומנות ככתובות 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.

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

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

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

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

<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 בכרטיסייה Speculations בלחיצה על הקישור 2 Ready, 1 Failure.

ב-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, כמועמדים לעיבוד מראש.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סיכום

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

תודות

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