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

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

Jecelyn Yeen

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

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

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

شماره Chromium: 1147872

تجسم CSS scroll-snap

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

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 آینده را پشتیبانی نمی کنند، به درستی کدگذاری شده اند، پیکربندی کنید.

دکمه شرایط شبکه جدید با گزینه هایی برای پیکربندی 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 شروع کنید .

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

شماره 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 فقط برخی از توابع را نشان می داد.

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

شماره Chromium: 761019 ، 1191465

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

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

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

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

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

شماره Chromium: 1189161

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

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

تماس با تیم Chrome DevTools

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

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