این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

Kayce Basques

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

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

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

برگه مسائل.

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

اکنون راهنمای ابزار 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 استفاده کنید.

پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنید > راهنما > گزارش مشکلات DevTools در DevTools.
توییت در @ChromeDevTools .
نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.