تصحيح أخطاء قواعد التوقُّع باستخدام "أدوات مطوري البرامج في Chrome"

Barry Pollard

يمكن استخدام قواعد التوقُّع لجلب عمليات التنقّل في الصفحة التالية وعرضها مُسبقًا، كما هو موضّح في المشاركة السابقة. ويمكن أن يتيح ذلك تحميل الصفحة بشكل أسرع أو حتى بشكل فوري، ما يؤدي إلى تحسين مؤشرات أداء الويب الأساسية بشكل كبير لعمليات التنقّل الإضافية هذه في الصفحة.

قد يكون تصحيح أخطاء قواعد التوقُّع أمرًا صعبًا. وينطبق هذا بشكل خاص على الصفحات المعروضة مُسبقًا، إذ يتم عرض هذه الصفحات في عارض منفصل، كما لو كانت علامة تبويب خلفية مخفية تحلّ محلّ علامة التبويب الحالية عند تفعيلها. لذلك، لا يمكن دائمًا استخدام خيارات "أدوات مطوري البرامج" المعتادة لتصحيح الأخطاء.

يعمل فريق Chrome جاهدًا على تعزيز توافق "أدوات مطوري البرامج" مع تصحيح أخطاء قواعد التوقُّع. في هذه المشاركة، ستطّلع على جميع الطرق المختلفة لاستخدام هذه الأدوات لفهم قواعد التوقُّع في الصفحة وسبب عدم عملها ومتى يمكن للمطوّرين استخدام خيارات "أدوات مطوري البرامج" الأكثر دراية ومتى لا تكون كذلك.

شرح "pre- " البنود

هناك الكثير من عبارات "ما قبل" المصطلحات محيرة، لذلك سنبدأ بتوضيحها:

• الجلب المُسبَق: هو جلب مورد أو مستند مقدّمًا لتحسين الأداء في المستقبل. تتناول هذه المشاركة كيفية الجلب المسبق للمستندات باستخدام واجهة برمجة تطبيقات قواعد التوقُّع، بدلاً من خيار <link rel="prefetch"> القديم المشابه، ولكنّه يُستخدَم عادةً للجلب الفرعي للموارد الفرعية.
• العرض المُسبَق: لا يقتصر هذا العرض على الجلب المسبق، بل يعرض الصفحة بأكملها كما لو كان المستخدم قد انتقل إليها، ولكنه يبقيها في عملية عارض خلفية مخفية للاستخدام في حال انتقال المستخدم إليها. نكرّر أنّ هذا المستند معنيّ بالإصدار الأحدث من واجهة برمجة تطبيقات قواعد التوقُّع هذا، بدلاً من خيار <link rel="prerender"> القديم (الذي لم يعُد يعرض عرضًا مُسبَقًا كاملاً).
• توقُّعات التنقّل: هي العبارة الجماعية للخيارات الجديدة للجلب المُسبَق والعرض المُسبَق التي تظهر بسبب قواعد التوقُّع.
• التحميل المُسبق: عبارة عن زيادة التحميل ويمكن أن تشير إلى عدد من التكنولوجيات والعمليات بما في ذلك <link rel="preload"> وأداة فحص التحميل المُسبق وعمليات التحميل المُسبق للتنقّل في مشغّل الخدمات. لن يتم تناول هذه العناصر هنا، ولكن تم تضمين المصطلح لتمييزها بوضوح عن "توقُّعات التنقّل". المصطلح.

قواعد التوقُّع للسمة prefetch

يمكن استخدام قواعد التوقُّع لجلب مستند التنقّل التالي مسبقًا. على سبيل المثال، عند إدراج ملف JSON التالي في صفحة، سيتم جلب next.html وnext2.html مسبقًا:

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

إنّ استخدام قواعد التوقُّع في عمليات الجلب المُسبَق للتنقّل له بعض المزايا مقارنةً ببنية <link rel="prefetch"> القديمة، مثل واجهة برمجة تطبيقات أكثر تعبيرًا والنتائج التي يتم تخزينها في ذاكرة التخزين المؤقت بدلاً من ذاكرة التخزين المؤقت على قرص HTTP.

تصحيح الأخطاء في قواعد التوقُّع "prefetch"

تظهر عمليات الجلب المُسبَق التي تم إجراؤها بسبب قواعد التوقُّع في لوحة الشبكة بالطريقة نفسها التي تظهر بها عمليات الجلب الأخرى:

الطلبان المميزان باللون الأحمر هما الموارد التي تم جلبها مسبقًا، كما يظهر في عمود النوع. ويتم استرجاعها بأولوية Lowest لأنّها بالنسبة إلى عمليات التنقّل المستقبلية، ويمنح Chrome الأولوية لموارد الصفحة الحالية.

