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

Sofia Emelianova

Jecelyn Yeen

به روز رسانی ضبط

پشتیبانی از برنامه های افزودنی پخش مجدد

Recorder از گزینه های پخش سفارشی پشتیبانی می کند که می توانید با یک برنامه افزودنی در DevTools جاسازی کنید.

پسوند نمونه را امتحان کنید. برای باز کردن UI سفارشی پخش مجدد، گزینه new custom replay را انتخاب کنید.

برای سفارشی کردن Recorder بر اساس نیازهای خود و ادغام آن با ابزارهای خود، برنامه افزودنی خود را توسعه دهید: chrome.devtools.recorder API را کاوش کنید و نمونه های برنامه افزودنی بیشتری را بررسی کنید.

شماره Chromium: 1400243 .

با انتخابگرهای پیرس ضبط کنید

علاوه بر انتخابگرهای سفارشی، CSS، ARIA، متن و XPath ، اکنون می‌توانید با استفاده از انتخابگرهای سوراخ کردن ضبط کنید. این انتخابگرها مانند نمونه های CSS رفتار می کنند، اما می توانند ریشه های سایه را نیز سوراخ کنند.

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

شماره Chromium: 1411188 .

صادرات به عنوان اسکریپت Puppeteer با تجزیه و تحلیل Lighthouse

Recorder یک گزینه صادرات جدید را معرفی می کند: Puppeteer (از جمله تجزیه و تحلیل Lighthouse) . با Puppeteer می‌توانید Chrome را خودکار و کنترل کنید. با Lighthouse ، می توانید عملکرد وب سایت خود را به تصویر بکشید و بهبود بخشید.

ضبط خود را باز کنید، کلیک کنید صادر کنید ، گزینه جدید را انتخاب کنید و فایل .js را ذخیره کنید.

برای دریافت گزارش Lighthouse در فایل flow.report.html اسکریپت Puppeteer را اجرا کنید .

پسوندها را دریافت کنید

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

به راحتی می توانید برنامه افزودنی خود را به لیست برنامه های افزودنی ضبط کننده اضافه کنید. ما مشتاقانه منتظریم تا شما را در لیست ببینیم!

مسائل Chromium: 1417104 ، 1413168 .

عناصر > به‌روزرسانی‌های سبک

مستندات CSS

چند بار در روز اسناد مربوط به ویژگی های CSS را جستجو می کنید؟ اکنون پنجره Elements > Styles زمانی که ماوس را روی یک ویژگی می‌برید، توضیح کوتاهی را به شما نشان می‌دهد.

راهنمای ابزار همچنین دارای یک پیوند بیشتر بدانید که شما را به یک مرجع MDN CSS در این ویژگی می برد.

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

برای روشن کردن مجدد آنها، بررسی کنید تنظیمات > تنظیمات > عناصر > نمایش راهنمای ابزار مستندات CSS .

شماره Chromium: 1401107 .

پشتیبانی از تودرتو CSS

اکنون پنجره Elements > Styles دستور CSS Nesting را تشخیص می‌دهد و سبک‌های تودرتو را برای عناصر مناسب اعمال می‌کند.

شماره Chromium: 1172985 .

علامت گذاری نقاط ورود و خروج شرطی در کنسول

با بهبود بیشتر UX نقطه شکست پیشرفته ، کنسول اکنون پیام‌هایی را که توسط نقاط شکست راه‌اندازی می‌شوند علامت‌گذاری می‌کند:

• console.* نقاط شکست شرطی را با علامت سوال نارنجی فراخوانی می کند ?
• پیام های نقطه ورود با دو نقطه صورتی ..

کنسول اکنون به جای اسکریپت‌های VM<number> که Chrome برای اجرای هر قطعه جاوا اسکریپت در V8 ایجاد می‌کند، پیوندهای لنگر مناسبی را به نقاط شکست در فایل‌های منبع می‌دهد.

روی پیوند کنار پیام نقطه شکست کلیک کنید تا مستقیماً به ویرایشگر نقطه شکست بروید.

شماره Chromium: 1027458 .

اسکریپت های نامربوط را در حین اشکال زدایی نادیده بگیرید

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

روی هر اسکریپت یا پوشه کلیک راست کرده و یکی از گزینه های مربوط به نادیده گرفتن را انتخاب کنید. ممکن است گزینه هایی برای افزودن یا حذف اسکریپت یا پوشه به لیست و از آن مشاهده کنید. Debugger اسکریپت های اضافه شده به لیست را نادیده می گیرد و آنها را در پشته تماس حذف می کند.

