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

جسلین ین

پنل رسانه جدید

DevTools اکنون اطلاعات پخش کننده رسانه را در پانل رسانه نمایش می دهد.

پنل رسانه جدید

قبل از پانل رسانه جدید در DevTools، اطلاعات ثبت و رفع اشکال در مورد پخش‌کننده‌های ویدیو را می‌توان در chrome://media-internals یافت.

پانل رسانه جدید راه ساده‌تری برای مشاهده رویدادها، گزارش‌ها، ویژگی‌ها و جدول زمانی رمزگشایی‌های فریم در همان برگه مرورگر که خود پخش‌کننده ویدیو ارائه می‌دهد، ارائه می‌کند. می‌توانید سریع‌تر مشکلات احتمالی را به صورت زنده مشاهده و بررسی کنید (مثلاً چرا فریم‌های افت شده رخ می‌دهند، چرا جاوا اسکریپت با پخش کننده به روشی غیرمنتظره تعامل دارد).

شماره Chromium: 1018414

از طریق منوی زمینه پانل عناصر، اسکرین شات های گره بگیرید

اکنون می توانید از طریق منوی زمینه در پانل عناصر، اسکرین شات های گره بگیرید.

به عنوان مثال، می‌توانید با کلیک راست روی عنصر و انتخاب Capture node screenshot از فهرست محتوا یک اسکرین شات بگیرید.

گرفتن اسکرین شات از گره

شماره Chromium: 1100253

مسائل به روز رسانی برگه

نوار هشدار مسائل در پنل کنسول اکنون با یک پیام معمولی جایگزین شده است.

مشکلات در پیام کنسول

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

چک باکس مشکلات کوکی شخص ثالث

مشکلات Chromium: 1096481 ، 1068116 ، 1080589

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

برگه Rendering را باز کنید و از ویژگی جدید Disable local fonts برای شبیه سازی منابع local() گمشده در قوانین @font-face استفاده کنید.

به عنوان مثال، زمانی که فونت "Rubik" روی دستگاه شما نصب شده است و قانون @font-face src از آن به عنوان یک فونت local() استفاده می کند، Chrome از فایل فونت محلی دستگاه شما استفاده می کند.

وقتی غیرفعال کردن فونت‌های محلی فعال است، DevTools فونت‌های local() را نادیده می‌گیرد و آنها را از شبکه واکشی می‌کند.

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

اغلب اوقات، توسعه دهندگان و طراحان از دو نسخه مختلف از یک فونت در طول توسعه استفاده می کنند:

  • یک فونت محلی برای ابزار طراحی شما، و
  • یک فونت وب برای کد شما

غیرفعال کردن فونت های محلی این کار را برای شما آسان تر می کند:

  • اشکال زدایی و اندازه گیری عملکرد و بهینه سازی بارگذاری فونت های وب
  • صحت قوانین CSS @font-face خود را تأیید کنید
  • هر گونه تفاوت بین فونت های وب و نسخه های محلی آنها را کشف کنید

شماره Chromium: 384968

شبیه سازی کاربران غیرفعال

Idle Detection API به توسعه دهندگان این امکان را می دهد تا کاربران غیرفعال را شناسایی کرده و به تغییرات حالت بیکار واکنش نشان دهند. اکنون می‌توانید از DevTools برای شبیه‌سازی تغییرات حالت غیرفعال در تب Sensors برای وضعیت کاربر و وضعیت صفحه به جای اینکه منتظر بمانید تا وضعیت بی‌کار واقعی تغییر کند، استفاده کنید. می توانید برگه Sensors را از کشو باز کنید.

شبیه سازی کاربران غیرفعال

شماره Chromium: 1090802

شبیه سازی prefers-reduced-data

جستجوی رسانه prefers-reduced-data تشخیص می دهد که آیا کاربر ترجیح می دهد محتوای جایگزین ارائه شود که از داده کمتری برای صفحه نمایش داده شده استفاده می کند.

