موارد جدید در DevTools (Chrome 118)

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

بخش جدید برای ویژگی‌های سفارشی در Elements > Styles

اکنون پنل Elements از @property CSS at-rule پشتیبانی می‌کند. این به شما امکان می دهد خصوصیات سفارشی CSS را به طور صریح تعریف کنید و آنها را بدون اجرای هیچ جاوا اسکریپتی در یک شیوه نامه ثبت کنید.

برای بررسی ویژگی‌های سفارشی ثبت‌شده خود، در Elements > Styles ، نشانگر را روی نام دارایی نگه دارید و توصیف‌گرهای آن را در یک راهنمای ابزار ببینید. در راهنمای ابزار، برای مشاهده ملک ثبت شده در قسمت تاشو @property ، روی لینک کلیک کنید.

مسائل Chromium: 1471102 ، 1471103 ، 1471105 .

بهبودهای محلی بیشتر لغو می شود

با ادامه جریان بهبودها در نسخه قبلی ، لغوهای محلی اکنون کارهای زیر را انجام می دهند:

  • در Sources > Page ، وقتی روی یک فایل نقشه‌برداری شده راست کلیک می‌کنید و گزینه Override content را انتخاب می‌کنید، DevTools گفتگویی را نشان می‌دهد که شما را به منبع اصلی می‌برد. محتویات فایل های نگاشت منبع را نمی توان نادیده گرفت.

    دیالوگی که شما را به جای فایل نگاشت منبع، به کد اصلی می برد.

  • پانل شبکه یک ستون جدید دارای لغو و یک has-overrides:[content|headers|yes|no] . برای دیدن ستون Has overrides ، روی سرصفحه جدول کلیک راست کرده و آن را انتخاب کنید.

    فیلتر کردن مقدار 'has-overrides:yes' در ستون 'Has-overrides'.

  • در Sources > Overrides گزینه Delete all overrides منو با گزینه Delete با رفتار دقیق جایگزین شده است.

    قبل و بعد از جایگزینی «حذف همه موارد لغو» با «حذف».

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

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

برای برگرداندن گزینه قبلی، تیک بزنید چک باکس. "حذف همه موارد لغو موقت" را در آن فعال کنید تنظیمات. تنظیمات > آزمایش‌ها .

مسائل Chromium: 1472952 , 1416338 , 1472580 , 1473681 1475668 .

نتایج جستجو اکنون یک ورودی را به ازای تمام موارد منطبق که در یک خط کد پیدا کرده است نشان می دهد. قبلاً، فقط اولین تطابق را در هر خط کد نشان می داد. رفتار جدید به ویژه هنگامی مفید است که در میان فایل های کوچک شده جستجو می کنید. وقتی روی یک نتیجه جستجو کلیک می‌کنید، فایل را در ویرایشگر باز می‌کند و اکنون مطابقت را نه تنها به صورت عمودی بلکه افقی نیز به نمایش در می‌آورد.

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

علاوه بر این، جستجو افزایش سرعت داشت. مقایسه قبل (چپ) و بعد (راست) را در ویدیوی بعدی ببینید.

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

مسائل Chromium: 1468875 ، 1472019 .

پانل منابع بهبود یافته

فضای کاری ساده در پانل منابع

ویژگی فضای کاری در پانل منابع جدید ساده شده است:

  • نامگذاری ثابت مهمتر از همه، پانل Sources > Filesystem به Workspace تغییر نام داد. متون UI مختلف در این بخش اکنون واضح تر و بدون افزونگی هستند.
  • تنظیمات بهبود یافته نشانه های بهتری را برای کشیدن و رها کردن پوشه ها مشاهده کنید یا برای انتخاب پوشه روی پیوندی کلیک کنید.

Sources > Workspace به شما امکان می دهد تغییراتی را که در DevTools ایجاد می کنید مستقیماً با فایل های منبع خود همگام سازی کنید.

تنظیمات و گردش کار جدید را در عمل مشاهده کنید:

مسائل Chromium: 1473771 ، 1473880 ، 1473963 ، 1474686 ، 1474687 .

ترتیب مجدد صفحات در منابع

اکنون می‌توانید با کشیدن و رها کردن پانل‌ها در سمت چپ پانل منابع ، مانند روشی که می‌توانید دیگر پانل‌ها، برگه‌ها و پانل‌ها را دوباره ترتیب دهید، مرتب کنید.

