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

جسلین ین

ابزارهای جدید اشکال زدایی CSS Grid

DevTools اکنون پشتیبانی بهتری از اشکال زدایی شبکه CSS دارد!

اشکال زدایی شبکه CSS

هنگامی که یک عنصر HTML در صفحه شما دارای display: grid یا display: inline-grid روی آن اعمال می شود، می توانید یک نشان grid را در کنار آن در پانل Elements مشاهده کنید. روی نشان کلیک کنید تا نمایش همپوشانی شبکه در صفحه تغییر کند.

صفحه Layout جدید دارای یک بخش Grid است که تعدادی گزینه برای مشاهده شبکه ها در اختیار شما قرار می دهد.

برای کسب اطلاعات بیشتر، مستندات را بررسی کنید.

شماره Chromium: 1047356

تب جدید WebAuthn

اکنون می‌توانید احراز هویت‌کنندگان را شبیه‌سازی کنید و API Authentication Web را با تب جدید WebAuthn اشکال‌زدایی کنید.

گزینه های بیشتر > ابزارهای بیشتر > WebAuthn را انتخاب کنید تا برگه WebAuthn باز شود.

تب WebAuthn

قبل از تب جدید WebAuthn ، هیچ پشتیبانی بومی اشکال زدایی WebAuthn در کروم وجود نداشت. توسعه دهندگان برای آزمایش برنامه وب خود با Web Authentication API به احراز هویت فیزیکی نیاز داشتند.

با تب جدید WebAuthn ، توسعه‌دهندگان وب اکنون می‌توانند بدون نیاز به احراز هویت فیزیکی، این احراز هویت‌کننده‌ها را شبیه‌سازی کنند، قابلیت‌های آن‌ها را سفارشی کنند و وضعیت‌هایشان را بررسی کنند. این کار تجربه اشکال زدایی را بسیار آسان تر می کند.

برای کسب اطلاعات بیشتر در مورد ویژگی WebAuthn، اسناد ما را بررسی کنید.

شماره Chromium: 1034663

ابزارها را بین پانل بالا و پایین حرکت دهید

DevTools اکنون از ابزارهای متحرک در DevTools بین پانل بالا و پایین پشتیبانی می کند. به این ترتیب، می توانید هر دو ابزار را به طور همزمان مشاهده کنید.

به عنوان مثال، اگر می خواهید پانل عناصر و منابع را به طور همزمان مشاهده کنید، می توانید بر روی پنل Sources کلیک راست کرده و برای انتقال آن به پایین گزینه Move to bottom را انتخاب کنید.

به پایین حرکت کنید

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

حرکت به بالا

شماره Chromium: 1075732

به روز رسانی پنل عناصر

پنجره نوار کناری محاسبه شده را در قسمت Styles مشاهده کنید

اکنون می توانید صفحه نوار کناری محاسبه شده را در قسمت Styles تغییر دهید.

صفحه نوار کناری محاسبه شده در پنجره Styles به طور پیش فرض جمع می شود. روی دکمه کلیک کنید تا آن را تغییر دهید.

صفحه نوار کناری محاسبه شده

شماره Chromium: 1073899

گروه بندی خصوصیات CSS در صفحه Computed

اکنون می‌توانید ویژگی‌های CSS را بر اساس دسته‌ها در صفحه Computed گروه‌بندی کنید.

با این ویژگی گروه‌بندی جدید، پیمایش در قسمت Computed (کمتر اسکرول) و تمرکز انتخابی روی مجموعه‌ای از ویژگی‌های مرتبط برای بازرسی CSS آسان‌تر خواهد بود.

در پنل Elements ، یک عنصر را انتخاب کنید. برای گروه‌بندی/غیرگروه‌بندی ویژگی‌های CSS، کادر انتخاب گروه را تغییر دهید.

گروه بندی خصوصیات CSS

مشکلات Chromium: 1096230 ، 1084673 ، 1106251

Lighthouse 6.4 در پنل Lighthouse

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

