چیزهای جدید در 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 .

منوی انتخاب نمونه VM جاوا اسکریپت برای Node.js DevTools

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

مسائل Chromium: 1511813 .

بهبود عناصر

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

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

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

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

برای اطلاعات بیشتر، انتقال صاف و ساده با 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 اکنون به طور خودکار با تم رنگی کروم مطابقت دارد. برای تنظیم موضوع:

1. یک تب جدید باز کنید و روی ویرایش سفارشی کردن کروم در گوشه پایین سمت راست کلیک کنید.
2. در 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 ما بنویسید.

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

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