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

Barry Pollard

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

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

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

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

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

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

في الإصدار 121 من Chrome، أطلقنا ميزة دعم قواعد المستندات. ويسمح ذلك للمتصفّح بجمع هذه البيانات من روابط المصدر نفسه على الصفحة، بدلاً من إدراج مجموعة معيّنة من عناوين 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، مثل لوحة الشبكة، لأنّه يتم عرضها في أداة العرض الخاصة بها التي تعمل بدون أن يلاحظها المستخدم.

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

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

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

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

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

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

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

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

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

الخاتمة

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

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

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