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

کیسی باسکی

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

برگه 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

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

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

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