فانوس دریایی

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

  • فونت ها را از قبل بارگذاری کنید . اگر همه فونت‌هایی که از font-display: optional استفاده می‌کنند، از قبل بارگذاری شده باشند، تأیید می‌کند.
  • نقشه های منبع معتبر اگر صفحه دارای نقشه های منبع معتبر برای جاوا اسکریپت بزرگ و شخص اول باشد، بررسی می کند.
  • [تجربی] کتابخانه بزرگ جاوا اسکریپت . کتابخانه های بزرگ جاوا اسکریپت می تواند منجر به عملکرد ضعیف شود. این ممیزی جایگزین های ارزان تری را برای کتابخانه های رایج و بزرگ جاوا اسکریپت مانند moment.js پیشنهاد می کند.

شماره Chromium: 772558

رویدادهای performance.mark() در بخش زمان‌بندی

بخش زمان‌بندی یک ضبط عملکرد اکنون رویدادهای performance.mark() را علامت‌گذاری می‌کند.

عملکرد. رویدادها را علامت گذاری کنید

فیلترهای resource-type و url جدید در پانل شبکه

برای فیلتر کردن درخواست‌های شبکه، از کلیدواژه‌های resource-type و url جدید در پانل شبکه استفاده کنید.

به عنوان مثال، از resource-type:image برای تمرکز بر روی درخواست های شبکه که تصاویر هستند استفاده کنید.

فیلتر نوع منبع

درخواست‌های فیلتر را بر اساس ویژگی‌ها بررسی کنید تا کلیدواژه‌های خاص بیشتری مانند resource-type و url را پیدا کنید.

مسائل Chromium: 1121141 ، 1104188

جزئیات قاب مشاهده به روز رسانی

reporting to نقطه پایانی نمایش دهید

اکنون می‌توانید reporting to نقطه پایانی در بخش امنیت و جداسازی مشاهده کنید.

Reporting API یک هدر HTTP جدید Report-To تعریف می کند که به توسعه دهندگان وب راهی می دهد تا نقاط پایانی سرور را برای مرورگر تعیین کنند تا اخطارها و خطاها را به آن ارسال کنند.

گزارش به نقطه پایانی

این مقاله را بخوانید تا در مورد نحوه فعال کردن COEP و COOP و ایجاد "منشأ متقاطع ایزوله" وب سایت خود بیشتر بدانید.

شماره Chromium: 1051466

نمایش COEP و COOP report-only

DevTools اکنون برچسب report-only برای COEP و COOP که روی حالت report-only تنظیم شده اند نشان می دهد.

برچسب فقط گزارش

این ویدیو را تماشا کنید تا با نحوه جلوگیری از نشت اطلاعات و فعال کردن COOP و COEP در وب سایت خود آشنا شوید.

شماره Chromium: 1051466

منسوخ شدن Settings در منوی ابزارهای بیشتر

Settings در منوی ابزارهای بیشتر منسوخ شده است. به جای آن تنظیمات را از پنل اصلی باز کنید.

تنظیمات در پنل اصلی

شماره Chromium: 1121312

ویژگی های تجربی

مشکلات کنتراست رنگ را در پانل CSS Overview مشاهده و رفع کنید

پانل نمای کلی CSS اکنون لیستی از متن های کم کنتراست رنگ صفحه شما را نمایش می دهد.

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

مشکلات کنتراست رنگ پایین

روی یک عنصر در لیست کلیک کنید تا عنصر در پنل Elements باز شود. DevTools پیشنهاد رنگ خودکار را برای کمک به رفع کنتراست متن کم ارائه می دهد .

شماره Chromium: 1120316

میانبرهای صفحه کلید را در DevTools سفارشی کنید

اکنون می توانید میانبرهای صفحه کلید را برای دستورات مورد علاقه خود در DevTools سفارشی کنید.

به Settings > Shortcuts بروید، روی یک فرمان قرار دهید و روی دکمه Edit (نماد قلم) کلیک کنید تا میانبر صفحه کلید سفارشی شود.

میانبرهای صفحه کلید را سفارشی کنید

برای بازنشانی همه میانبرها، روی Restore default shortcuts کلیک کنید.

شماره Chromium: 174309

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

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

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

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

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

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