تمام اسکریپت‌ها و پوشه‌های فهرست‌شده نادیده گرفته شده در درخت فایل خاکستری می‌شوند.

اگر یک اسکریپت نادیده گرفته شده را انتخاب کنید، دکمه Configure شما را به آن می برد تنظیمات > فهرست نادیده گرفته شود . همچنین می توانید منابع نادیده گرفته شده را از درخت فایل مخفی کنید > مخفی کردن منابع فهرست شده نادیده گرفته شده .

شماره Chromium: 883325 .

منسوخ شدن JavaScript Profiler شروع شد

در اوایل Chrome 58 ، تیم DevTools قصد داشت در نهایت JavaScript Profiler را منسوخ کند و توسعه دهندگان Node.js و Deno از پنل Performance برای پروفایل عملکرد CPU جاوا اسکریپت استفاده کنند.

این نسخه DevTools (112) منسوخ شدن چهار فاز JavaScript Profiler را آغاز می کند. پانل JavaScript Profiler اکنون بنر هشدار مربوطه را نشان می دهد.

به جای Profiler ، از پنل Performance برای پروفایل CPU استفاده کنید.

بیشتر بیاموزید و بازخورد خود را در RFC و crbug.com/1354548 مربوطه ارائه دهید.

شماره Chromium: 1417647 .

تقلید کنتراست کاهش یافته

برگه Rendering گزینه جدیدی را به فهرست نقص‌های دید شبیه‌سازی می‌افزاید — کنتراست کاهش یافته . با استفاده از این گزینه، می توانید متوجه شوید که وب سایت شما برای افرادی که حساسیت کنتراست کمتری دارند چگونه به نظر می رسد.

توجه داشته باشید که گزینه‌های فهرست به‌روزرسانی شده‌اند تا به شما بگوییم که گزینه‌ها چه رنگی را نشان می‌دهند.

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

مسائل Chromium: 1412719 ، 1412721 .

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

پنل Lighthouse اکنون Lighthouse 10.0.1 را اجرا می کند. برای جزئیات بیشتر، موارد جدید در Lighthouse 10.0.1 را ببینید.

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

فانوس دریایی > > ناوبری قدیمی اکنون به طور پیش فرض غیرفعال است. این گزینه از پیکربندی قدیمی Lighthouse در حالت ناوبری استفاده می کند.

Lighthouse 10 اکنون از Moto G Power به عنوان دستگاه شبیه سازی پیش فرض استفاده می کند. DevTools این دستگاه را به تنظیمات > دستگاه‌ها

شماره Chromium: 772558 .

یک اخطار کنسول برای حذف کنترلر واکشی کارگر سرویس بدون عملیات

Chrome 112 از کنترل‌کننده‌های واکشی کارگر سرویس بدون عملیات (بدون عملیات) صرف نظر می‌کند زیرا ممکن است پیمایش را کند کنند اما هدفی را دنبال نمی‌کنند. برای واجد شرایط بودن وب سایت شما به عنوان یک برنامه وب پیشرو ، دیگر نیازی به چنین کنترل کننده هایی نیست.

کنسول اکنون در صورت یافتن یک کنترل کننده واکشی بدون عملیات در وب سایت شما یک هشدار نشان می دهد. حذف آن را در نظر بگیرید.

شماره Chromium: 1347319 .

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

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

• صفحه Sources > Breakpoints اکنون مسیرهای فایل متمایز کننده را در کنار نام فایل های مبهم نشان می دهد ( 1403924 ).
• بخش اصلی در نمودار شعله پانل عملکرد اکنون CpuProfiler::StartProfiling به عنوان Profiler Overhead تعیین می کند ( 1358602 ).
• DevTools تکمیل خودکار را بهبود بخشید:
  • منابع : تکمیل پیوسته هر کلمه ( 1320204 ).
  • کنسول : Arrow down اولین پیشنهاد را انتخاب می‌کند و پیشنهادها نکات Tab را دریافت می‌کنند ( 1276960 ).
• DevTools یک نقطه انفصال شنونده رویداد اضافه کرد تا به شما اجازه دهد هنگام باز کردن یک پنجره تصویر در تصویر سند ( 1315352 ) مکث کنید.
• DevTools راه‌حلی راه‌اندازی می‌کند که مصنوعات بسته وب Vue2 را به‌درستی به‌عنوان جاوا اسکریپت نمایش می‌دهد ( 1416562 ).
• یک تنظیم کنسول نام بهتری پیدا می‌کند: پیام‌های console.trace() به طور خودکار گسترش یابد. ( 1139616 ).

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

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

