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

Kayce Basques

پشتیبانی چند کلاینتی در پنل حسابرسی‌ها

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

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

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

شکل ۲. گزارش اولیه می‌گوید که ۳ اسکریپت مسدودکننده رندر، مشکل‌ساز هستند.

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

شکل ۳. استفاده از برگه مسدود کردن درخواست برای مسدود کردن اسکریپت‌های مشکل‌ساز.

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

شکل ۴. امتیاز عملکرد پس از مسدود کردن اسکریپت‌های مشکل‌ساز به ۹۷ بهبود یافت.

شما می‌توانید به طور جایگزین از Local Overrides برای اضافه کردن ویژگی‌های async به هر یک از تگ‌های اسکریپت استفاده کنید، اما «این را به عنوان تمرین برای خواننده می‌گذاریم.» برای مشاهده ویدیوی نمایشی، این توییت را بررسی کنید.

مشکل کرومیوم شماره ۹۹۱۹۰۶

اشکال‌زدایی کنترل‌کننده پرداخت

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

1. به پنل برنامه‌ها بروید.
2. پنل مدیریت پرداخت را باز کنید.

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

   

   شکل ۵. ثبت رویدادهای Payment Handler.

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

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

   

   شکل ۶. مشاهده‌ی رویداد Payment Handler.

مشکل کرومیوم شماره ۹۸۰۲۹۱

لایت‌هاوس ۵.۲ در پنل حسابرسی‌ها

پنل حسابرسی (Audits) اکنون Lighthouse 5.2 را اجرا می‌کند. حسابرسی تشخیصی جدید استفاده از شخص ثالث به شما می‌گوید که چه مقدار کد شخص ثالث درخواست شده است و آن کد شخص ثالث چه مدت در حین بارگذاری صفحه، ترد اصلی را مسدود کرده است. برای کسب اطلاعات بیشتر در مورد اینکه چگونه کد شخص ثالث می‌تواند عملکرد بارگذاری را کاهش دهد، به بخش «بهینه‌سازی منابع شخص ثالث» مراجعه کنید.

شکل ۷. ممیزی استفاده توسط شخص ثالث .

مشکل کرومیوم شماره ۷۷۲۵۵۸

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

هنگام تجزیه و تحلیل عملکرد بارگذاری در پنل Performance ، بخش Timings اکنون شامل نشانگری برای Largest Contentful Paint (LCP) است. LCP زمان رندر بزرگترین عنصر محتوایی قابل مشاهده در نمای دید را گزارش می‌دهد.

شکل ۸. نشانگر LCP در بخش زمان‌بندی‌ها .

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

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

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

   

   شکل ۹. بخش گره مرتبط از برگه خلاصه .

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

مشکلات مربوط به ابزار توسعه فایل (File DevTools) از منوی اصلی

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

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

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

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

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

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

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

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

قابلیت‌های جدید در DevTools

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