چیزهای جدید در 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 پوشش داده شده است.

،

صوفیه املیانوا
Sofia Emelianova
GitHub

مجموعه رسمی پسوندهای ضبط کننده زنده است

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

برای باز کردن مجموعه مستقیم از ضبط ، Export > Get Extensions ... را در نوار اکشن در بالای صفحه ضبط انتخاب کنید.

پیشرفت شبکه

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

دلیل عدم موفقیت در ستون وضعیت

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

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

مشکلات کروم: 1506760 .

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

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

قبل و بعد از بهبود زیرمنو نسخه.

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

مشکلات کروم: 1267033 ، 1276452 ، 798498 .

بهبود عملکرد

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

آرد سوخاری در جدول زمانی

جدول زمانی در بالای صفحه عملکرد اکنون به شما امکان می دهد تا نان های نان را تنظیم کرده و بین آنها پرش کنید.

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

مشکلات کروم: 1467739 .

مبتکران رویداد در مسیر اصلی

عملکرد > آهنگ اصلی به طور پیش فرض در حال حاضر فلش هایی را که مبتکران و رویدادهای زیر را ایجاد می کنند نشان می دهد.

  • بی اعتبار بودن سبک یا طرح -> سبک ها یا طرح بندی مجدد را محاسبه کنید
  • قاب انیمیشن را درخواست کنید -> قاب انیمیشن اخراج شد
  • درخواست پاسخ به تماس بیکار -> بازگشت به تماس با آتش سوزی
  • تایمر را نصب کنید -> تایمر اخراج شده است
  • ایجاد WebSocket -> ارسال ... و دریافت WebSocket Handshake یا WebSocket را نابود کنید

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

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

مشکلات کروم: 1434596 .

منوی انتخاب کننده نمونه جاوا اسکریپت VM برای node.js devtools

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

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

مشکلات کروم: 1511813 .

بهبود عناصر

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

علاوه بر دو ویژگی بعدی ، پانل عناصر اکنون آخرین برگه ای را که باز کرده اید ، به عنوان مثال محاسبه شده یا خواص به یاد می آورد.

The ::view-transition Pseue-Element اکنون در سبک ها قابل ویرایش است

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

قبل و بعد از ویرایش پشتیبانی از نمایشگاه های شبه نمایندگی.

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

مشکلات کروم: 1511233 .

پشتیبانی از املاک و align-content برای ظروف بلوک

خاصیت align-content در حال حاضر با هر ظروف بلوک ، از جمله table-caption و table-cell کار می کند. پیش از این ، فقط با شبکه و فلکس کار می کرد.

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

مشکلات کروم: 1500511 .

میانبر و فرمان جدید در منابع

اکنون می توانید CMD (MAC) / CTRL (WIN) + SHIFT + روی منابع روی منابع کلیک کنید تا یک نقطه ورود به سیستم ایجاد شود. این میانبر علاوه بر CMD (MAC) / CTRL (WIN) موجود در حال حاضر موجود است + برای نقاط شکست شرطی کلیک کنید.

منوی Command File Active New Active را در دستور نوار کناری Navigator دریافت می کند که همان گزینه مربوطه را در منوی کشویی ویرایشگر انجام می دهد.

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

شماره های کروم: 1486933 ، 1467464 .

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

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

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

علاوه بر این ، لیست دستگاه ها یک دستگاه تاشو جدید تقلید شده را دریافت می کند: ASUS ZenBook Fold.

شماره کروم: 1066842 .

مضمون پویا

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

  1. یک برگه جدید را باز کنید و Customize Chrome در گوشه پایین سمت راست کلیک کنید.
  2. از نظر ظاهری ، یک موضوع را از طریق مضامین تغییر انتخاب کنید یا یک پالت رنگی را انتخاب کنید.

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

مشکلات کروم: 1483276 .

هشدارهای فاز کوکی های شخص ثالث در پانل های شبکه و برنامه

هر دو پانل های شبکه و برنامه اکنون هشدارهایی را در کنار کوکی های تحت تأثیر محدودیت های شخص ثالث از ردیابی محافظت نشان داده و نشان می دهند.

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

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

در برنامه ، به ذخیره سازی > کوکی ها بروید و روی یک دامنه کلیک کنید. کوکی های برجسته به رنگ زرد در مرورگر ذخیره نمی شوند.

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

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

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

مشکلات کروم: 1506225 ، 1503961 .

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

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

حسابرسی که کوکی های شخص ثالث را تشخیص می دهد.

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

شماره کروم: 772558 .

قابلیت دسترسی

این نسخه پیشرفت های دسترسی زیر را دارد:

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

شماره های کروم: 1504938 ، 1499868 ، 1512161 ، 1515224 ، 1515418 ، 1516998 ، 1517015 .

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

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

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

کانال های پیش نمایش را بارگیری کنید

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

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

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

آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.

،

Sofia Emelianova
Sofia Emelianova
GitHub

The official collection of Recorder extensions is live

The official collection of export and replay Recorder extensions is now live.

To open the collection directly from the Recorder , select Export > Get extensions... on the action bar at the top of the Recorder panel.

Network improvements

This version brings a number of improvements to the Network panel.

Failure reason in the Status column

The Status column now always shows a failure reason. Previously, you had to turn on Big request rows or select the request in the table.

The before and after showing failure reason in the Status column.

Chromium issues: 1506760 .

Improved Copy submenu

The Copy submenu of a request is now better organized.

The before and after improving the Copy submenu.

Additionally, the Copy as cURL option now copies the correct command to clipboard on Windows.

Chromium issues: 1267033 , 1276452 , 798498 .

بهبود عملکرد

This version brings a number of improvements to the Performance panel.

