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

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

Sofia Emelianova

مجموعه رسمی برنامه‌های افزودنی Recorder زنده است

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

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

بهبود شبکه

این نسخه تعدادی پیشرفت را در پنل شبکه به ارمغان می آورد.

دلیل شکست در ستون وضعیت

ستون وضعیت اکنون همیشه یک دلیل شکست را نشان می دهد. قبلاً باید check_box ردیف‌های درخواست بزرگ را روشن می‌کردید یا درخواست را در جدول انتخاب می‌کردید.

قبل و بعد از نشان دادن دلیل شکست در ستون وضعیت.

مسائل Chromium: 1506760 .

زیر منوی کپی بهبود یافته

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

قبل و بعد از بهبود زیر منوی کپی.

علاوه بر این، گزینه Copy as cURL اکنون دستور صحیح را در کلیپ بورد ویندوز کپی می کند.

مسائل Chromium: 1267033 ، 1276452 ، 798498 .

بهبود عملکرد

این نسخه تعدادی بهبود در پنل Performance به ارمغان می آورد.

خرده نان در جدول زمانی

جدول زمانی در بالای پانل Performance اکنون به شما امکان می‌دهد خرده‌های نان را تنظیم کرده و بین آنها بپرید.

برای تنظیم یک پودر سوخاری، یک محدوده را در Timeline انتخاب کنید، نشانگر را روی آن نگه دارید و روی دکمه N ms zoom_in کلیک کنید. می توانید چندین پودر سوخاری تو در تو پشت سر هم ایجاد کنید. برای پرش بین سطوح بزرگنمایی، روی پودر سوخاری مربوطه در زنجیره بالای جدول زمانی کلیک کنید. ویدیوی بعدی را تماشا کنید تا پودر سوخاری را در عمل ببینید.

مسائل Chromium: 1467739 .

آغازگر رویداد در مسیر اصلی

اکنون مسیر Performance > Main به طور پیش‌فرض، فلش‌هایی را نشان می‌دهد که آغازگرها و رویدادهای زیر را به هم متصل می‌کنند.

باطل کردن سبک یا طرح -> محاسبه مجدد سبک ها یا طرح بندی
درخواست قاب انیمیشن -> قاب انیمیشن فعال شد
Request Idle Callback -> Fire Idle Callback
تایمر -> Timer Fired را نصب کنید
ایجاد WebSocket -> ارسال... و دریافت WebSocket Handshake یا نابود کردن WebSocket

برای دیدن فلش ها، چنین رویدادی را در ردیابی پیدا کنید و روی آن کلیک کنید. قبلاً این ویژگی یک آزمایش بود.

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

مسائل Chromium: 1434596 .

در پانل عملکرد Node.js DevTools، اکنون می توانید یک نمونه جاوا اسکریپت VM را از منوی کشویی مربوطه در نوار عمل انتخاب کنید. ویژگی مشابهی در JavaScript Profiler که به زودی منسوخ خواهد شد در دسترس بود.

قبل و بعد از افزودن یک منوی جدید که به شما امکان می‌دهد یک نمونه جاوا اسکریپت VM را انتخاب کنید.

مسائل Chromium: 1511813 .

بهبود عناصر

این نسخه تعدادی پیشرفت را در پنل Elements به ارمغان می آورد.

علاوه بر دو ویژگی بعدی، پانل Elements اکنون آخرین برگه ای را که باز کرده اید به خاطر می آورد، به عنوان مثال Computed یا Properties .

شبه عنصر `::view-transition` اکنون در Styles قابل ویرایش است

اکنون می توانید شبه عناصر CSS ::view-transition در Styles با استفاده از شیوه نامه بازرس ویرایش کنید.

پشتیبانی قبل و بعد از ویرایش از شبه عناصر view-transition.

برای اطلاعات بیشتر، انتقال صاف و ساده با View Transitions API را ببینید.

مسائل Chromium: 1511233 .

پشتیبانی از ویژگی `align-content` برای کانتینرهای بلوک

ویژگی align-content اکنون با هر محفظه بلوکی از جمله table-caption و table-cell کار می کند. قبلا فقط با گرید و فلکس کار می کرد.

پشتیبانی قبل و بعد از تراز محتوا در ظروف بلوکی.

مسائل Chromium: 1500511 .

میانبر و دستور جدید در Sources

اکنون می توانید Cmd (Mac) / Ctrl (Win) + Shift + روی یک شماره خط در Sources کلیک کنید تا یک logpoint ایجاد کنید. این میانبر افزودنی به Cmd (Mac) / Ctrl (Win) + کلیک برای نقاط شکست شرطی موجود است.

منوی فرمان فایل فعال جدید Reveal را در فرمان نوار کناری ناوبری دریافت می کند که همان گزینه مربوطه را در منوی کشویی ویرایشگر انجام می دهد.

دستور جدید برای نمایش فایل فعال در نوار کناری ناوبر.

مسائل Chromium: 1486933 ، 1467464 .

پشتیبانی از وضعیت بدن برای دستگاه های تاشو شبیه سازی شده

