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

Kayce Basques

مشکلات سایت را با تب جدید «مشکلات» برطرف کنید

تب جدید «مسائل» در کشو (Drawer) با هدف کاهش شلوغی و بی‌نظمی اعلان‌ها در کنسول (Console) ایجاد شده است. در حال حاضر، کنسول محل اصلی ثبت پیام‌ها، هشدارها و خطاها توسط توسعه‌دهندگان وب‌سایت، کتابخانه‌ها، چارچوب‌ها و خود کروم است. تب «مسائل»، هشدارهای مرورگر را به صورت ساختاریافته، تجمیع‌شده و قابل اجرا ارائه می‌دهد، به منابع آسیب‌دیده در DevTools پیوند می‌دهد و راهنمایی‌هایی در مورد نحوه رفع مشکلات ارائه می‌دهد. با گذشت زمان، تعداد بیشتری از هشدارهای کروم به جای کنسول در تب «مسائل» نمایش داده می‌شوند که این امر به کاهش بی‌نظمی کنسول کمک خواهد کرد.

برای شروع، به بخش «یافتن و رفع مشکلات با برگه مشکلات Chrome DevTools» مراجعه کنید.

اشکال کرومیوم: #1068116

اطلاعات دسترسی را در راهنمای ابزار حالت بازرسی (Inspect Mode) مشاهده کنید

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

اشکال کرومیوم: #1040025

به‌روزرسانی‌های پنل عملکرد

اطلاعات کل زمان مسدودسازی (TBT) را در پاورقی مشاهده کنید

پس از ثبت عملکرد بارگذاری، پنل Performance اکنون اطلاعات Total Blocking Time (TBT) را در پاورقی نشان می‌دهد. TBT یک معیار عملکرد بارگذاری است که به تعیین مدت زمان قابل استفاده شدن یک صفحه کمک می‌کند. اساساً این معیار مدت زمانی را اندازه‌گیری می‌کند که یک صفحه به نظر قابل استفاده می‌رسد (زیرا محتوای آن به صفحه رندر شده است) اما در واقع قابل استفاده نیست زیرا جاوا اسکریپت thread اصلی را مسدود کرده و بنابراین صفحه نمی‌تواند به ورودی کاربر پاسخ دهد. TBT معیار آزمایشگاهی اصلی برای تخمین First Input Delay است که یکی از Core Web Vitals جدید گوگل است.

برای دریافت اطلاعات کل زمان مسدود کردن، از صفحه بارگذاری مجدد استفاده نکنید گردش کار برای ضبط عملکرد بارگذاری صفحه. در عوض، روی ضبط کلیک کنید ، صفحه را به صورت دستی بارگیری مجدد کنید، منتظر بمانید تا صفحه بارگیری شود و سپس ضبط را متوقف کنید. اگر Total Blocking Time: Unavailable مشاهده کردید، به این معنی است که DevTools اطلاعات مورد نیاز خود را از داده‌های پروفایل داخلی Chrome دریافت نکرده است.

اشکال کرومیوم: #1054381

رویدادهای Layout Shift در بخش جدید Experience

بخش جدید Experience در پنل Performance می‌تواند به شما در تشخیص تغییرات طرح‌بندی کمک کند. Cumulative Layout Shift (CLS) معیاری است که می‌تواند به شما در تعیین کمیت ناپایداری بصری ناخواسته کمک کند و یکی از Core Web Vitals جدید گوگل است.

برای مشاهده جزئیات تغییر طرح‌بندی در برگه خلاصه ، روی یک رویداد تغییر طرح‌بندی کلیک کنید. برای مشاهده محل تغییر طرح‌بندی، نشانگر ماوس را روی فیلدهای «از» (Moved from) و «به» (Moved to) نگه دارید.

اصطلاحات دقیق‌تر promise در کنسول

هنگام ثبت یک Promise کنسول به اشتباه وضعیت Promise را resolved توصیف می‌کرد:

کنسول اکنون از اصطلاح fulfilled استفاده می‌کند که با مشخصات Promise همسو است :

اشکال نسخه ۸: #۶۷۵۱

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

پشتیبانی از کلمه کلیدی revert

رابط کاربری تکمیل خودکار پنل Styles اکنون کلمه کلیدی revert CSS را تشخیص می‌دهد، که مقدار آبشاری یک ویژگی را به مقداری که در صورت عدم ایجاد تغییر در استایل‌بندی عنصر می‌بود، برمی‌گرداند.

اشکال کرومیوم: #1075437

پیش‌نمایش تصاویر

برای دیدن پیش‌نمایش تصویر در یک راهنما، نشانگر ماوس را روی مقدار background-image در پنل استایل‌ها نگه دارید.

اشکال کرومیوم: #1040019

انتخابگر رنگ اکنون از نمادگذاری کاربردی رنگ با فاصله استفاده می‌کند

ماژول رنگ CSS سطح ۴ مشخص می‌کند که توابع رنگی مانند rgb() باید از آرگومان‌های جدا شده با فاصله پشتیبانی کنند. برای مثال، rgb(0, 0, 0) معادل rgb(0 0 0) است.

وقتی رنگ‌ها را با Color Picker انتخاب می‌کنید یا با نگه داشتن Shift و سپس کلیک روی مقدار رنگ، نمایش رنگ‌ها را در پنل Styles تغییر می‌دهید، اکنون سینتکس آرگومان‌ها را که با فاصله از هم جدا شده‌اند، مشاهده خواهید کرد.

همچنین می‌توانید سینتکس را در پنل Computed و راهنمای ابزار Inspect Mode مشاهده کنید.

DevTools از این سینتکس جدید استفاده می‌کند زیرا ویژگی‌های CSS آینده مانند color() از سینتکس آرگومان‌های جدا شده با کاما که منسوخ شده است، پشتیبانی نمی‌کنند .

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

اشکال کرومیوم: #1072952

منسوخ شدن پنل Properties در پنل Elements

بخش Properties در پنل Elements منسوخ شده است. به جای آن، console.dir($0) را در کنسول اجرا کنید.

مراجع:

• console.dir()
• $0

پشتیبانی از میانبرهای برنامه در پنل Manifest

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

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

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

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

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

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

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

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

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