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

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

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

يعمل فريق 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"

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

لوحة شبكة في &quot;أدوات مطوري البرامج في Chrome&quot; تعرض مستندات تم جلبها مسبقًا
لوحة الشبكة في "أدوات مطوري البرامج في Chrome" تعرض مستندات تم جلبها مسبقًا

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

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

الجلب المسبق للعناوين في &quot;أدوات مطوري البرامج في Chrome&quot; مع ضبط Sec-Purpose على عملية الجلب المُسبَق
عناوين الجلب المُسبَق في "أدوات مطوري البرامج في Chrome" مع ضبط الغرض منها على الجلب المُسبَق

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

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

علامات تبويب التحميل المبني على توقُّع في &quot;أدوات مطوّري البرامج في Chrome&quot; تعرض قاعدة الجلب المُسبَق
علامات تبويب التحميل المبني على توقُّع في "أدوات مطوّري البرامج في Chrome" تعرض قاعدة الجلب المُسبَق

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

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

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

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

علامة تبويب &quot;توقُّعات أدوات مطوّري البرامج في Chrome&quot; تعرض عناوين URL التي تم جلبها مسبقًا بالإضافة إلى حالتها
علامة تبويب "توقُّعات أدوات مطوّري البرامج في Chrome" تعرض عناوين URL التي تم جلبها مسبقًا بالإضافة إلى حالتها

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

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

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

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

علامة تبويب عمليات تحميل المبني على توقُّع في &quot;أدوات مطوري البرامج في Chrome&quot; تعرض عملية جلب مُسبَق ناجحة
علامة تبويب "عمليات التحميل المبني على توقُّع في أدوات مطوّري البرامج في Chrome" تعرض عملية جلب مُسبَق ناجحة

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

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

علامة تبويب &quot;عمليات تحميل المبني على توقُّع في أدوات مطوري البرامج في Chrome&quot; توضّح كيفية عدم تطابق عنوان URL الحالي مع أي من عناوين URL في قواعد التوقُّع في الصفحة السابقة
يتم تمييز عناوين URL غير المطابقة في "أدوات مطوري البرامج"

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

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

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

لوحة شبكة &quot;أدوات مطوري البرامج في Chrome&quot; تعرض عملية جلب مُسبَق لمحتوى غير صالح
لوحة شبكة في "أدوات مطوري البرامج في Chrome" تعرض عملية جلب مُسبَق لتعذُّر المعالجة

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

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

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

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

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

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

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

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

تعمل أداة المبني على توقُّع في &quot;أدوات مطوري البرامج في Chrome&quot; على تحميل علامات تبويب لصفحة تتضمن قواعد توقُّع العرض المُسبَق.
تحمِّل أداة المبني على توقُّع في "أدوات مطوري البرامج في Chrome" علامات تبويب لصفحة تتضمن قواعد توقُّع العرض المُسبَق
.

ونرى هنا مرة أخرى أنّه تعذّر عرض أحد عناوين 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 المؤهَّلة التي عثر عليها المتصفّح في الصفحة:

علامة تبويب &quot;توقُّعات أدوات مطوّري البرامج في Chrome&quot; مع عدد من عناوين URL التي لم يتم تشغيلها
علامة تبويب "توقُّعات أدوات مطوّري البرامج في Chrome" مع عدد من عناوين URL التي لم يتم تشغيلها

تكون الحالة لم تبدأ بسبب عدم بدء عملية العرض المُسبَق لهذه العناصر. ومع ذلك، عند وضع المؤشر فوق الروابط، نلاحظ تغيّرًا في الحالة لأنّه يتم عرض كل عنوان URL مسبقًا:

علامة تبويب &quot;توقُّعات أدوات مطوّري البرامج في Chrome&quot; مع تشغيل الصفحات المعروضة مُسبقًا
علامة تبويب "توقُّعات أدوات مطوّري البرامج في Chrome" مع تشغيل صفحات معروضة مسبقًا

وضع Chrome حدودًا لعمليات العرض المُسبَق، بما في ذلك عرضان مُسبَقان بحدّ أقصى لنسبة العرض إلى الارتفاع moderate، لذا بعد تمرير مؤشر الماوس فوق الرابط الثالث، سنرى سبب تعذُّر ظهور عنوان URL هذا:

علامة تبويب &quot;توقُّعات أدوات مطوّري البرامج في Chrome&quot; تعرض عمليات التحميل المُسبق التي تعذّر تنفيذها
علامة تبويب "توقُّعات أدوات مطوّري البرامج في Chrome" مع ظهور عمليات التحميل المُسبق التي تعذّر تنفيذها

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

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

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

تتيح لك &quot;أدوات مطوري البرامج في Chrome&quot; الآن تبديل برامج العرض التي يتم عرض المعلومات لها.
تتيح لك "أدوات مطوري البرامج في Chrome" الآن تبديل برامج العرض التي يتم عرض المعلومات لها.

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

لوحة شبكة &quot;أدوات مطوري البرامج في Chrome&quot; تعرض طلبات الشبكة للصفحة المعروضة مُسبقًا
لوحة شبكة في "أدوات مطوري البرامج في Chrome" تعرض طلبات الشبكة للصفحة المعروضة مُسبقًا

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

لوحة شبكة في &quot;أدوات مطوري البرامج في Chrome&quot; تعرض عنوانًا Sec-Purpose لصفحة معروضة مسبقًا
لوحة شبكة في "أدوات مطوري البرامج في Chrome" تعرض عنوانًا Sec-Purpose لصفحة معروضة مسبقًا

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

لوحة عناصر &quot;أدوات مطوري البرامج في Chrome&quot; للصفحة المعروضة مُسبقًا
لوحة عناصر "أدوات مطوري البرامج في Chrome" للصفحة المعروضة مُسبقًا

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

لوحة &quot;وحدة تحكّم أدوات مطوّري البرامج في Chrome&quot; تعرض نتائج وحدة التحكّم من صفحة معروضة مُسبقًا
لوحة "وحدة تحكُّم أدوات مطوّري البرامج في Chrome" تعرض نتائج وحدة التحكّم من صفحة معروضة مُسبقًا

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

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

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

علامة تبويب عمليات التحميل المبني على توقُّع في &quot;أدوات مطوري البرامج في Chrome&quot; تعرض صفحة ناجحة وأخرى معروضة مسبقًا
علامة تبويب "عمليات التحميل المبني على توقُّع في أدوات مطوّري البرامج في Chrome" تعرض صفحة تم عرضها مُسبقًا أو تمت بنجاح

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

علامة تبويب &quot;مبني على توقُّعات في أدوات مطوّري البرامج في Chrome&quot; تعرض عدم تطابق عنوان URL الحالي وعنوان URL الذي تمت تغطيته في الصفحة السابقة
أدوات مطوري البرامج في Chrome تعرض حالات عدم تطابق عناوين URL

الخاتمة

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

شكر وتقدير

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