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

کیسی باسکی

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

تب جدید Issues در کشو با هدف کمک به کاهش خستگی اعلان ها و درهم ریختگی کنسول است. در حال حاضر، کنسول مکان مرکزی توسعه‌دهندگان وب‌سایت، کتابخانه‌ها، چارچوب‌ها و خود کروم برای ثبت پیام‌ها، هشدارها و خطاها است. برگه Issues اخطارهای مرورگر را به روشی ساختاریافته، جمع‌آوری‌شده و عملی ارائه می‌کند، به منابع آسیب‌دیده در DevTools پیوند می‌دهد و راهنمایی‌هایی در مورد چگونگی رفع مشکلات ارائه می‌دهد. با گذشت زمان، بیشتر و بیشتر هشدارهای کروم در تب Issues به جای کنسول ظاهر می شود، که باید به کاهش شلوغی کنسول کمک کند.

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

برگه مسائل.

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

اطلاعات دسترس‌پذیری را در راهنمای ابزار Inspect Mode مشاهده کنید

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

راهنمای ابزار Inspect Mode با اطلاعات دسترس‌پذیری.

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

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

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

پس از ثبت عملکرد بار، پانل عملکرد اکنون اطلاعات زمان مسدود کردن کل (TBT) را در فوتر نشان می دهد. TBT یک معیار عملکرد بار است که به تعیین کمیت مدت زمانی که طول می کشد تا یک صفحه قابل استفاده شود کمک می کند. اساساً مدت زمانی که صفحه قابل استفاده به نظر می رسد را اندازه می گیرد (زیرا محتوای آن روی صفحه نمایش داده شده است) اما در واقع قابل استفاده نیست زیرا جاوا اسکریپت رشته اصلی را مسدود می کند و بنابراین صفحه نمی تواند به ورودی کاربر پاسخ دهد. TBT معیار اصلی آزمایشگاهی برای تقریب تاخیر ورودی اول است، که یکی از اصلی‌های جدید وب اصلی گوگل است.

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

اطلاعات زمان انسداد کل در پاورقی ضبط پانل عملکرد.

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

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

بخش تجربه جدید پانل عملکرد می تواند به شما کمک کند تغییرات طرح بندی را تشخیص دهید. تغییر چیدمان تجمعی (CLS) معیاری است که می‌تواند به شما در تعیین کمیت ناپایداری بصری ناخواسته کمک کند و یکی از اصلی‌های جدید وب اصلی Google است.

روی یک رویداد Layout Shift کلیک کنید تا جزئیات تغییر طرح را در برگه Summary ببینید. ماوس را روی فیلدهای Moved from و Moved to بچرخانید تا جابجایی چیدمان را تجسم کنید.

جزئیات یک تغییر طرح.

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

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

نمونه ای از کنسول با استفاده از اصطلاحات قدیمی "حل شده".

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

نمونه ای از کنسول با استفاده از اصطلاحات جدید "تکمیل شده".

اشکال V8: #6751

به‌روزرسانی‌های پنجره سبک‌ها

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

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

تنظیم ارزش یک ویژگی برای بازگرداندن

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

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

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

ماوس روی یک مقدار تصویر پس‌زمینه.

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

Color Picker اکنون از نماد رنگی کاربردی جدا شده از فضا استفاده می کند

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

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

استفاده از آرگومان های جدا شده با فاصله در پنجره Styles.

همچنین نحو را در قسمت Computed و راهنمای ابزار Inspect Mode را خواهید دید.

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

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

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

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

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

بخش خصوصیات منسوخ شده.

مراجع:

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

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

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

میانبرهای برنامه در قسمت Manifest.

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

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

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

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

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

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