مسائل Chromium: 1473758 .

برجسته سازی نحو و چاپ زیبا برای انواع بیشتر اسکریپت

پانل منابع اکنون می تواند:

  • جاوا اسکریپت درون خطی زیبا با انواع اسکریپت زیر: module ، importmap ، speculationrules .
  • نحو انواع اسکریپت importmap و speculationrules را برجسته کنید، که هر دو دارای JSON هستند.

قبل و بعد از چاپ زیبا و برجسته سازی نحوی نوع اسکریپت قوانین حدس و گمان.

برای اطلاعات بیشتر در مورد قوانین حدس و گمان، برای پیمایش فوری صفحه، به صفحات Prerender در Chrome مراجعه کنید.

شماره Chromium: 1473875 .

شبیه‌سازی ویژگی رسانه ترجیح می‌دهد-شفافیت کاهش یافته

Chrome 118 اکنون از ویژگی رسانه prefers-reduced-transparency پشتیبانی می‌کند. این ویژگی به توسعه‌دهندگان اجازه می‌دهد محتوای وب را با اولویت‌های انتخابی کاربر برای کاهش شفافیت در سیستم‌عامل، مانند تنظیم کاهش شفافیت در macOS، تطبیق دهند.

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

شماره Chromium: 1424879 .

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

پنل Lighthouse اکنون Lighthouse 11 را اجرا می کند. مهم‌تر از همه، این نسخه ناوبری قدیمی را حذف می‌کند و ممیزی‌های دسترسی جدید را اضافه می‌کند و نحوه امتیازدهی دسته دسترس‌پذیری را تغییر می‌دهد.

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

شماره Chromium: 772558 .

بهبود دسترسی

DevTools اکنون از کلیدهای ناوبری بیشتری پشتیبانی می کند:

  • نمای کلی CSS : از فلش های بالا و پایین برای پیمایش بخش ها در نوار کناری سمت چپ استفاده کنید.
  • حافظه : در نوار کناری سمت چپ، روی دکمه ذخیره در کنار عکس‌های فوری با Tab متمرکز شده و Enter را فشار دهید تا پوشه را انتخاب کنید.

علاوه بر این، چندین مشکل اعلامیه صفحه خوان رفع شده است.

مسائل Chromium: 1470401 ، 1471301 ، 1474108 ، 1468631 .

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

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

  • شبکه : نمادهای جدید برای انواع منابع محبوب: media ، wasm ، websocket ، manifest ، fetch/xhr ، json ( 1466298 ).
  • به‌روزرسانی‌های رنگی برای رنگ‌های ماده 3 در بسیاری از عناصر رابط کاربری، به ویژه در پانل‌های عناصر و عملکرد ( 1456690 ، 1472243 ).
  • Issues اکنون مشکلات کوکی را در مسیرهای پیمایش حفظ می کند ( 1466601 ).
  • برنامه های مختلف > بهبودهای بارگیری از قبل ، به ویژه شبکه های قابل مرتب سازی و جزئیات بازنگری شده مجموعه قوانین ( 1410709 ).
  • بهبودهای مختلف ویرایشگر فرمان در مانیتور پروتکل ، به ویژه هشدارها در مورد ورودی اشتباه، ویرایش دستور ارسال شده، ویرایشگر پارامترهای شی بدون کلیدهای از پیش تعریف شده، پشتیبانی از enum های تعریف نشده توسط مراجع، اشیاء بدون مرجع نوع، دستورات فیلتر توسط مطابقت های زیر رشته ای و موارد دیگر. ( 1448050 ).
  • نمودار شعله عملکرد یک مرز در اطراف کادر کل در نمودار دایره ای می گیرد ( 1470147 ).
  • منابع اکنون خط تیره ها را به عنوان کاراکترهای کلمه در CSS در نظر نمی گیرند ( 1471354 ).
  • اکنون تکمیل خودکار همیشه کلمات کلیدی CSS را در پایان مرتب می کند.
  • فیلترهای RegEx اکنون از فضاها پشتیبانی می کنند ( 1346936 ).
  • عناصر شناسایی ویژگی پرس و جو رسانه را ثابت کردند ( 1472693 ).

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

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

تماس با تیم Chrome DevTools

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

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

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

،

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

بخش جدید برای خصوصیات سفارشی در عناصر> سبک ها

