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

Barry Pollard

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

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

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

הסבר של 'pre- ' תנאים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

התחביר של כללי הטעינות מראש של העיבוד מראש זהה לזה של כללי הטעינות מראש של השליפה מראש. לדוגמה:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סיכום

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

אישורים

תמונת אהבתי של Nubelson פרננדס ב-Unbounce.