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

Jecelyn Yeen

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

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

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

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

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

مشکل کرومیوم: ۱۰۴۷۳۵۶

تب جدید WebAuthn

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

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

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

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

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

مشکل کرومیوم: ۱۰۳۴۶۶۳

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

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

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

به همین ترتیب، می‌توانید با کلیک راست روی یک تب و انتخاب «انتقال به بالا»، هر تب پایینی را به بالا منتقل کنید.

مشکل کرومیوم: ۱۰۷۵۷۳۲

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

پنجره نوار کناری Computed را در پنجره Styles مشاهده کنید

اکنون می‌توانید پنل نوار کناری Computed را در پنل Styles تغییر وضعیت دهید.

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

مشکل کرومیوم: ۱۰۷۳۸۹۹

گروه‌بندی ویژگی‌های CSS در پنل Computed

اکنون می‌توانید ویژگی‌های CSS را بر اساس دسته‌بندی‌ها در پنل Computed گروه‌بندی کنید.

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

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

مشکلات کرومیوم: ۱۰۹۶۲۳۰ ، ۱۰۸۴۶۷۳ ، ۱۱۰۶۲۵۱

فانوس دریایی ۶.۴ در پنل فانوس دریایی

پنل لایت‌هاوس اکنون از لایت‌هاوس ۶.۴ استفاده می‌کند. برای مشاهده لیست کامل تغییرات، به یادداشت‌های انتشار مراجعه کنید.

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

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

مشکل کرومیوم: ۷۷۲۵۵۸

رویدادهای performance.mark() در بخش Timings

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

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

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

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

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

مشکلات کرومیوم: ۱۱۲۱۴۱ ، ۱۱۰۴۱۸۸

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

نمایش reporting to دستگاه پایانی

اکنون می‌توانید گزارش‌های مربوط به Cross-Origin Embedder Policy (COEP) و Cross-Origin Opener Policy (COOP) را در بخش Security & Isolation reporting to Endpoint مشاهده کنید.

API گزارش‌دهی ، یک هدر HTTP جدید به Report-To تعریف می‌کند که به توسعه‌دهندگان وب راهی برای مشخص کردن نقاط پایانی سرور برای مرورگر جهت ارسال هشدارها و خطاها می‌دهد.

برای کسب اطلاعات بیشتر در مورد نحوه فعال کردن COEP و COOP و ایجاد وب‌سایت "cross-origin isolation" این مقاله را بخوانید.

مشکل کرومیوم: ۱۰۵۱۴۶۶

نمایش حالت report-only

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

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

مشکل کرومیوم: ۱۰۵۱۴۶۶

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

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

مشکل کرومیوم: ۱۱۲۱۳۱۲

ویژگی‌های آزمایشی

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

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

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

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

مشکل کرومیوم: ۱۱۲۰۳۱۶

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

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

به تنظیمات > میانبرها بروید، نشانگر ماوس را روی یک دستور نگه دارید و روی دکمه ویرایش (آیکون خودکار) کلیک کنید تا میانبر صفحه‌کلید را سفارشی کنید.

برای تنظیم مجدد همه میانبرها، روی «بازیابی میانبرهای پیش‌فرض» کلیک کنید.

مشکل کرومیوم: ۱۷۴۳۰۹

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

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

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

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

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

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

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