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

سوفیا املیانوا
Sofia Emelianova
GitHub

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

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

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

بهبود شبکه

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

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

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

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

مسائل Chromium: 1506760 .

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

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

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

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

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

بهبود عملکرد

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

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

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

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

مسائل 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 که به زودی منسوخ خواهد شد در دسترس بود.

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

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

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

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