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

Barry Pollard

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

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

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

شرح عبارات "pre-"

هناك الكثير من المصطلحات التي تبدأ بـ "pre-" (قبل) والتي قد تكون مربكة، لذا سنبدأ بشرح هذه المصطلحات:

• التحميل المُسبَق: جلب مرجع أو مستند مُسبَقًا لتحسين الأداء في المستقبل تتناول هذه المشاركة ميزة "التحميل المُسبَق للمستندات" باستخدام واجهة برمجة التطبيقات Speculation Rules API، بدلاً من الخيار <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 DevTools، ضمن قسم الخدمات التي تعمل في الخلفية، للمساعدة في تصحيح أخطاء قواعد التوقّعات:

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

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

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

تعرض علامة التبويب التوقّعات جميع عناوين 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 eagerness، لذلك بعد التمرير فوق الرابط الثالث، يظهر سبب تعذُّر تحميل عنوان URL هذا:

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

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

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

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

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

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

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

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

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

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

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

الخاتمة

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

الشكر والتقدير

صورة مصغّرة من إنشاء Nubelson Fernandes على Unsplash.