پانل عناصر اکنون از قانون AT Property CSS پشتیبانی می کند. این امکان را به شما می دهد تا ویژگی های CSS Custom را صریحاً تعریف کرده و بدون اجرای هر جاوا اسکریپت ، آنها را در یک صفحه شیوه ای ثبت کنید.

برای بازرسی از ویژگی های سفارشی ثبت شده خود ، در عناصر > سبک ها ، روی نام ملک شناور شوید و توصیف کننده های آن را در یک ابزار ابزار مشاهده کنید. در Tooltip ، برای مشاهده ویژگی ثبت شده در بخش @property ، روی پیوند کلیک کنید.

مشکلات کروم: 1471102 ، 1471103 ، 1471105 .

بیشتر موضعی بیشتر پیشرفت می کند

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

  • در منابع > صفحه ، هنگامی که روی یک فایل نقشه برداری شده راست کلیک کرده و محتوای Override را انتخاب کنید ، DevTools گفتگو را نشان می دهد که به جای آن شما را به منبع اصلی منتقل می کند. محتوای پرونده های نقشه برداری منبع نمی تواند نادیده گرفته شود.

    گفتگوی که شما را به جای پرونده منبع نقشه برداری به کد اصلی می برد.

  • پانل شبکه یک ستون جدید و یک has-overrides:[content|headers|yes|no] فیلتر. برای دیدن ستون Overrides ، روی هدر جدول راست کلیک کرده و آن را انتخاب کنید.

    فیلتر کردن برای "HAS-OVERRIDES: بله" مقدار در ستون "غلبه کرده است".

  • در منابع > Overrides ، گزینه Delete All Overrides منو با گزینه Delete با رفتار دقیق جایگزین شده است.

    قبل و بعد از تعویض "حذف همه" با "حذف".

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

گزینه Delete New ، ابتدا یک پیام هشدار دهنده را نشان می دهد و تأیید را مطرح می کند ، سپس پوشه ای را که با تمام محتویات آن کلیک کرده اید حذف می کند.

برای بازگرداندن گزینه قبلی ، بررسی کنید کادر انتخاب فعال کردن "حذف همه موارد موقتاً" در تنظیمات. تنظیمات > آزمایشات .

شماره های کروم: 1472952 ، 1416338 ، 1472580 ، 1473681 1475668 .

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

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

علاوه بر این ، جستجو باعث افزایش سرعت شد. مقایسه قبل (سمت چپ) و بعد از (راست) را در ویدیوی بعدی مشاهده کنید.

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

شماره های کروم: 1468875 ، 1472019 .

پانل منابع بهبود یافته

فضای کاری ساده در پانل منابع

ویژگی فضای کاری در پانل منابع جدید ساده است:

  • نامگذاری مداوم . مهمتر از همه ، منابع > صفحه سیستم فایل به فضای کاری تغییر نام داده شد. متون مختلف UI در این صفحه اکنون واضح تر و عاری از افزونگی هستند.
  • تنظیم بهبود یافته نشانه های بهتری برای کشیدن و رها کردن پوشه ها مشاهده کنید یا برای انتخاب یک پوشه روی یک پیوند کلیک کنید.

منابع > فضای کاری به شما امکان می دهد تغییراتی را که در DevTools ایجاد می کنید مستقیماً با پرونده های منبع خود همگام سازی کنید.

تنظیمات جدید و گردش کار را در عمل مشاهده کنید:

شماره های کروم: 1473771 ، 1473880 ، 1473963 ، 1474686 ، 1474687 .

صفحات مجدد در منابع

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

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

برجسته سازی نحو و چاپ بسیار زیبا برای انواع بیشتر اسکریپت

پانل منابع اکنون می تواند:

  • JavaScript Inline Pretty Print Print در انواع اسکریپت زیر: module ، importmap ، speculationrules .
  • نحو انواع اسکریپت های importmap و speculationrules را برجسته کنید ، که هر دو JSON را در خود جای داده اند.

قبل و بعد از چاپ زیبا و نحو برجسته از نوع اسکریپت قوانین حدس و گمان.

برای اطلاعات بیشتر در مورد قوانین حدس و گمان ، برای ناوبری های صفحه فوری ، به صفحات prerender در Chrome مراجعه کنید.

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

تقلید از ویژگی رسانه های شفافیت کاهش یافته

Chrome 118 اکنون از ویژگی های رسانه ای prefers-reduced-transparency می دهد. این ویژگی به توسعه دهندگان این امکان را می دهد تا محتوای وب را با اولویت انتخاب شده توسط کاربر برای کاهش شفافیت در سیستم عامل ، مانند کاهش شفافیت در MACOS سازگار کنند.

