اشکال زدایی قوانین حدس و گمان

بری پولارد

قوانین حدس و گمان را می توان برای واکشی و پیش اجرا پیمایش های صفحه بعدی همانطور که در پست قبلی توضیح داده شد استفاده کرد. این می تواند بارگذاری صفحات بسیار سریعتر یا حتی فوری را امکان پذیر کند و Core Web Vitals را برای این پیمایش های اضافی صفحه بهبود بخشد.

اشکال زدایی قوانین حدس و گمان می تواند مشکل باشد. این به ویژه برای صفحات از قبل رندر شده صادق است، زیرا این صفحات در یک رندر مجزا رندر می‌شوند - به نوعی مانند یک برگه پس‌زمینه پنهان که در صورت فعال‌سازی جایگزین تب فعلی می‌شود. بنابراین، همیشه نمی‌توان از گزینه‌های DevTools معمولی برای رفع اشکال استفاده کرد.

تیم Chrome سخت کار کرده است تا پشتیبانی DevTools را برای اشکال زدایی قوانین حدس و گمان تقویت کند. در این پست، همه روش‌های مختلف استفاده از این ابزارها را برای درک قوانین حدس‌زنی صفحه، چرایی کار نکردن آنها، و زمانی که توسعه‌دهندگان می‌توانند از گزینه‌های DevTools آشناتر استفاده کنند و چه زمانی نه، خواهید دید.

توضیح اصطلاحات «پیش».

بسیاری از اصطلاحات "پیش" وجود دارد که به راحتی اشتباه گرفته می شوند، بنابراین بیایید با توضیح این موارد شروع کنیم:

  • Prefetch : واکشی یک منبع یا سند از قبل برای بهبود عملکرد آینده. این پست به جای گزینه مشابه، اما قدیمی‌تر <link rel="prefetch"> که اغلب برای واکشی اولیه منابع فرعی استفاده می‌شود، واکشی اولیه اسناد را با استفاده از Speculation Rules API پوشش می‌دهد.
  • Prerender : این یک گام فراتر از واکشی اولیه است و در واقع کل صفحه را طوری رندر می‌کند که انگار کاربر به آن پیمایش کرده است، اما آن را در یک فرآیند رندر پس‌زمینه پنهان آماده نگه‌داری می‌کند تا در صورتی که کاربر واقعاً در آنجا پیمایش کند. باز هم، این سند به نسخه جدیدتر Speculation Rules API مربوط می شود، نه گزینه قدیمی <link rel="prerender"> (که دیگر پیش اجرا کامل را انجام نمی دهد ).
  • گمانه زنی های ناوبری : اصطلاح جمعی برای گزینه های پیش واکشی و پیش اجرا جدید که توسط قوانین حدس و گمان راه اندازی می شوند.
  • Preload : اصطلاحی که بیش از حد بارگذاری شده است که می تواند به تعدادی از فناوری ها و فرآیندها از جمله <link rel="preload"> ، اسکنر پیش بارگذاری ، و پیش بارگذاری های ناوبری کارگر سرویس اشاره کند. این موارد در اینجا پوشش داده نمی‌شوند، اما این اصطلاح گنجانده شده است تا به وضوح آن‌ها را از اصطلاح «گمان‌های ناوبری» متمایز کند.

قوانین حدس و گمان برای prefetch

از قوانین حدس و گمان می توان برای واکشی اولیه سند پیمایش بعدی استفاده کرد. به عنوان مثال، هنگام درج JSON زیر در یک صفحه، next.html و next2.html از قبل واکشی می شوند:

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

استفاده از قوانین گمانه‌زنی برای واکشی‌های پیش‌فرض ناوبری مزایایی نسبت به نحو قدیمی‌تر <link rel="prefetch"> دارد، مانند یک API گویاتر و ذخیره نتایج در حافظه نهان به جای حافظه پنهان دیسک HTTP.

اشکال زدایی قوانین prefetch گمان واکشی اولیه

واکشی های اولیه که توسط قوانین حدس و گمان ایجاد می شوند را می توان در پنل شبکه به همان شیوه واکشی های دیگر مشاهده کرد:

پانل شبکه در Chrome DevTools که اسناد از پیش واکشی شده را نشان می دهد