تماس با تیم Chrome DevTools

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

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

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

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

Sofia Emelianova

Jecelyn Yeen

به روزرسانی های ضبط کننده

پشتیبانی از برنامه های افزودنی پخش مجدد

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

پسوند مثال را امتحان کنید. گزینه جدید پخش سفارشی را برای باز کردن UI Replay Custom انتخاب کنید.

برای سفارشی کردن ضبط به نیازهای خود و ادغام آن با ابزارهای خود ، توسعه پسوند خود را در نظر بگیرید: chrome.devtools.recorder API را کاوش کنید و نمونه های پسوند بیشتری را بررسی کنید.

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

با انتخاب کنندگان پیرس ضبط کنید

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

ضبط جدید را در صفحه ای با Shadow Dom شروع کنید و بررسی کنید پیرس در انواع انتخاب کننده برای ضبط . تعامل خود را با عناصر موجود در DOM Shadow ضبط کرده و مرحله مربوطه را بازرسی کنید.

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

صادرات به عنوان یک اسکریپت عروسکی با تجزیه و تحلیل فانوس دریایی

ضبط کننده گزینه جدید صادرات را معرفی می کند: Puppeteer (از جمله تجزیه و تحلیل فانوس دریایی) . با Puppeteer می توانید Chrome را به صورت خودکار و کنترل کنید. با Lighthouse می توانید عملکرد وب سایت خود را ضبط و بهبود بخشید.

ضبط خود را باز کنید ، کلیک کنید صادرات ، گزینه جدید را انتخاب کنید و پرونده .js را ذخیره کنید.

اسکریپت Puppeteer را اجرا کنید تا گزارش فانوس دریایی را در یک پرونده flow.report.html دریافت کنید.

پسوندها را دریافت کنید

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

در صورت تمایل می توانید پسوند خود را به لیست برنامه های افزودنی ضبط اضافه کنید. ما مشتاقانه منتظر دیدن شما در لیست هستیم!

مشکلات کروم: 1417104 ، 1413168 .

عناصر> به روزرسانی سبک ها

مستندات CSS

چند بار در روز مستندات را در مورد خواص CSS جستجو می کنید؟ صفحه عناصر > Styles اکنون هنگام شناور از یک ملک ، توضیحات کوتاهی را به شما نشان می دهد.

Tooltip همچنین دارای پیوند بیشتر است که شما را به یک مرجع MDN CSS در این ویژگی می برد.

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

برای روشن کردن آنها ، بررسی کنید تنظیمات > ترجیحات > عناصر > ابزارهای مستند سازی CSS را نشان دهید .

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

پشتیبانی لانه سازی CSS

در حال حاضر عناصر > Styles Syntax CSS را به رسمیت می شناسد و سبک های تو در تو را در عناصر مناسب اعمال می کند.

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

نشانه گذاری نقاط ورود به سیستم و نقاط ضعف شرطی در کنسول

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

• console.* تماس در نقاط ضعف شرطی با علامت سوال نارنجی ?
• پیام های ورود به سیستم با دو نقطه صورتی ..

کنسول اکنون به جای اسکریپت های VM<number> که Chrome برای اجرای هر قطعه JavaScript در V8 ایجاد می کند ، پیوندهای لنگر مناسب را برای نقاط ضعف در پرونده های منبع به شما می دهد.

روی پیوند کنار پیام BreakPoint کلیک کنید تا مستقیماً به ویرایشگر Breakpoint پرش کنید.

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

اسکریپت های بی ربط را هنگام اشکال زدایی نادیده بگیرید

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

روی هر اسکریپت یا پوشه راست کلیک کرده و یکی از گزینه های مربوط به Ignore را انتخاب کنید. ممکن است گزینه هایی را برای افزودن یا حذف اسکریپت یا پوشه به لیست مشاهده کنید. اشکال زدایی اسکریپت هایی را که به لیست اضافه شده است نادیده می گیرد و آنها را در پشته تماس حذف می کند.

همه اسکریپت ها و پوشه های فهرست شده نادیده گرفته شده در درخت پرونده خاکستری می شوند.

اگر یک اسکریپت نادیده گرفته شده را انتخاب کنید ، دکمه پیکربندی شما را به سمت خود می برد تنظیمات > لیست نادیده گرفتن . همچنین می توانید منابع نادیده گرفته شده از درخت پرونده را مخفی کنید > پنهان کردن منابع فهرست شده .

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