برای تقلید از این ویژگی رسانه ای ، برگه Rendering را باز کرده و به سمت آن حرکت کنید.

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

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

پانل فانوس دریایی اکنون لایت هاوس 11 را اجرا می کند. مهمتر از همه ، این نسخه ناوبری میراث را از بین می برد و حسابرسی های دسترسی جدید را اضافه می کند و نحوه دستیابی به دسته بندی دسترسی را تغییر می دهد.

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

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

بهبود دسترسی

DevTools اکنون از کلیدهای ناوبری بیشتر پشتیبانی می کند:

  • نمای کلی CSS : از فلش های بالا و پایین برای حرکت در بخش های سمت چپ استفاده کنید.
  • حافظه : در نوار کناری سمت چپ ، دکمه ذخیره را در کنار عکس های فوری با برگه متمرکز کنید و Enter را برای انتخاب پوشه فشار دهید.

علاوه بر این ، چندین موضوع اعلامیه خواننده صفحه نمایش برطرف شده است.

شماره های کروم: 1470401 ، 1471301 ، 1474108 ، 1468631 .

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

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

  • شبکه : نمادهای جدید برای منابع محبوب انواع: media ، wasm ، websocket ، manifest ، fetch/xhr ، json ( 1466298 ).
  • به روزرسانی های رنگ 3 رنگ در بسیاری از عناصر UI ، که مهمترین آنها در عناصر و پانل های عملکرد است ( 1456690 ، 1472243 ).
  • شماره ها اکنون مسائل کوکی را در سراسر ناوبری ها حفظ می کند ( 1466601 ).
  • برنامه های مختلف> پیشرفت های از پیش بارگذاری ، مهمترین آنها شبکه های قابل مرتب سازی و قانون اصلاح شده جزئیات ( 1410709 ).
  • پیشرفت های مختلف ویرایشگر فرمان در مانیتور پروتکل ، مهمترین هشدارها در مورد ورودی اشتباه ، ویرایش یک دستور ارسال شده ، ویرایشگر برای پارامترهای شیء بدون کلیدهای از پیش تعریف شده ، پشتیبانی از عناصر مشخص نشده توسط منابع ، اشیاء بدون مرجع ، دستورات فیلتر توسط مسابقات زیرزمینی و موارد دیگر ( 1448050 ).
  • نمودار شعله عملکرد مرز در اطراف جعبه کل در نمودار پای ( 1470147 ) مرز دارد.
  • منابع اکنون با خط شخصیت ها به عنوان شخصیت های کلمه در CSS ( 1471354 ) رفتار نمی کنند.
  • در حال حاضر خودکار در پایان همیشه کلمات کلیدی CSS را مرتب می کند.
  • فیلترهای Regex اکنون از فضاها پشتیبانی می کنند ( 1346936 ).
  • عناصر ثابت رسانه پرس و جو رسانه ای ثابت ( 1472693 ).

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

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

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

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

  • یک پیشنهاد یا بازخورد را از طریق Crbug.com به ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، یک مسئله DevTools را گزارش دهیدبیشتر > راهنما > گزارش مسائل DevTools در DevTools.
  • توییت در chromedevtools .
  • در مورد فیلم های YouTube DevTools یا نکات DevTools YouTube ، نظرات خود را در مورد Whats New در DevTools YouTube بگذارید.

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

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

،

Sofia Emelianova
Sofia Emelianova

New section for custom properties in Elements > Styles

The Elements panel now supports the @property CSS at-rule . It lets you define CSS custom properties explicitly and register them in a stylesheet without running any JavaScript.

To inspect your registered custom properties, in Elements > Styles , hover over the property name and see its descriptors in a tooltip. In the tooltip, click the link to view the registered property in the collapsible @property section.

Chromium issues: 1471102 , 1471103 , 1471105 .

More local overrides improvements

Continuing the stream of improvements in the previous version , local overrides now do the following:

  • In Sources > Page , when you right-click a source-mapped file and select Override content , DevTools will show a dialog that takes you to the original source instead. Contents of source-mapped files can't be overridden.

    The dialog that takes you to the original code instead of the source-mapped file.

  • The Network panel gets a new Has overrides column and a corresponding has-overrides:[content|headers|yes|no] filter. To see the Has overrides column, right-click the table header and select it.

    Filtering for 'has-overrides:yes' value in the 'Has overrides' column.

  • In Sources > Overrides , the Delete all overrides menu option has been replaced with the Delete option with precise behavior.

    Before and after replacing 'Delete all overrides' with 'Delete'.