دو درخواستی که با رنگ قرمز مشخص شده اند، منابع از پیش واکشی شده هستند، همانطور که در ستون Type قابل مشاهده است. این موارد در Lowest اولویت واکشی می‌شوند، زیرا برای پیمایش‌های آینده هستند و Chrome منابع صفحه فعلی را در اولویت قرار می‌دهد.

با کلیک بر روی یکی از ردیف‌ها، هدر Sec-Purpose: prefetch HTTP را نیز نشان می‌دهد، که چگونه این درخواست‌ها را می‌توان در سمت سرور شناسایی کرد:

Chrome DevTools سرصفحه‌ها را با Sec-Purpose روی واکشی از پیش تنظیم شده است

prefetch اولیه با برگه های بارگذاری گمانه زنی

برای کمک به اشکال‌زدایی قوانین حدس و گمان، بخش بارگذاری‌های گمانه‌زنی جدید در پانل برنامه‌های Chrome DevTools، در بخش خدمات پس‌زمینه ، اضافه شده است:

Chrome DevTools برگه‌های بارگذاری گمانه‌زنی که قانون واکشی اولیه را نشان می‌دهد

سه تب در این بخش موجود است:

  • بارهای گمانه‌زنی که وضعیت پیش‌اجرای صفحه فعلی را فهرست می‌کند.
  • قوانینی که تمام مجموعه قوانین موجود در صفحه فعلی را فهرست می کند.
  • حدس و گمان هایی که همه URL های از پیش واکشی شده و از پیش اجرا شده را از مجموعه قوانین فهرست می کند.

برگه گمانه زنی ها در اسکرین شات قبلی نشان داده شده است، و می بینیم که این صفحه نمونه دارای مجموعه ای از قوانین حدس و گمان برای واکشی اولیه 3 صفحه است. دو مورد از آن پیش واکشی ها موفق و یکی ناموفق بود. روی نماد کنار مجموعه قوانین می توان کلیک کرد تا شما را به منبع مجموعه قوانین در پانل عناصر هدایت کند. همچنین، می‌توان روی پیوند وضعیت کلیک کرد تا شما را به برگه گمانه‌زنی‌ها هدایت کند که در آن مجموعه قوانین فیلتر شده است.

برگه گمانه زنی ها همه URL های هدف را به همراه عملکرد (پیش واکشی یا اجرا اولیه)، که از کدام مجموعه قوانین آمده است (چون ممکن است در یک صفحه چندین مورد وجود داشته باشد) و وضعیت هر گمانه زنی را فهرست می کند:

تب گمانه‌زنی‌های Chrome DevTools نشان‌دهنده نشانی‌های اینترنتی از پیش واکشی شده همراه با وضعیت آنها

در بالای URL ها، می توان از یک کشویی برای نشان دادن URL ها از همه مجموعه قوانین یا فقط URL های یک مجموعه قوانین خاص استفاده کرد. در زیر آن، تمام URL ها لیست شده اند. با کلیک بر روی یک URL اطلاعات دقیق تری به شما ارائه می شود.

در این اسکرین شات، می‌توانیم دلیل خرابی صفحه next3.html را ببینیم (که وجود ندارد و بنابراین یک کد 404 را برمی‌گرداند که یک کد وضعیت غیر 2xx HTTP است).

برگه خلاصه، بارگیری های گمانه زنی ، وضعیت بارگیری گمانه زنی را برای این گزارش صفحه نشان می دهد تا نشان دهد که آیا از پیش واکشی یا اجرا اولیه برای این صفحه استفاده شده است یا خیر.

برای یک صفحه از پیش واکشی شده، زمانی که آن صفحه به این صفحه هدایت می شود، باید یک پیام موفقیت آمیز ببینید:

Chrome DevTools برگه بارگیری گمانه‌زنی که یک واکشی اولیه موفق را نشان می‌دهد

حدس و گمان های بی نظیر

هنگامی که یک پیمایش از صفحه ای با قوانین حدس و گمان انجام می شود که منجر به استفاده از پیش واکشی یا اجرای اولیه نمی شود، یک بخش اضافی از برگه جزئیات بیشتری از اینکه چرا URL با هیچ یک از URL های گمانه زنی مطابقت ندارد نشان می دهد. این برای تشخیص غلط املایی در قوانین حدس و گمان شما مفید است.