حالت دستگاه اکنون به شما امکان می دهد وضعیت یک دستگاه تاشو شبیه سازی شده را تنظیم کنید: پیوسته یا تا شده . وضعیت ممتد به یک موقعیت "مسطح" اشاره دارد و تا شده یک زاویه بین بخش های نمایشگر را تشکیل می دهد.

یک منوی کشویی با گزینه های وضعیت بدن.

علاوه بر این، لیست دستگاه ها یک دستگاه تاشو شبیه سازی شده جدید دریافت می کند: Asus Zenbook Fold.

شماره Chromium: 1066842 .

موضوع بندی پویا

DevTools اکنون به طور خودکار با تم رنگی کروم مطابقت دارد. برای تنظیم موضوع:

یک تب جدید باز کنید و روی ویرایش سفارشی کردن کروم در گوشه پایین سمت راست کلیک کنید.
در Appearance، یک طرح زمینه را از طریق کاغذ دیواری انتخاب کنید. تم ها را تغییر دهید یا یک پالت رنگ را انتخاب کنید.

DevTools با تم رنگی انتخاب شده در Appearance مطابقت دارد.

مسائل Chromium: 1483276 .

هشدارهای حذف تدریجی کوکی های شخص ثالث در پانل های شبکه و برنامه

هر دو پانل شبکه و برنامه اکنون اخطارهایی را در کنار کوکی‌های تحت تأثیر محدودیت‌های شخص ثالث از «محافظت ردیابی» برجسته و نشان می‌دهند.

در Network ، درخواستی را با نماد هشدار اخطار پیدا کنید، روی آن کلیک کنید و برگه Cookies را باز کنید.

قبل و بعد از گرفتن کوکی های شخص ثالث در پانل شبکه.

در برنامه ، به Storage > Cookies بروید و روی یک دامنه کلیک کنید. کوکی هایی که با رنگ زرد مشخص شده اند در مرورگر ذخیره نمی شوند.

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

ماوس را روی نماد هشدار نگه دارید تا راهنمایی ابزاری را ببینید که مشکلات را توضیح می دهد و روی نماد کلیک کنید تا برگه Issues با اطلاعات بیشتر باز شود.

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

مسائل Chromium: 1506225 ، 1503961 .

فانوس دریایی 11.4.0

پنل Lighthouse اکنون Lighthouse 11.4.0 را اجرا می کند. لیست کامل تغییرات را ببینید. در میان تغییرات قابل توجه، ممیزی جدید است که به شما امکان می دهد تشخیص دهید آیا وب سایت شما هنوز از کوکی های شخص ثالث استفاده می کند یا خیر.

ممیزی که کوکی های شخص ثالث را شناسایی می کند.

برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.

شماره Chromium: 772558 .

دسترسی

این نسخه دارای بهبودهای دسترسی زیر است:

وقتی تنظیمات تنظیمات > آزمایش‌ها را باز می‌کنید، اکنون کادر جستجو به‌طور خودکار در فوکوس است.
دکمه لغو پاک کردن ورودی در Network > Filter اکنون قابل فوکوس است.
درخت فایل در منابع > صفحه اکنون به درستی در حالت کنتراست بالا نمایش داده می شود.
اکنون صفحه خوان ها به درستی موارد زیر را اعلام می کنند:
- وضعیت چک باکس ها در منابع > نقاط شکست .
- اطلاعات موقعیت و فهرست برای لیستی از پیشنهادات.
- نتیجه اقدام هنگام افزودن یا حذف یک مکان در تنظیمات تنظیمات > مکان‌ها .
- گروه‌هایی از قوانین حذف (عمومی یا سفارشی) در تنظیمات تنظیمات > فهرست نادیده گرفته می‌شود .

مسائل کروم: 1504938 ، 1499868 ، 1512161 ، 1515224 ، 1515418 ، 1516998 ، 1517015 .

نکات برجسته متفرقه

برخی از اصلاحات و بهبودهای قابل توجه در این نسخه عبارتند از:

تصاوير متحرك :
- رفع اشکال با رندر خارج از محدوده پاپاور اسکرین شات ( 1506991 ).
- رفع اشکال با گره های انیمیشن حذف شده که به عنوان حذف علامت گذاری نشده بودند ( 1506561 ).
شبکه :
- لغو سرصفحه : یک اشکال با نماد نقطه بنفش کاذب در برگه سرصفحه ( 1507856 ) رفع شد.
- پیش نمایش : رفع یک اشکال با رمزگشایی مضاعف غیر ضروری ( 1509336 ).
- رفع اشکالی که به دلیل عدم نمایش درخواست‌های کوتاه ( 1509862 ).
Application > IndexedDB : دکمه‌های مرتب شده در نوار عمل برای سازگاری با سایر پانل‌ها ( 1393800 ).
حسگرها : رفع یک اشکال با موقعیت مکانی در دسترس نادرست پاسخ تماس موفق ( 1486859 ).
کارایی :
- دکمه جمع آوری زباله اکنون یک نماد مناسب دارد، "مپ" به جای "بین" ( 1507530 ).
- ردیابی عملکرد اکنون داده ها را هنگام پیمایش به about:blank ( 1509947 ) حفظ می کند.

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

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

تماس با تیم Chrome DevTools

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

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