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

Kayce Basques

تقلید از نقص‌های بینایی

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

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

DevTools می‌تواند تاری دید و انواع نقص‌های دید رنگی زیر را شبیه‌سازی کند:

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

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

با طراحی برای شبیه‌سازی‌های شدیدتر در DevTools، تضمین می‌شود که برنامه‌های وب شما برای افرادی که دارای protanomaly، ​​deuteranomaly، ​​tritanomaly و achromatomaly هستند نیز قابل دسترسی باشند.

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

شبیه‌سازی مکان‌ها

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

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

برای امتحان کردن خودتان ، نمونه کد وابسته به زبان را بررسی کنید.

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

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

پنل شبکه اکنون اطلاعات اشکال‌زدایی سیاست جاسازی متقابل مبدا (Cross-Origin Embedder Policy) را ارائه می‌دهد.

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

بخش «سرصفحه‌های پاسخ» از تب «سرصفحه‌ها» راهنمایی بیشتری در مورد چگونگی حل مشکلات ارائه می‌دهد:

بازخورد خود را به مشکل شماره ۱۰۵۱۴۶۶ کرومیوم ارسال کنید.

آیکون‌های جدید برای نقاط توقف، نقاط توقف شرطی و نقاط ثبت وقایع

پنل منابع (Sources) آیکون‌های جدیدی برای نقاط شکست (breakpoints)، نقاط شکست شرطی (conditional breakpoints) و نقاط ثبت وقایع (logpoints) دارد:

• نقاط شکست با دایره‌های قرمز نشان داده شده‌اند.
• نقاط شکست شرطی با دایره‌های نیمه قرمز و نیمه سفید نمایش داده می‌شوند.
• نقاط ثبت وقایع با دایره‌های قرمز با آیکون‌های کنسول نمایش داده می‌شوند.

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

بازخورد خود را به مشکل شماره ۱۰۴۱۸۳۰ کرومیوم ارسال کنید.

مشاهده درخواست‌های شبکه که مسیر کوکی خاصی را تعیین می‌کنند

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

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

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

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

بازخورد خود را به مشکل شماره ۱۰۱۱۶۷۹ کرومیوم ارسال کنید.

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

گزینه باز کردن تنظیمات از منوی اصلی، اکنون در زیر ابزارهای بیشتر (More Tools) قابل دسترسی است.

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

پنل Audits اکنون پنل Lighthouse است.

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

تمام Local Overrides را در یک پوشه حذف کنید

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

بازخورد خود را به مشکل شماره ۱۰۱۶۵۰۱ کرومیوم ارسال کنید.

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

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

مدتی است که می‌توانید وظایف طولانی (Long Tasks) را در پنل Performance مشاهده کنید ، اما در کروم ۸۳ رابط کاربری نمایش وظایف طولانی (Long Task) در پنل Performance به‌روزرسانی شده است. بخش وظایف طولانی (Long Task) یک وظیفه اکنون با پس‌زمینه‌ای راه‌راه قرمز رنگ‌آمیزی شده است.

بازخورد خود را به مشکل شماره ۱۰۵۴۴۴۷ کرومیوم ارسال کنید.

پشتیبانی از آیکون‌های قابل ماسک شدن در پنل Manifest

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

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

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

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

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

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

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

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

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