برگه بارگیری های گمانه زنی Chrome DevTools، نشان می دهد که چگونه URL فعلی با هیچ یک از URL های موجود در قوانین حدس و گمان صفحه قبلی مطابقت ندارد

به عنوان مثال، در اینجا ما به next4.html رفتیم، اما فقط next.html ، next2.html ، یا next3.html پیش واکشی هستند، بنابراین می‌توانیم ببینیم که این با هیچ یک از این سه قانون مطابقت ندارد.

برگه‌های بارگذاری گمانه‌زنی برای اشکال‌زدایی قوانین حدس‌زنی و یافتن هرگونه خطای نحوی در JSON بسیار مفید هستند.

در مورد خود واکشی‌های اولیه، پنل شبکه احتمالاً مکان آشناتری است. برای مثال شکست پیش واکشی، می توانید 404 برای واکشی اولیه را در اینجا ببینید:

پانل شبکه Chrome DevTools که واکشی اولیه ناموفق را نشان می دهد

با این حال، برگه‌های بارهای گمانه‌زنی برای اجرای قوانین حدس‌زنی بسیار مفیدتر می‌شوند که در ادامه به آن‌ها پرداخته می‌شود.

قوانین حدس و گمان برای prerender

قواعد حدس و گمان پیش اجرا از همان نحوی پیروی می کنند که قوانین حدس واکشی پیشین. مثلا:

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

این مجموعه قوانین باعث بارگذاری کامل و رندر صفحات مشخص شده (با توجه به محدودیت های خاص) می شود. این می تواند تجربه بارگیری فوری را ارائه دهد - البته با هزینه های اضافی.

با این حال، برخلاف واکشی‌های اولیه، این موارد برای مشاهده در پانل شبکه در دسترس نیستند، زیرا در یک فرآیند رندر جداگانه در Chrome واکشی شده و ارائه می‌شوند. این امر باعث می‌شود که برگه‌های Speculative loads برای اشکال‌زدایی قوانین حدس‌زنی پیش‌اجرا اهمیت بیشتری داشته باشند.

prerender با برگه‌های بارگذاری گمانه‌زنی

همان صفحه‌های بارگذاری گمانه‌زنی را می‌توان برای قوانین حدس و گمان پیش‌اجرا استفاده کرد، همانطور که در یک صفحه آزمایشی مشابه نشان داده شده است که سعی می‌کند به جای واکشی اولیه سه صفحه، از قبل اجرا کند:

Chrome DevTools Speculative برگه ها را برای صفحه ای با قوانین حدس و گمان پیش اجرا بار می کند

در اینجا دوباره می بینیم که یکی از سه URL اجرا نشد و توسعه دهندگان می توانند با کلیک بر روی پیوند 2 Ready, 1 Failure جزئیات هر URL را در تب Speculations دریافت کنند.

در 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 های واجد شرایطی که مرورگر در صفحه یافت می شود فهرست شده است:

تب Chrome DevTools Speculations با تعدادی URL فعال نشده است

وضعیت راه اندازی نمی شود زیرا فرآیند پیش اجرا برای این موارد شروع نشده است. با این حال، همانطور که ماوس را روی پیوندها نگه می‌داریم، شاهد تغییر وضعیت هستیم زیرا هر URL از قبل اجرا می‌شود:

برگه گمانه‌زنی‌های Chrome DevTools با صفحات از قبل اجرا شده فعال شده است

Chrome محدودیت‌هایی را برای پیش‌اجراها تعیین کرده است ، از جمله حداکثر ۲ پیش‌اجرا برای اشتیاق moderate ، بنابراین پس از نگه‌داشتن ماوس روی پیوند سوم، دلیل شکست آن URL را می‌بینیم:

برگه گمانه‌زنی‌های Chrome DevTools با نمایش پیش‌بارگیری‌های ناموفق

اشکال زدایی prerender اجرا با سایر پانل های DevTools

برخلاف واکشی‌های اولیه، صفحاتی که از قبل اجرا شده‌اند در فرآیندهای رندر فعلی در پانل‌های DevTools مانند پانل شبکه نمایش داده نمی‌شوند، زیرا در رندر پشت صحنه خودشان رندر می‌شوند.

