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

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

Kayce Basques

تقلید از کمبودهای بینایی

برگه Rendering را باز کنید و از ویژگی جدید Emulate vision deficiencies استفاده کنید تا ایده بهتری درباره نحوه تجربه افراد با انواع کمبودهای بینایی سایت خود داشته باشید.

تقلید تاری دید

DevTools می تواند تاری دید و انواع زیر از کمبودهای دید رنگی را تقلید کند:

پروتانوپیا: ناتوانی در درک هر نور قرمز.
دوترانوپیا: ناتوانی در درک هر نور سبز.
Tritanopia: ناتوانی در درک هر نور آبی.
آکروماتوپسی: ناتوانی در درک هر رنگی به جز سایه های خاکستری (بسیار نادر).

نسخه های کمتر افراطی از این کمبودهای دید رنگی وجود دارد و در واقع رایج تر هستند. به عنوان مثال، پروتانومالی کاهش حساسیت به نور قرمز است (در مقابل پروتانوپیا ، که ناتوانی کامل در درک نور قرمز است). با این حال، این کمبودهای بینایی "-omaly" به وضوح تعریف نشده اند: هر فردی با چنین کمبود بینایی متفاوت است و ممکن است چیزها را متفاوت ببیند (توانایی درک بیشتر یا کمتر رنگ های مربوطه).

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

بازخورد خود را به شماره 1003700 Chromium ارسال کنید یا درباره پیاده سازی آن بیشتر بخوانید .

شبیه سازی مناطق

اکنون می‌توانید با تنظیم یک مکان در Sensors > Location ، زبان‌های محلی را شبیه‌سازی کنید. منوی فرمان را باز کنید و Sensors تایپ کنید تا به تب Sensors دسترسی پیدا کنید. پس از انجام این اقدامات، DevTools محلی پیش فرض فعلی را تغییر می دهد و بر موارد زیر تأثیر می گذارد:

Intl.* APIها، به عنوان مثال new Intl.NumberFormat().resolvedOptions().locale
سایر APIهای جاوا اسکریپت آگاه از زبان مانند String.prototype.localeCompare و *.prototype.toLocaleString ، به عنوان مثال 123_456..toLocaleString()
APIهای DOM مانند navigator.language و navigator.languages
هدر درخواست HTTP Accept-Language

توجه: به‌روزرسانی‌های navigator.language و navigator.languages بلافاصله قابل مشاهده نیستند، اما فقط پس از پیمایش بعدی یا بارگذاری مجدد صفحه. تغییرات در هدر Accept-Language HTTP فقط برای درخواست‌های بعدی منعکس می‌شود.

نمونه کد وابسته به Locale را بررسی کنید تا خودتان آن را امتحان کنید.

برای Chromium شماره 1051822 بازخورد ارسال کنید.

اشکال زدایی خط مشی جاسازی متقابل (COEP).

اکنون پانل شبکه اطلاعات اشکال زدایی خط مشی جاسازی Cross-Origin را ارائه می دهد.

اکنون ستون Status توضیح سریعی درباره دلیل مسدود شدن یک درخواست و همچنین پیوندی برای مشاهده سرصفحه های آن درخواست برای اشکال زدایی بیشتر ارائه می دهد:

درخواست های مسدود شده در ستون وضعیت

بخش Response Headers در تب Headers راهنمایی های بیشتری در مورد نحوه حل مشکلات ارائه می دهد:

راهنمایی بیشتر در بخش سرصفحه پاسخ

برای Chromium شماره 1051466 بازخورد ارسال کنید.

نمادهای جدید برای نقاط شکست، نقاط شکست شرطی و نقاط ورود

پانل منابع دارای نمادهای جدیدی برای نقاط شکست، نقاط شکست شرطی و نقاط ورود است:

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

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

برای Chromium شماره 1041830 بازخورد ارسال کنید.

از کلمه کلیدی فیلتر cookie-path جدید در پانل شبکه برای تمرکز بر روی درخواست های شبکه که یک مسیر کوکی خاص را تنظیم می کنند، استفاده کنید.

برای کشف کلیدواژه‌های خاص‌تر مانند cookie-path درخواست‌های فیلتر براساس ویژگی‌ها را بررسی کنید.

از منوی فرمان به سمت چپ متصل شوید

منوی فرمان را باز کنید و دستور Dock to left را اجرا کنید تا DevTools را به سمت چپ نمای خود منتقل کنید.

DevTools به سمت چپ نمای درگاه متصل شده است

برای Chromium شماره 1011679 بازخورد ارسال کنید.

گزینه `Settings` در منوی اصلی منتقل شده است

اکنون می‌توانید گزینه باز کردن تنظیمات از منوی اصلی را در زیر ابزارهای بیشتر پیدا کنید.

برای Chromium شماره 1050855 بازخورد ارسال کنید.

پنل ممیزی اکنون پنل Lighthouse است

تیم‌های DevTools و Lighthouse اغلب بازخوردهایی از توسعه‌دهندگان وب دریافت می‌کردند مبنی بر اینکه می‌شنیدند که می‌توان Lighthouse را از DevTools اجرا کرد، اما وقتی آن‌ها را امتحان کردند، نتوانستند پنل "Lighthouse" را پیدا کنند، بنابراین پنل حسابرسی اکنون پانل فانوس دریایی .

پانل فانوس دریایی

تمام لغوهای محلی را در یک پوشه حذف کنید

پس از تنظیم Local Overrides ، اکنون می توانید روی یک پوشه کلیک راست کرده و گزینه جدید Delete all overrides را انتخاب کنید تا همه Local Overrides در آن پوشه حذف شوند.

حذف همه موارد لغو

برای Chromium شماره 1016501 بازخورد ارسال کنید.

رابط کاربری طولانی وظایف به روز شده است

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

مدتی است که می‌توانید Long Tasks را در پانل عملکرد تجسم کنید ، اما در Chrome 83 رابط کاربری تجسم وظایف طولانی در پانل عملکرد به‌روزرسانی شده است. بخش Long Task یک کار اکنون با پس زمینه قرمز راه راه رنگ شده است.

رابط کاربری جدید Long Task

برای Chromium شماره 1054447 بازخورد ارسال کنید.

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

اندروید اوریو آیکون‌های تطبیقی را معرفی کرد که آیکون‌های برنامه‌ها را به اشکال مختلف در مدل‌های مختلف دستگاه نمایش می‌دهند. نمادهای ماسک پذیر یک قالب نماد جدید است که از نمادهای تطبیقی پشتیبانی می کند، که به شما امکان می دهد مطمئن شوید که نماد PWA شما در دستگاه هایی که از استاندارد آیکون های ماسک پذیر پشتیبانی می کنند خوب به نظر می رسد.

برای بررسی اینکه آیا نماد ماسک‌پذیر شما در دستگاه‌های Android Oreo خوب به نظر می‌رسد، کادر جدید Show only the minimum area safe for icons maskable را در کادر Manifest فعال کنید. بررسی کنید آیا نمادهای فعلی من آماده هستند؟ برای یادگیری بیشتر

کادر انتخاب «فقط حداقل منطقه ایمن برای نمادهای قابل ماسک نمایش داده شود».

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

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

تماس با تیم Chrome DevTools

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

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