استهلاک پروفایل JavaScript آغاز شد

در اوایل Chrome 58 ، تیم DevTools قصد داشت سرانجام پروفایل JavaScript را کاهش دهد و Node.js و توسعه دهندگان DENO از پانل عملکرد برای پروفایل عملکرد CPU JavaScript استفاده می کنند.

این نسخه DevTools (112) استهلاک پروفایل JavaScript چهار فاز را شروع می کند. پانل Profiler JavaScript اکنون پرچم هشدار دهنده مربوطه را نشان می دهد.

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

بیشتر بدانید و در RFC مربوطه و Crbug.com/1354548 بازخورد ارائه دهید.

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

تقابل کاهش یافته

برگه Rendering گزینه جدیدی را به لیست نقص های Vision Vision اضافه می کند - کنتراست کاهش یافته . با استفاده از این گزینه ، می توانید کشف کنید که وب سایت شما به افرادی که دارای حساسیت کنتراست کاهش یافته اند ، چگونه به نظر می رسد.

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

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

مشکلات کروم: 1412719 ، 1412721 .

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

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

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

فانوس دریایی > > ناوبری میراث اکنون به طور پیش فرض غیرفعال است. این گزینه از پیکربندی Legacy Lighthouse در حالت ناوبری استفاده می کند.

Lighthouse 10 اکنون از Moto G Power به عنوان دستگاه پیش فرض شبیه سازی استفاده می کند. DevTools این دستگاه را به تنظیمات > دستگاه ها .

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

یک هشدار کنسول برای حذف کارآموز خدمات NO-OP شما

Chrome 112 دستگیرندگان کارگر خدمات بدون عمل (بدون عملیات) را از دست می دهند زیرا ممکن است ناوبری را کند کند اما به یک هدف خدمت نمی کند. چنین دست سازها دیگر لازم نیست که وب سایت شما به عنوان یک برنامه وب مترقی Quialify شود.

کنسول اکنون هشدار را نشان می دهد اگر یک کنترل کننده بدون سر در وب سایت شما پیدا کند. حذف آن را در نظر بگیرید.

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

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

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

• Pane Source > Breakpoints اکنون مسیرهای متمایز فایل را در کنار نام پرونده های مبهم ( 1403924 ) نشان می دهد.
• بخش اصلی در نمودار شعله پانل عملکرد اکنون CpuProfiler::StartProfiling به عنوان Profiler Overhead ( 1358602 ).
• DevTools بهبود خودکار را بهبود بخشید:
  • منابع : تکمیل مداوم هر کلمه ( 1320204 ).
  • کنسول : Arrow down اولین پیشنهاد را انتخاب می کند و پیشنهادات دریافت نکات Tab ( 1276960 ).
• DevTools یک نقطه شکست شنونده رویداد را اضافه کرد تا هنگام باز کردن یک پنجره تصویر در تصویر ( 1315352 ) مکث کنید.
• DevTools راه حل را تنظیم کرد که به درستی آثار باستانی WUE2 را به عنوان JavaScript ( 1416562 ) نشان می دهد.
• تنظیم کنسول نام بهتری می کند: به طور خودکار پیام های کنسول را گسترش دهید. پیام (). ( 1139616 ).

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

استفاده از 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

Jecelyn Yeen

Recorder updates

Replay extensions support

The Recorder introduces support for custom replay options that you can embed into DevTools with an extension.

Try out the example extension . Select the new custom replay option to open the custom replay UI.

To customize the Recorder to your needs and integrate it with your tools, consider developing your own extension: explore the chrome.devtools.recorder API and check out more extension examples .

Chromium issue: 1400243 .

Record with pierce selectors

In addition to custom, CSS, ARIA, text, and XPath selectors , you can now record using pierce selectors . These selectors behave like CSS ones but can also pierce through shadow roots.

Start a new recording on a page with shadow DOM and check Pierce in Selector types to record . Record your interaction with elements in the shadow DOM and inspect the corresponding step.

Chromium issue: 1411188 .

Export as a Puppeteer script with Lighthouse analysis

The Recorder introduces a new export option: Puppeteer (including Lighthouse analysis) . With Puppeteer , you can automate and control Chrome. With Lighthouse , you can capture and improve your website's performance.

Open your recording, click Export , select the new option, and save the .js file.

Run the Puppeteer script to get a Lighthouse report in a flow.report.html file.

پسوندها را دریافت کنید