يؤدي النقر على أحد الصفوف أيضًا إلى عرض عنوان HTTP يتضمّن العنصر Sec-Purpose: prefetch، وهي الطريقة التي يمكن من خلالها تحديد هذه الطلبات من جهة الخادم:

تصحيح أخطاء prefetch باستخدام علامات تبويب التحميل المبني على توقُّع

تمت إضافة قسم عمليات التحميل المبني على توقُّع جديد إلى لوحة التطبيق في "أدوات مطوري البرامج في Chrome"، ضمن قسم خدمات الخلفية للمساعدة في تصحيح أخطاء قواعد التوقُّع:

تتوفر ثلاث علامات تبويب في هذا القسم:

• عمليات التحميل المبني على توقُّع تعرض حالة العرض المُسبَق للصفحة الحالية.
• القواعد التي تسرد جميع مجموعات القواعد المتوفّرة في الصفحة الحالية
• التوقُّعات التي تسرد جميع عناوين URL التي تم جلبها مسبقًا والمعروضة مسبقًا من مجموعات القواعد.

تظهر علامة التبويب التوقُّعات في لقطة الشاشة السابقة، ويمكن أن نلاحظ أنّ هذا المثال على الصفحة يحتوي على مجموعة واحدة من قواعد التوقُّع لجلب 3 صفحات مُسبقًا. نجح عمليتان من عمليات الجلب المُسبَق هذه وتعذّر تنفيذ عملية واحدة. يمكن النقر على الرمز بجانب مجموعة القواعد للانتقال إلى مصدر مجموعة القواعد في لوحة العناصر. بدلاً من ذلك، يمكن النقر على رابط الحالة للانتقال إلى علامة التبويب التوقُّعات التي تمّت فلترتها لعرض مجموعة القواعد هذه.

تعرِض علامة تبويب التوقُّعات جميع عناوين URL المستهدَفة، بالإضافة إلى الإجراء (الجلب المُسبَق أو العرض المُسبَق) ومجموعة القواعد التي تم جلبها منها (لأنّه قد تكون هناك عدة عناوين URL على الصفحة) وحالة كل توقُّع:

أعلى عناوين URL، يمكن استخدام قائمة منسدلة لعرض عناوين URL من جميع مجموعات القواعد، أو فقط عناوين URL من مجموعة قواعد معيّنة. أسفل ذلك، يتم سرد جميع عناوين URL. ويمنحك النقر على أحد عناوين URL معلومات أكثر تفصيلاً.

في لقطة الشاشة هذه، يمكننا الاطّلاع على سبب تعذُّر ظهور صفحة next3.html (وهي غير متوفّرة، وبالتالي يتم عرض رمز الحالة 404، وهو رمز حالة HTTP ليس من فئة 2xx).

تعرض علامة تبويب الملخّص عمليات التحميل المبني على توقُّع تقرير حالة التحميل المبني على توقُّع لهذه الصفحة لتوضيح ما إذا تم استخدام عملية جلب مُسبَق أو عرض مُسبَق لهذه الصفحة أم لا.

بالنسبة إلى الصفحة التي تم جلبها مسبقًا، من المفترَض أن تظهر لك رسالة ناجحة عند الانتقال إلى:

توقُّعات غير متطابقة

عند الانتقال من صفحة تتضمّن قواعد توقُّع لا تؤدي إلى استخدام عملية الجلب المُسبَق أو العرض المُسبَق، سيعرض قسم إضافي من علامة التبويب مزيدًا من التفاصيل حول سبب عدم تطابق عنوان URL مع أي من عناوين URL للتوقُّع. يُعد هذا مفيدًا لاكتشاف الأخطاء الإملائية في قواعد التوقُّع لديك.

على سبيل المثال، انتقلنا هنا إلى next4.html، ولكن فقط next.html أو next2.html أو next3.html هي عمليات جلب مُسبَق، لذلك يتّضح لنا أنّ هذا لا يتطابق تمامًا مع أيٍّ من هذه القواعد الثلاث.

تُعدّ علامات التبويب عمليات التحميل المبني على توقُّع مفيدة جدًا لتصحيح أخطاء قواعد التوقُّع نفسها والعثور على أي أخطاء في بنية ملف JSON.

بالنسبة إلى عمليات الجلب المُسبَق نفسها، من المرجّح أن تكون لوحة الشبكة مكانًا مألوفًا أكثر. بالنسبة إلى مثال تعذُّر الجلب المُسبَق، يمكنك الاطّلاع على الخطأ 404 لعملية الجلب المُسبَق هنا:

ومع ذلك، تصبح علامات التبويب عمليات التحميل المبني على توقُّع أكثر فائدة في ما يتعلق بالعرض المُسبَق لقواعد التوقُّع التي سنتناولها لاحقًا.

قواعد التوقُّع للسمة prerender