با این حال، اکنون می‌توانید رندر مورد استفاده پانل‌های DevTools را با منوی کشویی در بالا سمت راست یا با انتخاب یک URL در قسمت بالای پانل و انتخاب Inspect تغییر دهید:

Chrome DevTools اکنون به شما امکان می دهد رندرهایی را که اطلاعات برای آنها نمایش داده می شود تغییر دهید

این کشویی (و مقدار انتخاب شده) در تمام پانل های دیگر نیز به اشتراک گذاشته می شود، مانند پانل شبکه ، که در آن می توانید ببینید صفحه درخواست شده از قبل اجرا شده است:

پانل شبکه Chrome DevTools که درخواست‌های شبکه را برای صفحه از پیش اجرا شده نشان می‌دهد

با نگاهی به هدرهای HTTP برای این منابع، می‌توانیم ببینیم که همه آنها با هدر Sec-Purpose: prefetch;prerender تنظیم می‌شوند:

پانل شبکه Chrome DevTools که سرصفحه Sec-Purpose را برای یک صفحه از پیش اجرا شده نشان می دهد

یا پنل Elements ، جایی که می توانید محتویات صفحه را ببینید، مانند تصویر زیر که در آن می بینیم عنصر <h1> برای صفحه از پیش اجرا شده است:

پانل عناصر Chrome DevTools برای صفحه از پیش اجرا شده

یا پانل کنسول ، که در آن می توانید گزارش های کنسول منتشر شده توسط صفحه از پیش اجرا شده را مشاهده کنید:

پانل کنسول Chrome DevTools که خروجی کنسول را از یک صفحه از پیش اجرا شده نشان می دهد

اشکال زدایی قوانین حدس و گمان در صفحه از پیش اجرا شده

بخش‌های قبلی درباره نحوه اشکال‌زدایی صفحات از قبل اجرا شده در صفحه‌ای که اجرای اولیه را آغاز می‌کند، بحث می‌کند. با این حال، این امکان نیز وجود دارد که خود صفحات از قبل اجرا شده، اطلاعات اشکال زدایی، یا با برقراری تماس های تحلیلی یا ورود به کنسول (که همانطور که در بخش قبل توضیح داده شد قابل مشاهده است) ارائه دهند.

علاوه بر این، هنگامی که یک صفحه از پیش اجرا شده توسط کاربر در حال پیمایش به آن فعال شود، برگه بارگذاری های گمانه زنی این وضعیت را نشان می دهد و اینکه آیا با موفقیت پیش اجرا شده است یا خیر. اگر نمی‌توانست از قبل ارائه شود، توضیحی در مورد چرایی آن ارائه می‌شود:

برگه بارگیری گمانه‌زنی Chrome DevTools که یک صفحه پیش‌اجرای موفق و ناموفق را نشان می‌دهد

بعلاوه - همانطور که در مورد واکشی های اولیه وجود دارد - با پیمایش از صفحه ای با قوانین حدس و گمان که با صفحه فعلی مطابقت ندارد، سعی می شود به شما نشان دهد که چرا URL ها با مواردی که در قوانین حدس و گمان صفحه قبلی در برگه بارهای گمانه زنی توضیح داده شده مطابقت ندارند:

برگه بارگیری های گمانه زنی Chrome DevTools نشان دهنده عدم تطابق URL URL فعلی و مواردی که در صفحه قبلی پوشش داده شده است

نتیجه

در این پست، راه‌های مختلفی را نشان داده‌ایم که توسعه‌دهندگان می‌توانند قوانین گمانه‌زنی واکشی اولیه و پیش‌اجرای را اشکال‌زدایی کنند. تیم به کار بر روی ابزارسازی قوانین حدس و گمان ادامه می‌دهد و ما دوست داریم پیشنهاداتی را از توسعه‌دهندگان بشنویم که راه‌های دیگری برای اشکال‌زدایی این API جدید هیجان‌انگیز مفید است. ما توسعه‌دهندگان را تشویق می‌کنیم تا برای هر درخواست ویژگی یا اشکالی که مشاهده می‌شود، مشکلی را در ردیاب مشکل Chrome مطرح کنند.

سپاسگزاریها

تصویر بند انگشتی توسط Nubelson Fernandes در Unsplash .