The previous Delete all overrides was confusing because it deleted only the overrides active in the current session, marked by the ذخیره شد. purple dot icon.

The new Delete option, first shows a warning message and prompts confirmation, then deletes the folder you clicked with all its contents.

To bring back the previous option, check Checkbox. Enable "Delete all overrides temporarily" in تنظیمات. Settings > Experiments .

Chromium issues: 1472952 , 1416338 , 1472580 , 1473681 1475668 .

Search results now show an entry per all the matches it found in a line of code. Previously, it showed only the first match per line of code. The new behavior is especially useful when you search across minified files. When you click a search result, it opens the file in the editor and now scrolls the match into view not only vertically but also horizontally.

The before and after making search show all the matches per line.

Additionally, Search got a speed boost. See the before (left) and after (right) comparison in the next video.

Finally, Search now supports ignore listing and won't show you results from ignored files.

Chromium issues: 1468875 , 1472019 .

Improved Sources panel

Streamlined workspace in the Sources panel

The workspace feature in the Sources panel is new streamlined:

  • Consistent naming . Most notably, the Sources > Filesystem pane was renamed into Workspace . Various UI texts in this pane are now clearer and free of redundancy.
  • Improved setup . See better cues for dragging and dropping folders or click a link to select a folder.

Sources > Workspace lets you sync changes you make in DevTools directly to your source files.

See the new setup and workflow in action:

Chromium issues: 1473771 , 1473880 , 1473963 , 1474686 , 1474687 .

Reorder panes in Sources

You can now reorder panes on the left side of the Sources panel by dragging and dropping, similar to how you can reorder other panels, tabs, and panes .

Chromium issues: 1473758 .

Syntax highlighting and pretty-printing for more script types

The Sources panel can now:

  • Pretty-print inline JavaScript within the following script types: module , importmap , speculationrules .
  • Highlight the syntax of importmap and speculationrules script types, both of which hold JSON.

Before and after pretty-printing and syntax highlighting of speculation rules script type.

For more information on speculation rules, see Prerender pages in Chrome for instant page navigations .

Chromium issue: 1473875 .

Emulate prefers-reduced-transparency media feature

Chrome 118 now supports the prefers-reduced-transparency media feature . This feature lets developers adapt web content to user-selected preference for reduced transparency in the OS, such as the Reduce transparency setting on macOS.

To emulate this media feature, open the Rendering tab and scroll down to it.

Chromium issue: 1424879 .

Lighthouse 11

The Lighthouse panel now runs Lighthouse 11 . Most notably, this version removes legacy navigation and adds new accessibility audits and changes how the accessibility category is scored.

See also the full list of changes . To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed .

Chromium issue: 772558 .

بهبود دسترسی

DevTools now supports more navigation keystrokes:

  • CSS Overview : Use the up and down arrows to navigate sections in the left sidebar.
  • Memory : In the left sidebar, focus the Save button next to snapshots with Tab and press Enter to select folder.

Additionally, several screen reader announcement issues have been fixed.

Chromium issues: 1470401 , 1471301 , 1474108 , 1468631 .

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Network : New icons for popular resources types: media , wasm , websocket , manifest , fetch/xhr , json ( 1466298 ).
  • Color updates to material 3 colors in many UI elements, most notably in the Elements and Performance panels ( 1456690 , 1472243 ).
  • Issues now preserves cookie issues across navigations ( 1466601 ).
  • Various Application > Preloading improvements, most notably sortable grids and revised rule set details ( 1410709 ).
  • Various improvements of the command editor in Protocol monitor , most notably warnings on wrong input, editing a sent command, editor for object parameters without predefined keys, support for enums undefined by references, objects without type reference, filter commands by substring matches, and more ( 1448050 ).
  • Performance flame chart gets a border around the total box on the pie chart ( 1470147 ).
  • Sources now doesn't treat dashes as word characters in CSS ( 1471354 ).
  • Autocomplete now always sorts CSS-wise keywords at the end.
  • RegEx filters now support spaces ( 1346936 ).
  • Elements fixed media query feature detection ( 1472693 ).

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, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, 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.