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

Barry Pollard

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

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

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

הסבר על מונחים מסוג "pre-"

יש הרבה מונחים "לפני" שאפשר להתבלבל בקלות, לכן נתחיל בהסבר מהם:

• שליפה מראש (prefetch): אחזור של משאב או מסמך מראש כדי לשפר את הביצועים בעתיד. הפוסט הזה עוסק בשליפה מראש (prefetch) של מסמכים באמצעות Speculation Rules API, במקום באפשרות הדומה (אבל ישנה יותר) של <link rel="prefetch"> שמשמשת לעיתים קרובות לשליפה מראש של משאבי משנה.
• עיבוד מראש: שלב נוסף מעבר לשליפה מראש (prefetch) ולמעשה מתבצע רינדור של הדף כולו כאילו המשתמש ניווט אליו, אבל הוא נשאר מוכן לשימוש בתהליך מוסתר של כלי הרינדור ברקע, אם המשתמש מנווט לשם בפועל. שוב, המסמך הזה עוסק בגרסה החדשה יותר של Speculation Rules API, ולא באפשרות <link rel="prerender"> הישנה יותר (שכבר לא מבצעת עיבוד מראש מלא).
• השערות בנוגע לניווט: המונח הקולקטיבי של האפשרויות החדשות לשליפה מראש ולעיבוד מראש שהופעלו על ידי כללי הטעינות מראש.
• טעינה מראש: מונח עמוס מדי שיכול להתייחס לכמה טכנולוגיות ותהליכים, כולל <link rel="preload">, סורק העומסים מראש ועומסי ניווט מראש של Service Worker. הפריטים האלה לא מכוסים כאן, אבל המונח נכלל כדי להבחין באופן ברור בין המונחים האלה לבין המונח "השערות לניווט".

כללי ספקולציות עבור prefetch

אפשר להשתמש בכללי הספקולציות כדי לאחזר מראש את מסמך הניווט הבא. לדוגמה, כשמוסיפים לדף את קובץ ה-JSON הבא לדף, מתבצעת שליפה מראש (prefetch) של next.html ושל next2.html:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ספקולציות ללא התאמה

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

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

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

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

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

כללי ספקולציות עבור prerender

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

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

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

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

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

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

כאן אנחנו שוב רואים שהעיבוד מראש של אחת משלוש כתובות ה-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 כמועמדים לעיבוד מראש.

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

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

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

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

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

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

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

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

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

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

דרך אחרת: חלונית המסוף, שבה אפשר לראות את יומני המסוף שהונפקו על ידי הדף שעבר עיבוד מראש:

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

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

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

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

סיכום

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

אישורים

תמונה אהובה מאת נובלסון פרננדס ב-UnFlood.