Breadcrumbs in the Timeline

The Timeline at the top of the Performance panel now lets you set breadcrumbs and jump between them.

To set a breadcrumb, select a range on the Timeline , hover over it, and click the N ms button. You can create several nested breadcrumbs in succession. To jump between zoom levels, click the corresponding breadcrumb in the chain on top of the Timeline . Watch the next video to see breadcrumbs in action.

Chromium issues: 1467739 .

Event initiators in the Main track

The Performance > Main track by default now shows arrows connecting initiators and the following events they caused.

  • Style or layout invalidation -> Recalculate styles or Layout
  • Request Animation Frame -> Animation Frame Fired
  • Request Idle Callback -> Fire Idle Callback
  • Install Timer -> Timer Fired
  • Create WebSocket -> Send... and Receive WebSocket Handshake or Destroy WebSocket

To see the arrows, find such an event in the trace and click it. Previously, this feature was an experiment.

An arrow from the request and firing of an idle callback.

Chromium issues: 1434596 .

JavaScript VM instance selector menu for Node.js DevTools

In the Performance panel of Node.js DevTools, you can now select a JavaScript VM instance from the corresponding drop-down menu in the action bar. A similar feature was available in the soon-to-be-deprecated JavaScript Profiler .

The before and after adding a new menu that lets you select a JavaScript VM instance.

Chromium issues: 1511813 .

Elements improvements

This version brings a number of improvements to the Elements panel.

In addition to the next two features, the Elements panel now remembers the last tab you opened, for example Computed or Properties .

The ::view-transition pseudo-element is now editable in Styles

You can now edit the ::view-transition CSS pseudo-elements in Styles using the inspector style sheet.

The before and after editing support of view-transition pseudo-elements.

For more information, see Smooth and simple transitions with the View Transitions API .

Chromium issues: 1511233 .

The align-content property support for block containers

The align-content property now works with any block containers , including table-caption and table-cell . Previously, it worked only with grid and flex.

The before and after align-content support in block containers.

Chromium issues: 1500511 .

New shortcut and command in Sources

You can now Cmd (Mac) / Ctrl (Win) + Shift + click a line number in Sources to create a logpoint. This shortcut is an addition to the already existing Cmd (Mac) / Ctrl (Win) + click for conditional breakpoints.

The Command Menu gets the new Reveal active file in navigator sidebar command that does the same as the corresponding option in the drop-down menu of the Editor .

The new command to reveal the active file in the navigator sidebar.

Chromium issues: 1486933 , 1467464 .

Posture support for emulated foldable devices

Device mode now lets you set posture of an emulated foldable device: Continuous or Folded . The continuous posture refers to a "flat" position and folded forms an angle between sections of the display.

A drop-down menu with posture options.

Additionally, the Devices list gets a new emulated foldable device: Asus Zenbook Fold.

Chromium issue: 1066842 .

Dynamic theming

DevTools now automatically matches Chrome's color theme. To set a theme:

  1. Open a new tab and click Customize Chrome in the right bottom corner.
  2. In Appearance, pick a theme through Change themes or select a color palette.

DevTools matches the color theme selected in Appearance.

Chromium issues: 1483276 .

Third-party cookies phaseout warnings in the Network and Application panels

Both the Network and Application panels now highlight and show warnings next to cookies affected by the third-party restrictions from Tracking Protection .

In Network , find a request with a warning icon, click it, and open the Cookies tab.

The before and after capturing third-party cookies in the Network panel.

In Application , navigate to Storage > Cookies and click a domain. Cookies highlighted in yellow aren't stored in the browser.

The before and after highlighting third-party cookies in the Application panel.

Hover over the warning icon to see a tooltip describing the issues and click the icon to open the Issues tab with more information.

Additionally, the cookies in the table are now sorted by name by default.

Chromium issues: 1506225 , 1503961 .

Lighthouse 11.4.0

The Lighthouse panel now runs Lighthouse 11.4.0. See the full list of changes . Among notable changes is the new audit that lets you detect if your website still uses third-party cookies.

Audit that detects third-party cookies.

To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed .

Chromium issue: 772558 .

قابلیت دسترسی

This version has the following accessibility improvements:

  • When you open Settings > Experiments , the Search box is now automatically in focus.
  • The Clear input button in Network > Filter is now focusable.
  • The file tree in Sources > Page now displays correctly in high contrast mode.
  • Screen readers now correctly announce the following:
    • The state of checkboxes in Sources > Breakpoints .
    • Position and index information for a list of suggestions.
    • Action result when adding or deleting a location in Settings > Locations .
    • Groups of exclusion rules (general or custom) in Settings > Ignore List .

Chromium issues: 1504938 , 1499868 , 1512161 , 1515224 , 1515418 , 1516998 , 1517015 .

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • انیمیشن ها :
    • Fixed the bug with screenshot popover rendering out of bounds ( 1506991 ).
    • Fixed the bug with removed animation nodes not marked as removed ( 1506561 ).
  • شبکه :
    • Header overrides : Fixed a bug with a false purple dot icon in Headers tab ( 1507856 ).
    • Preview : Fixed a bug with an unnecessary double decoding ( 1509336 ).
    • Fixed a bug due to which short requests didn't show up ( 1509862 ).
  • Application > IndexedDB : Rearranged buttons in the action bar for consistency with other panels ( 1393800 ).
  • Sensors : Fixed a bug with unavailable location incorrect successful callback ( 1486859 ).
  • عملکرد :
    • The Collect garbage button now has an appropriate icon, "mop" instead of a "bin" ( 1507530 ).
    • Performance trace now retains data when navigating to about:blank ( 1509947 ).

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.