چیزهای جدید در DevTools (Chrome 78)

کیسی باسکی

پشتیبانی چند مشتری در پنل حسابرسی

اکنون می‌توانید از پنل حسابرسی در ترکیب با سایر ویژگی‌های DevTools مانند Request Blocking و Local Overrides استفاده کنید.

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

امتیاز عملکرد اولیه 70 است.

شکل 1. امتیاز عملکرد اولیه.

گزارش اولیه می گوید که 3 اسکریپت مسدود کننده رندر یک مشکل هستند.

شکل 2. گزارش اولیه می گوید که 3 اسکریپت مسدودکننده رندر یک مشکل هستند.

اکنون که پنل حسابرسی را می‌توان در ترکیب با مسدود کردن درخواست استفاده کرد، می‌توانید با مسدود کردن درخواست‌های اسکریپت‌های مسدودکننده رندر، به سرعت میزان تأثیر اسکریپت‌های مسدودکننده رندر بر عملکرد بار شما را اندازه‌گیری کنید:

از تب Request Blocking برای مسدود کردن اسکریپت های مشکل دار استفاده کنید.

شکل 3. استفاده از زبانه Request Blocking برای مسدود کردن اسکریپت های مشکل دار.

و سپس دوباره صفحه را ممیزی کنید:

پس از فعال کردن مسدود کردن درخواست، امتیاز عملکرد به 97 بهبود یافت.

شکل 4. امتیاز عملکرد پس از مسدود کردن اسکریپت های مشکل دار به 97 ارتقا یافت.

می‌توانید از Local Overrides برای افزودن ویژگی‌های async به هر یک از تگ‌های اسکریپت استفاده کنید، اما "ما آن را به عنوان تمرینی برای خواننده می‌گذاریم." برای امتحان کردن، به نسخه ی نمایشی چند مشتری بروید. یا این توییت را برای نمایش ویدیویی بررسی کنید.

Chromium شماره 991906

اشکال زدایی مدیریت پرداخت

بخش خدمات پس‌زمینه پانل برنامه اکنون از رویدادهای Payment Handler پشتیبانی می‌کند.

  1. به پنل برنامه بروید.
  2. پنجره Payment Handler را باز کنید.

  3. روی Record کلیک کنید. DevTools رویدادهای Payment Handler را به مدت 3 روز ثبت می کند، حتی زمانی که DevTools بسته است.

    ثبت رویدادهای مدیریت پرداخت.

    شکل 5. ثبت رویدادهای مدیریت پرداخت.

  4. اگر رویدادهای Payment Handler شما در مبدأ متفاوتی رخ دهد، نمایش رویدادها از دامنه های دیگر را فعال کنید.

  5. پس از راه‌اندازی رویداد Payment Handler، روی ردیف رویداد کلیک کنید تا درباره رویداد بیشتر بدانید.

    مشاهده رویداد Payment Handler.

    شکل 6. مشاهده یک رویداد مدیریت پرداخت.

Chromium شماره 980291

Lighthouse 5.2 در پنل حسابرسی

اکنون پنل حسابرسی Lighthouse 5.2 را اجرا می کند. ممیزی تشخیصی استفاده از شخص ثالث جدید به شما می گوید که چه مقدار کد شخص ثالث درخواست شده است و چه مدت زمانی که این کد شخص ثالث رشته اصلی را مسدود کرده است، در حین بارگیری صفحه. برای اطلاعات بیشتر در مورد اینکه چگونه کد شخص ثالث می تواند عملکرد بار را کاهش دهد، به بهینه سازی منابع شخص ثالث خود مراجعه کنید.

تصویری از حسابرسی «استفاده از شخص ثالث» در رابط کاربری گزارش Lighthouse.

شکل 7. حسابرسی استفاده شخص ثالث .

Chromium شماره 772558

بزرگترین رنگ محتوایی در پنل عملکرد

هنگام تجزیه و تحلیل عملکرد بار در پانل عملکرد ، بخش زمان‌بندی اکنون نشانگری برای بزرگترین رنگ محتوایی (LCP) دارد. LCP زمان رندر بزرگترین عنصر محتوای قابل مشاهده در viewport را گزارش می دهد.

نشانگر LCP در بخش زمان بندی.

شکل 8. نشانگر LCP در بخش زمان بندی .

برای برجسته کردن گره DOM مرتبط با LCP:

  1. روی نشانگر LCP در بخش Timeings کلیک کنید.

  2. ماوس را روی گره مرتبط در تب Summary نگه دارید تا گره در نمای دید برجسته شود.

    بخش Related Node در تب Summary.

    شکل 9. بخش Related Node از تب Summary .

  3. روی گره مرتبط کلیک کنید تا در درخت DOM انتخاب شود.

مشکلات DevTools را از منوی اصلی فایل کنید

اگر تا به حال با مشکلی در DevTools مواجه شدید و می‌خواهید مشکلی را بایگانی کنید، یا اگر تا به حال ایده‌ای در مورد چگونگی بهبود DevTools دریافت کرده‌اید و می‌خواهید یک ویژگی جدید درخواست کنید، به منوی اصلی > راهنما > گزارش یک مشکل DevTools را برای ایجاد مشکل بروید. در ردیاب تیم مهندسی DevTools. ارائه یک مثال حداقلی و قابل تکرار در Glitch به طور چشمگیری توانایی تیم را برای رفع اشکال شما یا اجرای درخواست ویژگی شما افزایش می دهد!

راهنما > گزارش یک مشکل DevTools." width="800" height="604">

شکل 10. منوی اصلی > راهنما > گزارش یک مشکل DevTools .

کانال های پیش نمایش را دانلود کنید

استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر توسعه پیش‌فرض خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان دسترسی به جدیدترین ویژگی‌های DevTools را می‌دهند، به شما اجازه می‌دهند APIهای پلتفرم وب پیشرفته را آزمایش کنید و به شما کمک می‌کنند تا قبل از کاربران، مشکلات سایت خود را پیدا کنید!

با تیم Chrome DevTools در تماس باشید

از گزینه‌های زیر برای بحث در مورد ویژگی‌های جدید، به‌روزرسانی‌ها یا هر چیز دیگری مربوط به DevTools استفاده کنید.

چیزهای جدید در DevTools

فهرستی از همه چیزهایی که در سری چیزهای جدید در DevTools پوشش داده شده است.