چیزهای جدید در 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 استفاده کنید.

  • پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.
چیزهای جدید در DevTools

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

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59