Explore options to customize your recorder experience, for example, with custom export options. Get extensions for the Recorder by clicking the Export > Get extensions in a recording.

Feel free to add your own extension to the list of Recorder Extensions . We look forward to seeing yours on the list!

Chromium issues: 1417104 , 1413168 .

Elements > Styles updates

CSS documentation

How many times a day do you look up documentation on CSS properties? The Elements > Styles pane now shows you a short description when you hover over a property.

The tooltip also has a Learn more link that takes you to an MDN CSS Reference on this property.

If you know CSS well, you might find the tooltips bothersome. To turn them all off, check Don't show .

To turn them back on, check Settings > Preferences > Elements > Show CSS documentation tooltip .

Chromium issue: 1401107 .

CSS nesting support

The Elements > Styles pane now recognizes CSS Nesting syntax and applies nested styles to the right elements.

Chromium issue: 1172985 .

Marking logpoints and conditional breakpoints in the Console

Further improving the enhanced breakpoint UX , the Console now marks messages triggered by breakpoints:

• console.* calls in conditional breakpoints with an orange question mark ?
• Logpoint messages with pink two dots ..

The Console now gives you proper anchor links to breakpoints in source files instead of VM<number> scripts that Chrome creates to run any piece of Javascript on V8 .

Click the link next to the breakpoint message to jump directly to the breakpoint editor.

Chromium issue: 1027458 .

Ignore irrelevant scripts during debugging

To help you focus on the most important parts of your code, you can now add irrelevant scripts to the Ignore List right from the file tree on the Sources > Page pane.

Right-click any script or folder and select one of the ignore-related options. You may see options to add or remove the script or folder to and from the list. The Debugger ignores scripts added to the list and omits them in the call stack.

All ignore-listed scripts and folders are grayed out in the file tree.

If you select an ignored script, the Configure button takes you to Settings > Ignore List . You can also hide ignored sources from the file tree with > Hide ignore-listed sources .

Chromium issue: 883325 .

JavaScript Profiler deprecation started

As early as Chrome 58 , the DevTools team planned to eventually deprecate the JavaScript Profiler and have Node.js and Deno developers use the Performance panel for profiling JavaScript CPU performance.

This DevTools version (112) starts the four-phase JavaScript Profiler deprecation . The JavaScript Profiler panel now shows the corresponding warning banner.

Instead of the Profiler , use the Performance panel to profile CPU.

Learn more and provide feedback in the corresponding RFC and crbug.com/1354548 .

Chromium issue: 1417647 .

Emulate reduced contrast

The Rendering tab adds a new option to the Emulate vision deficiencies list— Reduced contrast . With this option, you can discover how your website looks to people with reduced contrast sensitivity.

Note that the list options have been updated to tell you what color insensitivity the options represent.

With DevTools, you can find and fix all contrast issues at once. For more information, see Make your website more readable .

Chromium issues: 1412719 , 1412721 .

Lighthouse 10

The Lighthouse panel now runs Lighthouse 10.0.1 . For more details, see What's new in Lighthouse 10.0.1 .

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

Lighthouse > > Legacy navigation is now disabled by default. This option uses legacy Lighthouse configuration in navigation mode.

Lighthouse 10 now uses Moto G Power as the default emulation device . DevTools added this device to Settings > Devices .

Chromium issue: 772558 .

A Console warning to remove your no-op service worker fetch handler

Chrome 112 skips no-op (no operation) service worker fetch handlers because they may slow down navigation but don't serve a purpose. Such handlers are no longer required for your website to quialify as a Progressive Web App .

The Console now shows a warning if it finds a no-op fetch handler on your website. Consider removing it.

Chromium issue: 1347319 .

Miscellaneous highlights

These are some noteworthy fixes in this release:

• The Sources > Breakpoints pane now shows differentiating file paths next to ambiguous file names ( 1403924 ).
• The Main section in the flame chart of the Performance panel now designates CpuProfiler::StartProfiling as Profiler Overhead ( 1358602 ).
• DevTools improved autocompletion:
  • Sources : Consistent completions of any word ( 1320204 ).
  • Console : Arrow down selects the first suggestion and suggestions get Tab hints ( 1276960 ).
• DevTools added an event listener breakpoint to let you pause when you open a Document Picture-in-Picture window ( 1315352 ).
• DevTools set up a workaround that properly displays Vue2 webpack artifacts as JavaScript ( 1416562 ).
• A Console setting gets a better name: Automatically expand console.trace() messages. ( 1139616 ).

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.

• Submit a suggestion or feedback to us via crbug.com .
• Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

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