اکنون می‌توانید از DevTools برای شبیه‌سازی درخواست رسانه prefers-reduced-data استفاده کنید.

شبیه سازی prefers-reduced-data

شماره کرومیوم: 1096068

پشتیبانی از ویژگی های جدید جاوا اسکریپت

DevTools اکنون از برخی از آخرین ویژگی های زبان جاوا اسکریپت پشتیبانی بهتری دارد:

  • عملگرهای تخصیص منطقی - DevTools اکنون از تخصیص منطقی با اپراتورهای جدید &&= ، ||= ، و ??= در پانل های Console و Sources پشتیبانی می کند.
  • جداکننده های عددی زیبا - DevTools اکنون جداکننده های عددی را در پانل Sources به درستی چاپ می کند.

مسائل Chromium: 1086817 ، 1080569

Lighthouse 6.2 در پنل Lighthouse

پنل Lighthouse اکنون Lighthouse 6.2 را اجرا می کند. برای لیست کامل تغییرات، یادداشت های انتشار را بررسی کنید.

حذف اندازه تصویر

ممیزی های جدید در Lighthouse 6.2:

  • از کارهای طولانی با موضوع اصلی اجتناب کنید . طولانی ترین کارها را در رشته اصلی گزارش می دهد، که برای شناسایی بدترین مشارکت کنندگان در تاخیر ورودی مفید است.
  • پیوندها قابل خزیدن هستند . بررسی کنید که آیا ویژگی href عناصر لنگر به یک مقصد مناسب پیوند می‌خورد، تا بتوان پیوندها را کشف کرد.
  • عناصر تصویر بدون اندازه - بررسی کنید که آیا width و height صریح روی عناصر تصویر تنظیم شده است یا خیر. اندازه تصویر صریح می تواند تغییرات طرح بندی را کاهش دهد و CLS را بهبود بخشد.
  • از انیمیشن های غیر ترکیبی خودداری کنید . انیمیشن‌های غیر ترکیبی را گزارش می‌کند که به نظر می‌رسند و CLS را کاهش می‌دهند.
  • به رویدادهای unload گوش می دهد . رویداد unload را گزارش می دهد. به جای آن از رویدادهای pagehide یا visibilitychange استفاده کنید زیرا رویداد unload به طور قابل اعتمادی اجرا نمی شود.

ممیزی های به روز شده در Lighthouse 6.2:

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

شماره Chromium: 772558

منسوخ شدن فهرست "منشاهای دیگر" در بخش Service Workers

DevTools اکنون پیوندی را برای مشاهده لیست کامل کارکنان خدمات از منابع دیگر در یک برگه مرورگر جدید - chrome://serviceworker-internals/?devtools ارائه می دهد.

قبلاً DevTools یک لیست تودرتو در زیر پنل Application > پنجره Service Workers نمایش می داد.

پیوند به ریشه های دیگر

شماره کرومیوم: 807440

نمایش خلاصه پوشش برای موارد فیلتر شده

DevTools اکنون هنگامی که فیلترها در برگه Coverage اعمال می شوند، مجدداً محاسبه و خلاصه ای از اطلاعات پوشش را به صورت پویا نمایش می دهد. قبلاً، تب Coverage همیشه خلاصه ای از تمام اطلاعات پوشش را نمایش می داد.

در مثال زیر توجه کنید که چگونه خلاصه در ابتدا می گوید 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. و سپس می گوید 57 kB of 604 kB (10%) used so far. 546 kB unused. پس از اعمال فیلتر CSS

خلاصه پوشش موارد فیلتر شده

شماره Chromium: 1061385

مشاهده جزئیات قاب جدید در پنل برنامه

DevTools اکنون یک نمای دقیق برای هر فریم نشان می دهد. با کلیک کردن روی یک فریم در منوی Frames در پانل برنامه به آن دسترسی پیدا کنید.

مشاهده جزئیات قاب جدید در پنل برنامه

شماره Chromium: 1093247

