قوانین حدس و گمان اشکال زدایی با ابزارهای توسعه دهنده کروم

بری پولارد

قوانین حدس و گمان را می توان برای واکشی و پیش اجرا پیمایش های صفحه بعدی همانطور که در پست قبلی توضیح داده شد استفاده کرد. این می تواند بارگذاری صفحات بسیار سریعتر یا حتی فوری را امکان پذیر کند و 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 که اسناد از پیش واکشی شده را نشان می دهد
پانل شبکه در Chrome DevTools که اسناد از پیش واکشی شده را نشان می دهد

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اشکال‌زدایی prerender با برگه‌های بارگذاری گمانه‌زنی

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

Chrome DevTools Speculative برگه‌ها را برای صفحه‌ای با قوانین گمانه‌زنی پیش‌اجرا بار می‌کند
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 فعال نشده است
تب Chrome DevTools Speculations با تعدادی URL فعال نشده است

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نتیجه گیری

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

قدردانی

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