این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Kayce Basques

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

اکنون می‌توانید از پنل حسابرسی در ترکیب با سایر ویژگی‌های 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 پشتیبانی می‌کند.

به پنل برنامه بروید.
پنجره Payment Handler را باز کنید.
روی Record کلیک کنید. DevTools رویدادهای Payment Handler را به مدت 3 روز ثبت می کند، حتی زمانی که DevTools بسته است.
شکل 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:

روی نشانگر LCP در بخش Timeings کلیک کنید.
ماوس را روی گره مرتبط در تب Summary نگه دارید تا گره در نمای دید برجسته شود.
شکل 9. بخش Related Node از تب Summary .
روی گره مرتبط کلیک کنید تا در درخت 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 ما بنویسید.