تتّبع قواعد توقُّع العرض المُسبَق البنية نفسها التي تتّبعها قواعد توقُّع الجلب المُسبَق. على سبيل المثال:

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

تؤدي مجموعة القواعد هذه إلى تشغيل تحميل وعرض للصفحات المحدَّدة بالكامل (مع مراعاة قيود معيّنة). ويمكن أن يوفر ذلك تجربة تحميل فوري، على الرغم من تكاليف موارد إضافية.

ومع ذلك، على عكس عمليات الجلب المُسبَق، لا يمكن الاطّلاع عليها في لوحة الشبكة، إذ يتم جلبها وعرضها في عملية عرض منفصلة في 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 حدودًا لعمليات العرض المُسبَق، بما في ذلك عرضان مُسبَقان بحدّ أقصى لنسبة العرض إلى الارتفاع moderate، لذا بعد تمرير مؤشر الماوس فوق الرابط الثالث، سنرى سبب تعذُّر ظهور عنوان URL هذا:

تصحيح أخطاء prerender باستخدام لوحات "أدوات مطوري البرامج" الأخرى

على عكس عمليات الجلب المُسبَق، لن تظهر الصفحات التي تم عرضها مُسبقًا في عمليات العرض الحالية في لوحات "أدوات مطوّري البرامج" مثل لوحة الشبكة، لأنّه يتم عرضها في عارض لقطات من وراء الكواليس.

مع ذلك، أصبح من الممكن الآن تبديل العارض المُستخدَم في لوحات "أدوات مطوري البرامج" من خلال القائمة المنسدلة في أعلى يسار اللوحة أو من خلال اختيار عنوان URL في الجزء العلوي من اللوحة واختيار فحص:

تتم مشاركة هذه القائمة المنسدلة (والقيمة المحدَّدة) في جميع اللوحات الأخرى أيضًا، مثل لوحة الشبكة التي يمكنك من خلالها معرفة أنّ الصفحة المطلوبة هي الصفحة المعروضة مُسبقًا:

عند الاطّلاع على عناوين HTTP لهذه الموارد، نرى أنّه سيتم ضبطها جميعًا باستخدام العنوان Sec-Purpose: prefetch;prerender:

أو لوحة Elements التي يمكنك من خلالها الاطّلاع على محتوى الصفحة، كما هو الحال في لقطة الشاشة التالية حيث يظهر العنصر <h1> للصفحة المعروضة مُسبقًا:

أو لوحة التحكّم، حيث يمكنك الاطّلاع على سجلّات وحدة التحكّم الصادرة عن الصفحة المعروضة مُسبقًا:

تصحيح أخطاء قواعد التوقُّع في الصفحة المعروضة مُسبقًا

تناقش الأقسام السابقة كيفية تصحيح أخطاء الصفحات المعروضة مُسبقًا في الصفحة لبدء العرض المُسبَق. ومع ذلك، من الممكن أيضًا أن توفِّر الصفحات المعروضة مُسبقًا معلومات تصحيح الأخطاء، إما من خلال إجراء استدعاءات إحصائية أو تسجيل الدخول إلى وحدة التحكّم (التي يمكن الاطّلاع عليها كما هو موضَّح في القسم السابق).

بالإضافة إلى ذلك، بعد تفعيل الصفحة المعروضة مُسبقًا من خلال انتقال المستخدم إليها، ستعرض علامة التبويب عمليات التحميل المبني على توقُّع هذه الحالة وما إذا كان قد تم عرض الصفحة مُسبقًا بنجاح أم لا. وإذا تعذّر عرضه مسبقًا، يتم تقديم تفسير لسبب ذلك:

بالإضافة إلى ذلك، كما هو الحال مع عمليات الجلب المُسبَق، إنّ الانتقال من صفحة بها قواعد توقُّع لا تتطابق مع الصفحة الحالية، سيحاول توضيح سبب عدم تطابق عناوين URL مع العناوين التي تم تناولها في قواعد التوقُّع في الصفحة السابقة ضمن علامة التبويب عمليات التحميل المبني على توقُّع:

الخاتمة

أوضحنا في هذه المشاركة الطرق المختلفة التي يمكن للمطوّرين من خلالها تصحيح أخطاء قواعد الجلب المُسبَق والعرض المُسبَق. يواصل الفريق العمل على إنشاء أدوات لقواعد التوقُّع، ويسعدنا تلقّي اقتراحات من المطوّرين حول الطرق الأخرى التي قد تساعد في تصحيح أخطاء واجهة برمجة التطبيقات الجديدة والمثيرة للاهتمام هذه. نشجّع المطوّرين على الإبلاغ عن مشكلة في أداة تتبُّع مشاكل Chrome عند رصد أي أخطاء أو طلبات للحصول على الميزات.

شكر وتقدير

صورة إبهام بخلفية من إعداد نوبيلسون فيرنانديز على قناة Unspark