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

Jecelyn Yeen

اطلاعات Web Vitals در پنل Performance ظاهر می شود

ماوس را روی یک نشانگر Web Vitals در پانل عملکرد قرار دهید تا متوجه شوید که این شاخص در مورد چیست - آیا عملکرد خوب است، نیاز به بهبود دارد یا ضعیف.

شماره Chromium: 1147872

تجسم CSS scroll-snap

اکنون می توانید نشان scroll-snap را در پانل عناصر تغییر دهید تا ترازبندی اسکرول-اسنپ CSS را بررسی کنید.

هنگامی که یک عنصر HTML در صفحه شما (مثلاً این صفحه نمایشی ) دارای scroll-snap-type روی آن اعمال می شود، می توانید یک نشان scroll-snap را در کنار آن در پانل عناصر ببینید. روی نشان کلیک کنید تا نمایش یک پوشش اسکرول روی صفحه تغییر دهید.

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

شماره کرومیوم: 862450

بازرس جدید حافظه

از بازرس حافظه جدید برای بازرسی ArrayBuffer در جاوا اسکریپت و همچنین حافظه Wasm استفاده کنید.

این صفحه نمایشی را باز کنید. در پنل Sources ، فایل demo-js.js را باز کنید و یک نقطه شکست در خط 18 قرار دهید.

صفحه را رفرش کنید. بخش Scope را در قسمت سمت راست دیباگر باز کنید. به نماد جدید در کنار مقدار بافر توجه کنید. روی آن کلیک کنید تا Memory Inspector نمایان شود.

برای کسب اطلاعات بیشتر درباره بازرسی جاوا اسکریپت ArrayBuffer و WebAssembly.Memory با این بازرس حافظه جدید، اسناد را بررسی کنید.

شماره Chromium: 1166577

پنجره تنظیمات نشان جدید در پانل عناصر

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

در پنل Elements ، روی هر عنصر کلیک راست کنید. تنظیمات نشان را از منوی زمینه انتخاب کنید، صفحه تنظیمات نشان در بالا ظاهر می شود. برای نمایش/پنهان کردن نشان‌ها، هر چک باکس را فعال یا غیرفعال کنید.

شماره Chromium: 1066772

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

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

این اطلاعات به شما کمک می کند تا تصاویر خود را بهتر درک کنید و در صورت نیاز بهینه سازی را اعمال کنید.

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

مسائل Chromium: 1149832 ، 1170656

دکمه شرایط شبکه جدید با گزینه هایی برای پیکربندی Content-Encoding s

یک دکمه جدید شرایط شبکه در پانل شبکه اضافه می شود. روی آن کلیک کنید تا تب Network condition باز شود.

یک گزینه Accepted Content-Encodings جدید به تب شرایط شبکه اضافه می شود. آن را برای آزمایش اینکه آیا پاسخ های سرور در مرورگرهایی که gzip، brotli، یا دیگر Content-Encoding آینده را پشتیبانی نمی کنند، به درستی کدگذاری شده اند، پیکربندی کنید.

شماره Chromium: 1162042

ارتقاء قاب سبک

میانبر جدید برای مشاهده مقدار محاسبه شده در صفحه Styles

اکنون می‌توانید روی یک ویژگی CSS در صفحه Styles کلیک راست کرده و View computed value را انتخاب کنید تا مقدار CSS محاسبه‌شده را مشاهده کنید.

شماره Chromium: 1076198

پشتیبانی از کلمه کلیدی accent-color

رابط کاربری تکمیل خودکار پنجره Styles اکنون کلمه کلیدی CSS accent-color تشخیص می‌دهد، که به توسعه‌دهندگان وب اجازه می‌دهد تا رنگ تاکیدی را برای کنترل‌های UI (مثلا کادر انتخاب، دکمه رادیویی) تولید شده توسط عنصر مشخص کنند.

ویژگی accent-color CSS در حال حاضر آزمایشی است. لطفاً chrome://flags/#enable-experimental-web-platform-features برای آزمایش آن فعال کنید.

شماره Chromium: 1092093

انواع مسئله را با رنگ ها و نمادها دسته بندی کنید

تب Issues اکنون مشکلات را به خطاهای صفحه، تغییرات شکسته آتی و بهبودهای احتمالی برای نشان دادن شدت بهتر دسته بندی می کند. می‌توانید با کلیک بر روی دکمه شمارش مشکلات در کنسول، تب Issues را باز کنید.

• خطاهای صفحه (قرمز) . مسائلی که تأثیر فوری بر عملکرد صفحه دارند، مانند تنظیم نکردن هدرهای CORS صحیح و غیره.
• تغییرات شکست آینده (زرد) . مسائلی که در مورد یک تغییر آتی و ناسازگار در پلتفرم وب که ممکن است منجر به از دست دادن عملکرد صفحه شود (به عنوان مثال هشدار در مورد تغییرات آینده CORS RFC 1918 ) خبر می دهد.
• بهبودهای احتمالی (آبی) . بهبودهای بالقوه در صفحه، اما در حال حاضر به عملکرد اصلی صفحه آسیب نمی رساند (مثلاً مشکلات دسترسی)

شماره Chromium: 1183241

توکن های Trust را حذف کنید