جزئیات قاب برای پنجره های باز شده

DevTools اکنون پنجره های باز / پاپ آپ ها را در زیر درخت قاب نیز نمایش می دهد. نمای جزئیات قاب پنجره های باز شده شامل اطلاعات امنیتی اضافی است.

جزئیات قاب پنجره باز شد

شماره Chromium: 1107766

اطلاعات امنیتی و جداسازی (COEP / COOP)

DevTools اکنون زمینه ایمن، Cross-Origin-Embedder-Policy (COEP) و Cross-Origin-Opener-Policy (COOP) را در جزئیات قاب نمایش می دهد.

اطلاعات امنیتی و جداسازی

اطلاعات امنیتی بیشتری به زودی به نمای جزئیات قاب اضافه خواهد شد.

شماره Chromium: 1051466

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

DevTools اکنون پیشنهادات رنگی را برای متن با کنتراست کم رنگ ارائه می دهد.

در مثال زیر، h1 متنی با کنتراست پایین دارد. برای رفع آن، انتخابگر رنگ ویژگی color را در قسمت Styles باز کنید. پس از گسترش بخش نسبت کنتراست ، DevTools پیشنهادات رنگ AA و AAA را ارائه می دهد. برای اعمال رنگ روی رنگ پیشنهادی کلیک کنید.

شماره Chromium: 1093227

پنجره Properties را در پانل Elements بازگردانید

بخش Properties بازگشته است، در Chrome 84 منسوخ شده است. در نسخه آینده DevTools، ما می خواهیم گردش کار را برای بازرسی ویژگی های عناصر بهبود دهیم.

پنجره Properties در پنل Elements

شماره Chromium: 1105205 ، 1116085

مقادیر هدر X-Client-Data قابل خواندن توسط انسان در پانل شبکه

هنگام بررسی یک منبع شبکه در پانل شبکه، DevTools اکنون هر مقدار سرصفحه X-Client-Data در صفحه Headers به ​​عنوان کد قالب بندی می کند.

هدر X-Client-Data HTTP حاوی لیستی از شناسه‌های آزمایش و پرچم‌های Chrome است که در مرورگر شما فعال هستند. مقادیر هدر خام مانند رشته‌های مات به نظر می‌رسند، زیرا بافرهای پروتکل سریال‌شده با کدگذاری پایه ۶۴ هستند. برای شفاف‌تر کردن محتوا برای توسعه‌دهندگان، DevTools اکنون مقادیر رمزگشایی شده را نشان می‌دهد.

مقادیر سرصفحه «X-Client-Data» قابل خواندن توسط انسان

شماره Chromium: 1103854

تکمیل خودکار فونت های سفارشی در قسمت Styles

هنگام ویرایش ویژگی font-family در قسمت Styles ، فونت های وارد شده به لیست تکمیل خودکار CSS اضافه می شوند.

در این مثال، 'Noto Sans' یک فونت سفارشی نصب شده در ماشین محلی است. در لیست تکمیل CSS نمایش داده می شود. قبلا اینطور نبود.

تکمیل خودکار فونت های سفارشی

شماره Chromium: 1106221

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

DevTools اکنون به طور مداوم همان نوع منبع درخواست شبکه اصلی را نشان می‌دهد و وقتی تغییر مسیر (وضعیت 302) اتفاق می‌افتد، به مقدار ستون Type / Redirect می‌دهد.

قبلاً DevTools گاهی اوقات نوع را به Other تغییر می داد.

نمایش نوع منبع تغییر مسیر

شماره Chromium: 997694

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

جعبه‌های متن فیلتر در پانل سبک‌ها و پانل شبکه ، و همچنین کادر متن جستجوی DOM در پانل عناصر ، اکنون دارای دکمه‌های پاک کردن هستند. با کلیک بر روی پاک کردن، هر متنی که ورودی دارید حذف می شود.

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

شماره Chromium: 1067184

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

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

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

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

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

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