اکنون می‌توانید نشانه‌های اعتماد را با دکمه حذف جدید در پنل Trust Tokens در زیر پنل برنامه حذف کنید.

Trust Token یک API جدید برای کمک به مبارزه با کلاهبرداری و تشخیص ربات ها از انسان های واقعی، بدون ردیابی غیرفعال است. یاد بگیرید که چگونه با Trust Tokens شروع کنید .

شماره Chromium: 1126824

جزئیات مربوط به ویژگی های مسدود شده را در نمای جزئیات قاب مشاهده کنید

اکنون می توانید جزئیات مربوط به ویژگی های مسدود شده را در بخش خط مشی مجوزها در نمای جزئیات قاب مشاهده کنید.

این صفحه نمایشی را باز کنید. به پنل Application رفته و یک فریم را انتخاب کنید. در بخش Permissions Policy ، به ویژگی Disabled Features بروید. برای مشاهده جزئیات در مورد دلیل مسدود شدن این ویژگی، روی Show details کلیک کنید. روی نماد کنار هر خط مشی کلیک کنید تا به درخواست iframe یا شبکه ای که این ویژگی را مسدود کرده است بروید.

خط‌مشی مجوزها یک API پلتفرم وب است که به وب‌سایت این امکان را می‌دهد تا استفاده از ویژگی‌های مرورگر را در قاب خودش یا در iframe‌هایی که جاسازی می‌کند مجاز یا مسدود کند.

شماره Chromium: 1158827

آزمایش‌ها را در تنظیمات آزمایش‌ها فیلتر کنید

با فیلتر آزمایشی جدید، آزمایش‌ها را سریع‌تر پیدا کنید. به عنوان مثال، به تنظیمات > آزمایش‌ها بروید، در کادر متنی فیلتر ، «کنتراست» را تایپ کنید تا همه آزمایش‌ها با کلمه «کنتراست» فیلتر شوند.

ستون جدید Vary Header در پنجره ذخیره سازی Cache

برای مشاهده سرصفحه پاسخ HTTP Vary از ستون جدید Vary Header در صفحه ذخیره کش استفاده کنید.

شماره Chromium: 1186049

بهبود پنل منابع

پشتیبانی از ویژگی های جدید جاوا اسکریپت

DevTools اکنون از ویژگی زبان JavaScript بررسی برند خصوصی جدید، با نام #foo in obj پشتیبانی می‌کند.

این ویژگی بررسی نام تجاری خصوصی ، عملگر in را برای پشتیبانی از آزمایش فیلدهای کلاس خصوصی بر روی هر شی معین گسترش می دهد.

آن را در پنل Console and Sources امتحان کنید. همچنین می‌توانید فیلدهای خصوصی را در بخش Scope زیر صفحه اشکال‌زدا بررسی کنید.

شماره کرومیوم: 11374

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

DevTools اکنون به درستی نقاط شکست را در چندین اسکریپت به درستی تنظیم می کند. بسته‌کننده‌های جاوا اسکریپت مدرن (به‌عنوان مثال Webpack ، Rollup ) از ویژگی تقسیم کد پشتیبانی می‌کنند - سناریوهایی وجود دارد که در آن یک جزء مشترک می‌تواند در چندین مسیر گنجانده شود (تقسیم کد).

پیش از این، DevTools تنها می‌توانست نقاط شکست را در یک مکان خام تنظیم کند. با این آخرین پیشرفت، DevTools می تواند نقاط شکست را در همه مکان های مربوطه به درستی تنظیم کند.

مشکلات Chromium: 1142705 , 979000 , 1180794

از پیش نمایش شناور با نماد [] پشتیبانی کنید

DevTools اکنون از پیش نمایش شناور در عبارات اعضای جاوا اسکریپت که از نماد [] در پانل Sources استفاده می کنند، پشتیبانی می کند.

شماره Chromium: 1178305

طرح کلی فایل های HTML بهبود یافته است

DevTools اکنون از فایل های HTML پشتیبانی بهتری دارد. در پانل منابع ، یک فایل HTML را باز کنید. می توانید طرح کلی کد را با صفحه کلید Cmd + Shift + O در مک یا Ctrl + Shift + O در ویندوز تغییر دهید.

در مثال زیر، DevTools اکنون همه توابع موجود در طرح کلی را به درستی فهرست می کند. قبلاً DevTools فقط برخی از توابع را نشان می داد.

شماره Chromium: 761019 ، 1191465

ردیابی پشته خطای مناسب برای اشکال زدایی Wasm

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

قبلاً DevTools فقط ارجاعات Wasm عمومی را در ردیابی پشته خطا نمایش می داد.

نسخه قدیمی کروم در سمت چپ، مکان منبع (مثلاً dsquare ) را در Error stack traces نشان نمی دهد، در حالی که نسخه جدید در سمت راست نشان می دهد.

شماره Chromium: 1189161

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

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

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

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

• بازخورد و درخواست های ویژگی را برای ما در crbug.com ارسال کنید.
• یک مشکل DevTools را با استفاده از more_vert گزینه های بیشتر > راهنما > گزارش مشکل DevTools در DevTools گزارش کنید.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد موارد جدید در ویدیوهای DevTools YouTube یا DevTools Tips ویدیوهای YouTube بگذارید.

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

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