به روز رسانی ضبط
پشتیبانی از برنامه های افزودنی پخش مجدد
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 تکمیل خودکار را بهبود بخشید:
- 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 پوشش داده شده است.
- بهبود پنل شبکه
- فیلترهای شبکه دوباره طراحی شدند
- صادرات HAR اکنون داده های حساس را به طور پیش فرض حذف می کند
- بهبود پانل عناصر
- تکمیل خودکار مقادیر برای ویژگی های text-fasis-*
- سرریزهای پیمایشی که با نشان مشخص شده اند
- بهبود پانل عملکرد
- توصیه هایی در معیارهای زنده
- پیمایش پودر سوخاری
- بهبود پنل حافظه
- نمایه جدید "عناصر جدا شده".
- بهبود نامگذاری اشیاء JS ساده
- طرح زمینه پویا را خاموش کنید
- آزمایش Chrome: اشتراکگذاری فرآیند
- فانوس دریایی 12.2.1
- نکات برجسته متفرقه
- ضبط از صادرات به Puppeteer برای فایرفاکس پشتیبانی می کند
- بهبود پانل عملکرد
- مشاهدات متریک زنده
- درخواستها را در مسیر شبکه جستجو کنید
- ردپای پشتهای از تماسهای performance.mark و performance.measure را ببینید
- از دادههای آدرس آزمایشی در پانل تکمیل خودکار استفاده کنید
- بهبود پانل عناصر
- حالت های بیشتری را برای عناصر خاص اجباری کنید
- عناصر > سبکها اکنون ویژگیهای شبکه بیشتری را تکمیل میکند
- فانوس دریایی 12.2.0
- نکات برجسته متفرقه
- اطلاعات بینش کنسول توسط Gemini در اکثر کشورهای اروپایی منتشر می شود
- به روز رسانی پنل عملکرد
- آهنگ شبکه پیشرفته
- داده های عملکرد را با API توسعه پذیری سفارشی کنید
- جزئیات در مسیر زمان بندی
- تمام درخواست های فهرست شده را در پنل شبکه کپی کنید
- عکسهای فوری پشتهای سریعتر با برچسبهای HTML نامگذاری شده و درهمتنیدگی کمتر
- پانل انیمیشن ها را باز کنید تا انیمیشن ها را ضبط کنید و @keyframes را به صورت زنده ویرایش کنید
- فانوس دریایی 12.1.0
- بهبود دسترسی
- نکات برجسته متفرقه
- موقعیت لنگر CSS را در پانل Elements بررسی کنید
- بهبود پنل منابع
- بهبود یافته "هرگز اینجا مکث نکن"
- شنوندگان رویداد اسنپ اسکرول جدید
- بهبود پنل شبکه
- از پیش تنظیم های کاهش فشار شبکه به روز شده است
- اطلاعات کارکنان خدمات در زمینه های سفارشی با فرمت HAR
- رویدادهای WebSocket را در پنل Performance ارسال و دریافت کنید
- نکات برجسته متفرقه
- بهبود پانل عملکرد
- با حالت پیکربندی آهنگ به روز شده، آهنگ ها را جابه جا و پنهان کنید
- اسکریپت های موجود در نمودار شعله را نادیده بگیرید
- سی پی یو را 20 برابر کاهش دهید
- پانل اطلاعات آماری عملکرد منسوخ خواهد شد
- استفاده بیش از حد از حافظه را با فیلترهای جدید در عکس های فوری پیدا کنید
- سطل های ذخیره سازی را در Application > Storage بررسی کنید
- هشدارهای self-XSS را با پرچم خط فرمان غیرفعال کنید
- فانوس دریایی 12.0.0
- نکات برجسته متفرقه
- خطاها و هشدارهای موجود در کنسول را با جمینی بهتر درک کنید
- قوانین @position-try در Elements > Styles پشتیبانی میکند
- بهبود پنل منابع
- پیکربندی خودکار چاپ زیبا و بسته شدن براکت
- وعدههای رد شده بهعنوان دستگیر شده شناخته میشوند
- دلایل خطا در کنسول
- بهبود پنل شبکه
- سرصفحه های Early Hints را بررسی کنید
- ستون آبشار را پنهان کنید
- بهبود پانل عملکرد
- آمار انتخابگر CSS را ضبط کنید
- تغییر ترتیب و مخفی کردن آهنگ
- نگهدارنده ها را در پانل حافظه نادیده بگیرید
- فانوس دریایی 11.7.1
- نکات برجسته متفرقه
- پانل تکمیل خودکار جدید
- افزایش فشار شبکه برای WebRTC
- پشتیبانی از انیمیشن های اسکرول محور در پانل انیمیشن ها
- پشتیبانی از تودرتوی CSS در Elements > Styles بهبود یافته است
- پانل عملکرد پیشرفته
- توابع و فرزندان آنها را در نمودار شعله پنهان کنید
- پیکان هایی از آغازگرهای انتخاب شده به رویدادهایی که آنها آغاز کرده اند
- فانوس دریایی 11.6.0
- نکات ابزار برای دستههای خاص در Memory > Heap snapshots
- برنامه > بهروزرسانیهای ذخیرهسازی
- بایت های مورد استفاده برای ذخیره سازی مشترک
- وب SQL به طور کامل منسوخ شده است
- بهبود پانل پوشش
- پانل لایه ها ممکن است منسوخ شده باشد
- منسوخ شدن پروفایلر جاوا اسکریپت: فاز چهارم، نهایی
- نکات برجسته متفرقه
- تخم مرغ عید پاک را پیدا کنید
- به روز رسانی پنل عناصر
- یک صفحه متمرکز را در Elements > Styles شبیه سازی کنید
- Color Picker، Angle Clock و Easing Editor در
var()
backbacks - ابزار طول CSS منسوخ شده است
- Popover برای نتیجه جستجوی انتخاب شده در عملکرد > آهنگ اصلی
- به روز رسانی پنل شبکه
- دکمه پاک کردن و فیلتر جستجو را در تب Network > EventStream
- نکات ابزار با دلایل معافیت برای کوکی های شخص ثالث در Network > Cookies
- تمام نقاط شکست در Sources را فعال و غیرفعال کنید
- مشاهده اسکریپت های بارگذاری شده در DevTools برای Node.js
- فانوس دریایی 11.5.0
- بهبود دسترسی
- نکات برجسته متفرقه
- مجموعه رسمی برنامههای افزودنی Recorder زنده است
- بهبود شبکه
- دلیل شکست در ستون وضعیت
- زیر منوی کپی بهبود یافته
- بهبود عملکرد
- خرده نان در جدول زمانی
- آغازگر رویداد در مسیر اصلی
- منوی انتخاب نمونه VM جاوا اسکریپت برای Node.js DevTools
- میانبر و دستور جدید در Sources
- بهبود عناصر
- شبه عنصر ::view-transition اکنون در Styles قابل ویرایش است
- پشتیبانی از ویژگی align-content برای کانتینرهای بلوک
- پشتیبانی از وضعیت بدن برای دستگاه های تاشو شبیه سازی شده
- موضوع بندی پویا
- هشدارهای حذف تدریجی کوکی های شخص ثالث در پانل های شبکه و برنامه
- فانوس دریایی 11.4.0
- بهبود دسترسی
- نکات برجسته متفرقه
- بهبود عناصر
- نوار فیلتر ساده در پانل شبکه
- پشتیبانی
@font-palette-values
- مورد پشتیبانی شده: ویژگی سفارشی به عنوان یک ویژگی دیگر سفارشی
- پشتیبانی از نقشه منبع بهبود یافته
- بهبود پانل عملکرد
- مسیر تعاملات پیشرفته
- فیلتر کردن پیشرفته در برگه های Bottom-Up، Call Tree و Event Log
- نشانگرهای تورفتگی در پانل منابع
- نکات ابزار مفید برای سرصفحه ها و محتوای لغو شده در پانل شبکه
- گزینه های منوی فرمان جدید برای افزودن و حذف الگوهای مسدود کردن درخواست
- آزمایش نقض CSP حذف شده است
- فانوس دریایی 11.3.0
- بهبود دسترسی
- نکات برجسته متفرقه
- حذف مرحله کوکی شخص ثالث
- کوکی های وب سایت خود را با ابزار تجزیه و تحلیل جعبه ایمنی حریم خصوصی تجزیه و تحلیل کنید
- فهرست نادیده گرفتن پیشرفته
- الگوی خروج پیشفرض برای node_modules
- استثناهای گرفته شده اکنون در صورت شناسایی یا عبور از کدهای نادیده گرفته نشده، اجرا را متوقف می کنند
-
x_google_ignoreList
در نقشه های منبع بهignoreList
تغییر نام داد - تغییر حالت ورودی جدید در حین اشکال زدایی از راه دور
- اکنون پنل Elements نشانیهای اینترنتی را برای گرههای #document نشان میدهد
- سیاست امنیتی محتوا موثر در پنل برنامه
- بهبود اشکال زدایی انیمیشن
- آیا به این کد اعتماد دارید؟ گفتگو در Sources و هشدار self-XSS در کنسول
- نقاط شکست شنونده رویداد در کارگران وب و ورکلت ها
- نشان رسانه جدید برای
<audio>
و<video>
- پیش بارگذاری به بارگذاری گمانه زنی تغییر نام داد
- فانوس دریایی 11.2.0
- بهبود دسترسی
- نکات برجسته متفرقه
- بخش @property در Elements > Styles بهبود یافته است
- قانون @property قابل ویرایش
- مشکلات مربوط به قوانین @property نامعتبر گزارش شده است
- لیست به روز شده دستگاه هایی که باید شبیه سازی شوند
- چاپ زیبای JSON درون خطی در برچسبهای اسکریپت در Sources
- تکمیل خودکار فیلدهای خصوصی در کنسول
- فانوس دریایی 11.1.0
- بهبود دسترسی
- منسوخ شدن وب SQL
- اعتبار سنجی نسبت ابعاد تصویر در Application > Manifest
- نکات برجسته متفرقه
- بخش جدید برای ویژگیهای سفارشی در Elements > Styles
- بهبودهای محلی بیشتر لغو می شود
- جستجوی پیشرفته
- پانل منابع بهبود یافته
- فضای کاری ساده در پانل منابع
- ترتیب مجدد صفحات در منابع
- برجسته سازی نحو و چاپ زیبا برای انواع بیشتر اسکریپت
- شبیهسازی ویژگی رسانه ترجیح میدهد-شفافیت کاهش یافته
- فانوس دریایی 11
- بهبود دسترسی
- نکات برجسته متفرقه
- بهبود پنل شبکه
- حتی سریعتر محتوای وب را به صورت محلی لغو کنید
- نادیده گرفتن محتوای XHR و واکشی درخواستها
- پنهان کردن درخواست های افزونه کروم
- کدهای وضعیت HTTP قابل خواندن توسط انسان
عملکرد: تغییرات در اولویت واکشی برای رویدادهای شبکه را ببینید
- تنظیمات منابع به طور پیشفرض فعال میشوند: تا کردن کد و فایل خودکار آشکار میشود
- اشکال زدایی بهبود یافته مشکلات کوکی های شخص ثالث
- رنگ های جدید
- فانوس دریایی 10.4.0
- اشکال زدایی پیش بارگذاری در پنل برنامه
- افزونه اشکال زدایی C/C++ WebAssembly برای DevTools اکنون منبع باز است
- نکات برجسته متفرقه
- (تجربی) شبیه سازی رندر جدید: ترجیح-کاهش-شفافیت
- مانیتور پروتکل پیشرفته (تجربی).
- اشکال زدایی بهبود یافته شیوه نامه های گمشده
- پشتیبانی از زمانبندی خطی در Elements > Styles > Easing Editor
- پشتیبانی از سطل های ذخیره سازی و مشاهده فراداده
- فانوس دریایی 10.3.0
- دسترسی: دستورات صفحه کلید و خواندن صفحه نمایش بهبود یافته
- نکات برجسته متفرقه
- بهبود عناصر
- نشان جدید زیرشبکه CSS
- ویژگی انتخابگر در راهنمای ابزار
- مقادیر خصوصیات CSS سفارشی در راهنمای ابزار
- بهبود منابع
- برجسته کردن نحو CSS
- میانبر برای تنظیم نقاط شکست شرطی
- Application > Bounce Tracking Mitigations
- فانوس دریایی 10.2.0
- به طور پیش فرض اسکریپت های محتوا را نادیده بگیرید
- شبکه > بهبود پاسخ
- نکات برجسته متفرقه
- پشتیبانی از اشکال زدایی WebAssembly
- بهبود رفتار قدم زدن در برنامههای Wasm
- با استفاده از پانل عناصر و تب Issues، تکمیل خودکار را اشکال زدایی کنید
- ادعاها در ضبط
- فانوس دریایی 10.1.1
- بهبود عملکرد
- performance.mark() زمان بندی را در حالت شناور در Performance > Timings نشان می دهد
- دستور profile() Performance > Main را پر می کند
- هشدار برای تعامل کند کاربر
- به روز رسانی Web Vitals
- حذف پروفایل جاوا اسکریپت: فاز سوم
- نکات برجسته متفرقه
- هدرهای پاسخ شبکه را لغو کنید
- بهبود اشکال زدایی Nuxt، Vite و Rollup
- بهبودهای CSS در Elements > Styles
- خواص و مقادیر CSS نامعتبر است
- پیوند به فریمهای کلیدی در ویژگی کوتاهنویسی انیمیشن
- تنظیمات کنسول جدید: تکمیل خودکار در Enter
- Command Menu بر روی فایل های نوشته شده تاکید دارد
- حذف پروفایل جاوا اسکریپت: مرحله دوم
- نکات برجسته متفرقه
- به روز رسانی ضبط
- پسوندهای پخش مجدد ضبط
- با انتخابگرهای پیرس ضبط کنید
- صادرات ضبط شده به عنوان اسکریپت Puppeteer با تجزیه و تحلیل Lighthouse
- دریافت برنامه های افزودنی برای Recorder
- عناصر > بهروزرسانیهای سبک
- مستندات CSS در پانل Styles
- پشتیبانی از تودرتو CSS
- علامت گذاری نقاط ورود و خروج شرطی در کنسول
- اسکریپت های نامربوط را در حین اشکال زدایی نادیده بگیرید
- منسوخ شدن JavaScript Profiler شروع شد
- تقلید کنتراست کاهش یافته
- فانوس دریایی 10
- نکات برجسته متفرقه
- اشکال زدایی رنگ HD با صفحه Styles
- UX نقطه شکست پیشرفته
- میانبرهای ضبط کننده قابل تنظیم
- هایلایت سینتکس بهتر برای Angular
- حافظه پنهان را در پانل برنامه سازماندهی مجدد کنید
- نکات برجسته متفرقه
- پاک کردن پنل عملکرد در بارگذاری مجدد
- به روز رسانی ضبط
- کد جریان کاربر خود را در Recorder مشاهده و برجسته کنید
- انواع انتخابگر یک ضبط را سفارشی کنید
- جریان کاربر را هنگام ضبط ویرایش کنید
- خودکار چاپ زیبا در محل
- برجسته سازی بهتر نحو و پیش نمایش درون خطی برای Vue، SCSS و موارد دیگر
- تکمیل خودکار ارگونومیک و ثابت در کنسول
- نکات برجسته متفرقه
- ضبط: به عنوان گزینه برای مراحل، پخش مجدد درون صفحه، منوی زمینه مرحله کپی کنید
- نمایش نام عملکردهای واقعی در ضبط های عملکرد
- میانبرهای صفحه کلید جدید در پنل Console & Sources
- اشکال زدایی جاوا اسکریپت بهبود یافته است
- نکات برجسته متفرقه
- [تجربی] UX پیشرفته در مدیریت نقاط شکست
- [تجربی] چاپ زیبای خودکار در محل
- نکاتی برای ویژگی های غیر فعال CSS
- شناسایی خودکار XPath و انتخابگرهای متن در پانل Recorder
- از عبارات جدا شده با کاما عبور کنید
- بهبود تنظیمات فهرست نادیده گرفتن
- نکات برجسته متفرقه
- میانبرهای صفحه کلید را در DevTools سفارشی کنید
- با میانبر صفحه کلید، تم های روشن و تاریک را تغییر دهید
- اشیاء C/C++ را در Memory Inspector برجسته کنید
- پشتیبانی از اطلاعات کامل آغازگر برای واردات HAR
- پس از فشردن
Enter
جستجوی DOM را شروع کنید - نمادهای
start
وend
برای ویژگی های CSS flexboxalign-content
کنید - نکات برجسته متفرقه
- گروه بندی فایل ها توسط نویسنده / مستقر در پنل منابع
- ردیابی پشته های مرتبط برای عملیات ناهمزمان
- به طور خودکار اسکریپت های شخص ثالث شناخته شده را نادیده بگیرید
- پشته تماس بهبود یافته در حین اشکال زدایی
- مخفی کردن منابع فهرست شده نادیده گرفته شده در پانل منابع
- پنهان کردن فایلهای فهرستشده نادیده گرفته شده در منوی فرمان
- آهنگ تعاملات جدید در پانل عملکرد
- تفکیک زمان بندی LCP در پانل Performance Insights
- نام پیشفرض ضبط شده را در پانل ضبط به صورت خودکار ایجاد کنید
- نکات برجسته متفرقه
- پخش گام به گام در Recorder
- پشتیبانی از ماوس روی رویداد در پانل ضبط
- بزرگترین رنگ محتوایی (LCP) در پانل بینش عملکرد
- فلاش های متن (FOIT، FOUT) را به عنوان دلایل ریشه ای بالقوه برای تغییر چیدمان شناسایی کنید
- کنترل کننده های پروتکل در پنجره Manifest
- نشان لایه بالایی در پانل عناصر
- اطلاعات اشکال زدایی Wasm را در زمان اجرا پیوست کنید
- پشتیبانی از ویرایش زنده در حین اشکال زدایی
- مشاهده و ویرایش @scope در قوانین موجود در صفحه Styles
- بهبود نقشه منبع
- نکات برجسته متفرقه
- در حین رفع اشکال، قاب را مجدداً راه اندازی کنید
- گزینه های پخش آهسته در پانل ضبط
- یک پسوند برای پنل Recorder بسازید
- گروه بندی فایل ها توسط نویسنده / مستقر در پنل منابع
- آهنگ زمانبندی کاربر جدید در پانل بینش عملکرد
- شکاف اختصاص داده شده یک عنصر را نشان دهید
- شبیه سازی همزمانی سخت افزار برای ضبط های عملکرد
- پیش نمایش مقدار غیر رنگی هنگام تکمیل خودکار متغیرهای CSS
- قابهای مسدودکننده را در پنجره کش Back/Forward شناسایی کنید
- پیشنهادات تکمیل خودکار بهبود یافته برای اشیاء جاوا اسکریپت
- بهبود نقشه های منبع
- نکات برجسته متفرقه
- رویدادهای دوبار کلیک و کلیک راست را در پانل ضبط ضبط کنید
- بازه زمانی جدید و حالت عکس فوری در پنل Lighthouse
- کنترل زوم بهبود یافته در پانل Performance Insights
- برای حذف عملکرد ضبط شده، تأیید کنید
- ترتیب پانل ها را در پانل عناصر تغییر دهید
- انتخاب رنگ خارج از مرورگر
- پیش نمایش مقدار درون خطی بهبود یافته در حین اشکال زدایی
- پشتیبانی از حباب های بزرگ برای احراز هویت مجازی
- میانبرهای صفحه کلید جدید در پانل منابع
- بهبود نقشه های منبع
- ویژگی پیشنمایش: پانل بینش عملکرد جدید
- میانبرهای جدید برای شبیه سازی تم های روشن و تاریک
- امنیت بهبود یافته در برگه پیش نمایش شبکه
- بارگذاری مجدد در نقطه شکست بهبود یافته است
- به روز رسانی کنسول
- در شروع ضبط جریان کاربر را لغو کنید
- عناصر شبه هایلایت به ارث رسیده را در قسمت Styles نمایش دهید
- نکات برجسته متفرقه
- [تجربی] تغییرات CSS را کپی کنید
- [تجربی] انتخاب رنگ خارج از مرورگر
- وارد کردن و صادر کردن جریان های کاربر ضبط شده به عنوان یک فایل JSON
- لایههای آبشاری را در قسمت Styles مشاهده کنید
- پشتیبانی از تابع رنگ
hwb()
- نمایش املاک خصوصی را بهبود بخشید
- نکات برجسته متفرقه
- [تجربی] بازه زمانی جدید و حالت عکس فوری در پانل Lighthouse
- @supports را در قوانین موجود در صفحه Styles مشاهده و ویرایش کنید
- به طور پیش فرض از انتخابگرهای رایج پشتیبانی کنید
- انتخابگر ضبط را سفارشی کنید
- تغییر نام یک ضبط شده
- پیش نمایش ویژگی های کلاس/تابع در شناور
- فریم هایی که تا حدی در پانل عملکرد ارائه شده است
- نکات برجسته متفرقه
- کاهش درخواست های WebSocket
- پنجره API گزارش جدید در پانل برنامه
- پشتیبانی صبر کنید تا عنصر در پانل ضبط قابل مشاهده/کلیک باشد
- یک ظاهر طراحی، قالب بندی و فیلتر کردن کنسول بهتر است
- افزونه کروم را با فایل های نقشه منبع اشکال زدایی کنید
- درخت پوشه منبع بهبود یافته در پانل Sources
- فایل های منبع کارگر را در پنل Sources نمایش دهید
- بهروزرسانیهای تم تاریک خودکار Chrome
- انتخابگر رنگ و جداکننده لمسی
- نکات برجسته متفرقه
- ویژگی پیش نمایش: درخت دسترسی تمام صفحه
- تغییرات دقیق تر در تب تغییرات
- زمان طولانی تری را برای ضبط جریان کاربر تنظیم کنید
- مطمئن شوید که صفحات شما با برگه Back/Forward cache قابل کش هستند
- فیلتر پنجره Properties جدید
- ویژگی رسانه رنگ های اجباری CSS را شبیه سازی کنید
- نمایش خط کش ها در فرمان شناور
- در ویرایشگر Flexbox
row-reverse
وcolumn-reverse
پشتیبانی کنید - میانبرهای صفحه کلید جدید برای پخش مجدد XHR و گسترش همه نتایج جستجو
- فانوس دریایی 9 در پنل Lighthouse
- پانل منابع بهبود یافته
- نکات برجسته متفرقه
- [تجربی] نقاط پایانی در قاب Reporting API
- ویژگی پیش نمایش: پنل ضبط جدید
- لیست دستگاه را در حالت دستگاه بازخوانی کنید
- تکمیل خودکار با ویرایش به عنوان HTML
- بهبود تجربه اشکال زدایی کد
- همگام سازی تنظیمات DevTools در بین دستگاه ها
- ویژگی پیش نمایش: پنل نمای کلی CSS جدید
- بازیابی و بهبود تجربه ویرایش و کپی طول CSS
- ویژگی CSS prefers-contrast را شبیه سازی کنید
- ویژگی تم تاریک خودکار Chrome را شبیهسازی کنید
- اعلان ها را به صورت جاوا اسکریپت در قسمت Styles کپی کنید
- تب جدید Payload در پنل Network
- نمایش خصوصیات را در قسمت Properties بهبود بخشید
- گزینه ای برای پنهان کردن خطاهای CORS در کنسول
- پیش نمایش و ارزیابی مناسب اشیاء
Intl
در کنسول - ردیابی پشته ناهمگام ثابت
- نوار کناری کنسول را حفظ کنید
- پنجره کش برنامه منسوخ شده در پانل برنامه
- [تجربی] قاب API گزارش جدید در پانل برنامه
- ابزارهای جدید نوشتن CSS طول
- مشکلات را در برگه Issues پنهان کنید
- نمایش خواص را بهبود بخشید
- Lighthouse 8.4 در پنل Lighthouse
- قطعات را در پانل Sources مرتب کنید
- پیوندهای جدید به یادداشت های انتشار ترجمه شده و گزارش یک اشکال ترجمه
- رابط کاربری بهبود یافته برای منوی فرمان DevTools
- از DevTools به زبان دلخواه خود استفاده کنید
- دستگاههای Nest Hub جدید در فهرست دستگاهها
- آزمایشهای اولیه در نمای جزئیات قاب
- نشان جدید جستجوهای ظرف CSS
- چک باکس جدید برای معکوس کردن فیلترهای شبکه
- منسوخ شدن آتی نوار کناری کنسول
- هدرهای
Set-Cookies
خام را در برگه Issues و پانل شبکه نمایش دهید - دسترسی های بومی را به عنوان ویژگی های خود در کنسول نمایش می دهد
- ردیابی پشته خطای مناسب برای اسکریپت های درون خطی با #sourceURL
- فرمت رنگ را در قسمت Computed تغییر دهید
- راهنمای ابزار سفارشی را با راهنمای ابزار HTML بومی جایگزین کنید
- [تجربی] مشکلات را در برگه Issues پنهان کنید
- پرس و جوهای ظرف CSS قابل ویرایش در پانل Styles
- پیش نمایش بسته نرم افزاری وب در پانل شبکه
- اشکال زدایی API Reporting Attribution
- مدیریت بهتر رشته در کنسول
- اشکال زدایی CORS بهبود یافته است
- فانوس دریایی 8.1
- URL یادداشت جدید در صفحه Manifest
- انتخابگرهای تطبیق CSS را ثابت کرد
- چاپ زیبا پاسخ های JSON در پانل شبکه
- ویرایشگر شبکه CSS
- پشتیبانی از اعلان مجدد
const
در کنسول - نمایشگر سفارش منبع
- میانبر جدید برای مشاهده جزئیات قاب
- پشتیبانی از اشکال زدایی CORS پیشرفته
- نام برچسب XHR را به Fetch/XHR تغییر دهید
- نوع منبع Wasm را در پنل Network فیلتر کنید
- راهنمای کاربر-عامل مشتری برای دستگاههای موجود در برگه شرایط شبکه
- مشکلات حالت Quirks را در برگه Issues گزارش کنید
- Compute Intersections را در پنل Performance قرار دهید
- Lighthouse 7.5 در پنل Lighthouse
- منوی زمینه «راهاندازی مجدد قاب» در پشته تماس منسوخ شده است
- [تجربی] مانیتور پروتکل
- [تجربی] ضبط عروسکی
- اطلاعات Web Vitals ظاهر می شود
- بازرس جدید حافظه
- تجسم CSS scroll-snap
- پنجره تنظیمات نشان جدید
- پیش نمایش تصویر پیشرفته با اطلاعات نسبت ابعاد
- دکمه شرایط شبکه جدید با گزینه هایی برای پیکربندی
Content-Encoding
s - میانبر برای مشاهده مقدار محاسبه شده
- کلمه کلیدی
accent-color
- انواع مسئله را با رنگ ها و نمادها دسته بندی کنید
- توکن های Trust را حذف کنید
- ویژگی های مسدود شده در نمای جزئیات قاب
- آزمایشها را در تنظیمات آزمایشها فیلتر کنید
- ستون جدید
Vary Header
در پنجره ذخیره سازی Cache - از بررسی برند خصوصی جاوا اسکریپت پشتیبانی کنید
- پشتیبانی پیشرفته از اشکال زدایی نقاط شکست
- از پیش نمایش شناور با نماد
[]
پشتیبانی کنید - طرح کلی فایل های HTML بهبود یافته است
- ردیابی پشته خطای مناسب برای اشکال زدایی Wasm
- ابزارهای جدید اشکال زدایی CSS flexbox
- همپوشانی Core Web Vitals جدید
- تعداد مشکلات به نوار وضعیت کنسول منتقل شد
- مشکلات مربوط به فعالیت وب مورد اعتماد را گزارش کنید
- رشته ها را به صورت (معتبر) رشته های جاوا اسکریپت در کنسول قالب بندی کنید
- پنل جدید Trust Tokens در پنل Application
- ویژگی رسانه رنگی CSS را شبیه سازی کنید
- بهبود ابزار برنامه های وب پیشرفته
- ستون جدید
Remote Address Space
در پانل Network - بهبود عملکرد
- نمایش ویژگی های مجاز/غیر مجاز در نمای جزئیات قاب
- ستون
SameParty
جدید در قسمت Cookies - پشتیبانی غیر استاندارد
fn.displayName
منسوخ شده است - منسوخ شدن
Don't show Chrome Data Saver warning
- [تجربی] گزارش خودکار مشکل کم کنتراست در برگه Issues
- [تجربی] نمای درختی دسترسی کامل در پانل عناصر
- پشتیبانی از اشکال زدایی برای نقض Trusted Types
- گرفتن اسکرین شات از گره فراتر از درگاه دید
- تب جدید Trust Tokens برای درخواست های شبکه
- فانوس دریایی 7 در پنل Lighthouse
- پشتیبانی از اجبار CSS
:target
- میانبر جدید برای عنصر تکراری
- انتخابگرهای رنگ برای خصوصیات CSS سفارشی
- میانبرهای جدید برای کپی ویژگی های CSS
- گزینه جدیدی برای نمایش کوکی های رمزگشایی شده با URL
- فقط کوکی های قابل مشاهده را پاک کنید
- گزینه جدیدی برای پاک کردن کوکیهای شخص ثالث در صفحه ذخیرهسازی
- نکات کاربر-عامل مشتری را برای دستگاه های سفارشی ویرایش کنید
- تنظیمات "ثبت گزارش شبکه" را ادامه دهید
- اتصالات WebTransport را در پنل Network مشاهده کنید
- "آنلاین" به "بدون درنگ" تغییر نام داد
- گزینه های کپی جدید در کنسول، پانل منابع و صفحه سبک ها
- اطلاعات New Service Workers در نمای جزئیات قاب
- اطلاعات حافظه را در نمای جزئیات قاب اندازه گیری کنید
- بازخورد خود را از برگه Issues ارائه دهید
- فریم های افت شده در پانل عملکرد
- شبیه سازی تاشو و دو صفحه نمایش در حالت دستگاه
- [تجربی] تست مرورگر را با Puppeteer Recorder به صورت خودکار انجام دهید
- [تجربی] ویرایشگر فونت در قسمت Styles
- [تجربی] ابزارهای اشکال زدایی CSS flexbox
- [تجربی] برگه جدید نقض CSP
- [تجربی] محاسبه کنتراست رنگ جدید - الگوریتم کنتراست ادراکی پیشرفته (APCA)
- راه اندازی سریعتر DevTools
- ابزارهای جدید تجسم زاویه CSS
- انواع تصاویر پشتیبانی نشده را شبیه سازی کنید
- اندازه سهمیه ذخیره سازی را در قسمت Storage شبیه سازی کنید
- خط جدید Web Vitals در پانل عملکرد
- خطاهای CORS را در پانل شبکه گزارش دهید
- اطلاعات جداسازی مبدا متقاطع در نمای جزئیات قاب
- اطلاعات جدید Web Workers در نمای جزئیات قاب
- نمایش جزئیات قاب بازکن برای پنجره های باز
- پنل Network را از قسمت Service Workers باز کنید
- کپی ارزش ملک
- stacktrace را برای آغازگر شبکه کپی کنید
- پیش نمایش مقدار متغیر Wasm روی ماوس
- متغیر Wasm را در کنسول ارزیابی کنید
- واحدهای اندازه گیری ثابت برای اندازه فایل/حافظه
- عناصر شبه را در پانل عناصر برجسته کنید
- [تجربی] ابزارهای اشکال زدایی CSS Flexbox
- [تجربی] میانبرهای صفحه کلید آکوردها را سفارشی کنید
- ابزارهای جدید اشکال زدایی CSS Grid
- تب جدید WebAuthn
- ابزارها را بین پانل بالا و پایین حرکت دهید
- صفحه نوار کناری محاسبهشده جدید در بخش سبکها
- گروه بندی خصوصیات CSS در صفحه Computed
- Lighthouse 6.3 در پنل Lighthouse
- رویدادهای
performance.mark()
در بخش زمانبندی - فیلترهای
resource-type
وurl
جدید در پانل شبکه - جزئیات قاب مشاهده به روز رسانی
- منسوخ شدن
Settings
در منوی ابزارهای بیشتر - [تجربی] مشکلات کنتراست رنگ را در پانل نمای کلی CSS مشاهده و رفع کنید
- [تجربی] میانبرهای صفحه کلید را در DevTools سفارشی کنید
- پنل رسانه جدید
- با استفاده از منوی زمینه پانل عناصر، اسکرین شات از گره بگیرید
- مسائل به روز رسانی برگه
- فونت های محلی گم شده را شبیه سازی کنید
- شبیه سازی کاربران غیرفعال
- شبیه سازی
prefers-reduced-data
- پشتیبانی از ویژگی های جدید جاوا اسکریپت
- Lighthouse 6.2 در پنل Lighthouse
- منسوخ شدن فهرست "منشاهای دیگر" در بخش Service Workers
- نمایش خلاصه پوشش برای موارد فیلتر شده
- مشاهده جزئیات قاب جدید در پنل برنامه
- پیشنهاد رنگ قابل دسترس در قسمت Styles
- پنجره Properties را در پانل Elements بازگردانید
- مقادیر هدر
X-Client-Data
قابل خواندن توسط انسان در پانل شبکه - تکمیل خودکار فونت های سفارشی در قسمت Styles
- به طور مداوم نوع منبع را در پنل شبکه نمایش دهید
- دکمه های پاک کردن در پانل های عناصر و شبکه
- ویرایش سبک برای چارچوب های CSS-in-JS
- فانوس دریایی 6 در پنل Lighthouse
- اولین منسوخ شدن رنگ معنی دار (FMP).
- پشتیبانی از ویژگی های جدید جاوا اسکریپت
- هشدارهای میانبر برنامه جدید در قسمت Manifest
-
respondWith
کارگر سرویس با رویدادها در برگه زمانبندی - نمایش یکنواخت صفحه محاسبه شده
- آفست بایت کد برای فایل های WebAssembly
- به صورت خطی کپی و در پنل منابع برش دهید
- به روز رسانی تنظیمات کنسول
- به روز رسانی پنل عملکرد
- نمادهای جدید برای نقاط شکست، نقاط شکست شرطی و نقاط ورود
- مشکلات سایت را با تب جدید Issues برطرف کنید
- اطلاعات دسترسپذیری را در راهنمای ابزار Inspect Mode مشاهده کنید
- به روز رسانی پنل عملکرد
- اصطلاحات قول دقیق تر در کنسول
- بهروزرسانیهای پنجره سبکها
- منسوخ شدن پنجره Properties در پنل Elements
- پشتیبانی از میانبرهای برنامه در قسمت Manifest
- تقلید از کمبودهای بینایی
- شبیه سازی مناطق
- اشکال زدایی خط مشی جاسازی متقابل (COEP).
- نمادهای جدید برای نقاط شکست، نقاط شکست شرطی و نقاط ورود
- مشاهده درخواست های شبکه که یک کوکی خاص را تنظیم می کند
- از منوی فرمان به سمت چپ متصل شوید
- گزینه تنظیمات در منوی اصلی منتقل شده است
- پنل ممیزی اکنون پنل Lighthouse است
- تمام لغوهای محلی را در یک پوشه حذف کنید
- رابط کاربری Long Tasks به روز شد
- پشتیبانی از نمادهای قابل پوشاندن در پنجره Manifest
- پشتیبانی Moto G4 در حالت دستگاه
- به روزرسانی های مربوط به کوکی
- نمادهای مانیفست برنامه وب دقیق تر
- برای دیدن مقادیر غیرقابل تحمل بیش از خصوصیات
content
CSS شناور - خطاهای نقشه منبع در کنسول
- تنظیم برای غیرفعال کردن پیمایش گذشته از انتهای یک پرونده
- پشتیبانی از
let
و redeclarationsclass
در کنسول - اشکال زدایی وب سایت بهبود یافته
- زنجیره های آغازگر را در برگه آغازگر درخواست کنید
- درخواست شبکه انتخاب شده را در نمای کلی برجسته کنید
- ستون های URL و مسیر در پنل شبکه
- رشته های کاربر و عامل به روز شده
- UI پیکربندی پنل حسابرسی جدید
- در هر عملکرد یا حالت های پوشش کد هر بلوک
- پوشش کد اکنون باید با بارگیری مجدد صفحه آغاز شود
- اشکال زدایی چرا یک کوکی مسدود شده است
- مشاهده مقادیر کوکی
- شبیه سازی ترجیحات مختلف-رنگ-رنگ را ترجیح می دهد و ترجیحات حرکتی را ترجیح می دهد
- به روزرسانی های پوشش کد
- اشکال زدایی چرا از یک منبع شبکه درخواست شده است
- پانل های کنسول و منابع دوباره به ترجیحات تورفتگی احترام می گذارند
- میانبرهای جدید برای ناوبری مکان نما
- پشتیبانی چند مشتری در پانل حسابرسی
- اشکال زدایی کنترل کننده پرداخت
- Lighthouse 5.2 در پانل حسابرسی
- بزرگترین رنگ محتوا در پانل عملکرد
- پرونده های devtools از منوی اصلی
- کپی کردن سبک های عنصر
- تغییرات طرح را تجسم کنید
- فانوس دریایی 5.1 در پانل حسابرسی
- همگام سازی موضوع سیستم عامل
- میانبر صفحه کلید برای باز کردن ویرایشگر Breakpoint
- حافظه نهان را در پنل شبکه پیش بینی کنید
- خصوصیات خصوصی هنگام مشاهده اشیاء
- اعلان ها و پیام ها را در صفحه برنامه فشار دهید
- خودکار با مقادیر CSS
- UI جدید برای تنظیمات شبکه
- پیام های WebSocket در HAR صادرات
- دکمه های واردات و صادرات هار
- استفاده از حافظه در زمان واقعی
- شماره پورت ثبت نام کارگر خدمات
- رویدادهای همگام سازی پس زمینه و پس زمینه را بازرسی کنید
- عروسک برای Firefox
- از پیش تعیین شده معنی دار هنگام عملکرد خودکار CSS
- داده های سایت را از منوی فرمان پاک کنید
- مشاهده همه بانکهای اطلاعاتی IndexedDB
- اندازه فشرده نشده یک منبع را در شناور مشاهده کنید
- نقاط شکست درون خطی در صفحه نقاط شکست
- شمارش منابع intexedDB و حافظه نهان
- تنظیم برای غیرفعال کردن ابزار دقیق بازرسی
- تنظیم برای تورفتگی زبانه در ویرایشگر
- تمام گره های تحت تأثیر خاصیت CSS را برجسته کنید
- فانوس دریایی V4 در پانل حسابرسی
- بیننده پیام باینری WebSocket
- ضبط تصویر منطقه در منوی فرمان
- فیلترهای کارگر سرویس در پنل شبکه
- به روزرسانی های پانل عملکرد
- کارهای طولانی در ضبط پانل عملکرد
- ابتدا در بخش زمان بندی رنگ کنید
- نکته جایزه: میانبر برای مشاهده کدهای رنگی RGB و HSL (فیلم)
- نقاط ورود به سیستم
- وسایل ابزار دقیق در حالت بازرسی
- داده های پوشش کد صادراتی
- با صفحه کلید در کنسول حرکت کنید
- خط نسبت کنتراست AAA در انتخاب رنگ
- صرفه جویی در مورد جغرافیایی سفارشی
- تاشو کد
- برگه فریم به برگه پیام ها تغییر نام داد
- نکته جایزه: فیلتر پنل شبکه توسط ویژگی (ویدئو)
- معیارهای عملکرد را در صفحه عملکرد تجسم کنید
- گره های متن را در درخت DOM برجسته کنید
- مسیر JS را به یک گره DOM کپی کنید
- به روزرسانی های پانل حسابرسی ، از جمله حسابرسی جدید که کتابخانه های JS و کلمات کلیدی جدید را برای دسترسی به پانل حسابرسی از منوی فرمان تشخیص می دهد
- نکته جایزه: از حالت دستگاه برای بازرسی از نمایش داده های رسانه ای استفاده کنید (ویدئو)
- برای برجسته کردن یک گره DOM روی یک نتیجه بیان زنده شناور شوید
- گره های DOM را به عنوان متغیرهای جهانی ذخیره کنید
- اطلاعات آغازگر و اولویت در حال حاضر در واردات و صادرات HAR
- از منوی اصلی به منوی فرمان دسترسی پیدا کنید
- نقاط شکست تصویر در تصویر
- نکته جایزه: از
monitorEvents()
برای ورود به وقایع اخراج گره در کنسول استفاده کنید (ویدئو) - عبارات زنده در کنسول
- گره های DOM را در طول ارزیابی مشتاق برجسته کنید
- بهینه سازی پانل عملکرد
- اشکال زدایی قابل اطمینان تر
- از منوی فرمان ، ضربه زدن به شبکه را فعال کنید
- نقاط شکست مشروط خودکار
- شکستن در رویدادهای AudioContext
- برنامه های اشکال زدایی Node.js با NDB
- نکته جایزه: تعامل کاربر دنیای واقعی را با API زمان بندی کاربر اندازه گیری کنید
- ارزیابی ماهر
- نکات بحث
- عملکرد خودکار عملکرد
- کلمات کلیدی ES2017
- Lighthouse 3.0 در پانل حسابرسی
- پشتیبانی bigint
- اضافه کردن مسیرهای خاصیت به صفحه ساعت
- "نمایش زمان" به تنظیمات منتقل شد
- نکته جایزه: روش های کنسول کمتر شناخته شده (ویدئو)
- در تمام هدرهای شبکه جستجو کنید
- پیش نمایش ارزش متغیر CSS
- کپی به صورت واکشی
- حسابرسی های جدید ، گزینه های پیکربندی دسک تاپ و اثری از مشاهده
- حلقه های بی نهایت را متوقف کنید
- زمان بندی کاربر در برگه های عملکرد
- موارد JavaScript VM به وضوح در پانل حافظه ذکر شده است
- برگه شبکه به برگه صفحه تغییر نام داد
- به روزرسانی های تم تاریک
- اطلاعات شفافیت گواهینامه در پانل امنیتی
- ویژگی های جداسازی سایت در پانل عملکرد
- نکته جایزه: پانل لایه ها + بازرس انیمیشن (ویدئو)
- Blackboxing در پنل شبکه
- بزرگنمایی خودکار در حالت دستگاه
- چاپ زیبا در برگه های پیش نمایش و پاسخ
- پیش نمایش محتوای HTML در برگه پیش نمایش
- حمایت محلی از سبک های داخل HTML حمایت می کند
- نکته جایزه: اسکریپت های چارچوب Blackbox برای ایجاد نقاط ضعف شنونده رویداد مفیدتر است
- نادیده گرفتن محلی
- ابزارهای دسترسی جدید
- برگه تغییرات
- حسابرسی جدید سئو و عملکرد
- ضبط های چندگانه در پانل عملکرد
- کدهای قابل اعتماد با کارگران در کد Async
- نکته پاداش: اقدامات DevTools را با Puppeteer (فیلم) خودکار کنید
- مانیتور عملکرد
- نوار کناری
- پیام های کنسول مشابه گروهی
- نکته پاداش: شبه کلاس شبه Hover Hover (ویدئو)
- پشتیبانی اشکال زدایی از راه دور چند مشتری
- فضای کاری 2.0
- 4 ممیزی جدید
- اعلان های فشار را با داده های سفارشی شبیه سازی کنید
- وقایع همگام سازی پس زمینه را با برچسب های سفارشی ماشه تنظیم کنید
- نکته جایزه: نقاط شکست شنونده رویداد (فیلم)
- سطح بالا در انتظار کنسول است
- گردش کار جدید تصاویر
- برجسته شبکه CSS
- یک API کنسول جدید برای پرس و جو اشیاء
- فیلترهای کنسول جدید
- هار در پنل شبکه وارد می کند
- منابع حافظه پنهان قابل پیش نمایش
- اشکال زدایی حافظه پنهان قابل پیش بینی تر
- پوشش کد سطح بلوک
- شبیه سازی پرتاب دستگاه تلفن همراه
- مشاهده استفاده از ذخیره سازی
- مشاهده وقتی یک کارگر سرویس پاسخ می دهد
- از منوی فرمان متر FPS را فعال کنید
- رفتار ماوس را برای بزرگنمایی یا پیمایش تنظیم کنید
- پشتیبانی اشکال زدایی برای ماژول های ES6
- پانل حسابرسی جدید
- نشان های حزب 3
- یک ژست جدید برای ادامه به اینجا
- قدم به async
- پیش نمایش های شیء آموزنده تر در کنسول
- انتخاب زمینه آموزنده تر در کنسول
- به روزرسانی های زمان واقعی در برگه پوشش
- گزینه های ساده تر ضربه زدن به شبکه
- به طور پیش فرض پشته های async
- پوشش کد CSS و JS
- تصاویر تمام صفحه
- مسدود کردن درخواست ها
- قدم بیش از Async در انتظار
- منوی فرمان متحد
کروم 130
کروم 129
کروم 128
کروم 127
کروم 126
کروم 125
کروم 124
کروم 123
کروم 122
کروم 121
کروم 120
کروم 119
کروم 118
کروم 117
کروم 116
کروم 115
کروم 114
کروم 113
کروم 112
کروم 111
کروم 110
کروم 109
کروم 108
کروم 107
کروم 106
کروم 105
کروم 104
کروم 103
کروم 102
کروم 101
کروم 100
کروم 99
کروم 98
کروم 97
کروم 96
کروم 95
کروم 94
کروم 93
کروم 92
کروم 91
کروم 90
کروم 89
کروم 88
کروم 87
کروم 86
کروم 85
کروم 84
کروم 83
کروم 82
کروم 81
Chrome 80
کروم 79
کروم 78
کروم 77
کروم 76
کروم 75
کروم 74
Chrome 73
کروم 72
کروم 71
Chrome 70
کروم 68
کروم 67
کروم 66
کروم 65
کروم 64
کروم 63
کروم 62
کروم 61
کروم 60
کروم 59
به روزرسانی های ضبط کننده
پشتیبانی از برنامه های افزودنی پخش مجدد
ضبط کننده پشتیبانی از گزینه های پخش سفارشی را ارائه می دهد که می توانید با پسوند در 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 بهبود خودکار را بهبود بخشید:
- 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 پوشش داده شده است.
- بهبود پانل شبکه
- فیلترهای شبکه مجدداً تصور می شوند
- HAR صادرات اکنون داده های حساس را به طور پیش فرض حذف می کند
- پیشرفت های پانل عناصر
- مقادیر خودکار برای تأکید متن-* خصوصیات
- سرریزهای پیمایش شده با نشان نشان داده شده است
- بهبود پانل عملکرد
- توصیه ها در معیارهای زنده
- سوخاری ها را پیمایش کنید
- بهبود پانل حافظه
- نمایه جدید "عناصر جدا شده"
- نامگذاری بهبود یافته اشیاء JS ساده
- مضامین پویا را خاموش کنید
- آزمایش کروم: به اشتراک گذاری فرآیند
- فانوس دریایی 12.2.1
- نکات برجسته متفرقه
- ضبط از صادرات به Puppeteer برای Firefox پشتیبانی می کند
- بهبود پانل عملکرد
- مشاهدات معیارهای زنده
- درخواست ها را در مسیر شبکه جستجو کنید
- به آثار پشته عملکرد. مارک و عملکرد. تماس با ما مراجعه کنید
- از داده های آدرس آزمون در پانل Autofill استفاده کنید
- پیشرفت های پانل عناصر
- دولت های بیشتری را برای عناصر خاص مجبور کنید
- عناصر> سبک ها در حال حاضر به صورت خودکار خاصیت شبکه
- فانوس دریایی 12.2.0
- نکات برجسته متفرقه
- بینش های کنسول توسط جمینی در اکثر کشورهای اروپایی زندگی می کنند
- به روزرسانی های پانل عملکرد
- آهنگ پیشرفته شبکه
- داده های عملکرد را با API قابل گسترش سفارشی کنید
- جزئیات در آهنگ زمان بندی
- تمام درخواست های ذکر شده را در پنل شبکه کپی کنید
- عکسهای سریعتر پشته با برچسب های HTML نامگذاری شده و درهم و برهمی کمتر
- پانل انیمیشن های باز برای ضبط انیمیشن ها و ویرایش keyframes به صورت زنده
- فانوس دریایی 12.1.0
- بهبود دسترسی
- نکات برجسته متفرقه
- موقعیت یابی لنگر CSS را در پانل عناصر بازرسی کنید
- پیشرفت پانل منابع
- پیشرفته "هرگز در اینجا مکث نکنید"
- شنوندگان رویداد جدید SNAP SNAP
- بهبود پانل شبکه
- از پیش تنظیم شده از پیش تنظیم شده شبکه
- اطلاعات کارگر سرویس در زمینه های سفارشی از قالب HAR
- ارسال و دریافت رویدادهای WebSocket در پانل عملکرد
- نکات برجسته متفرقه
- بهبود پانل عملکرد
- حرکت و مخفی کردن آهنگ ها با حالت پیکربندی آهنگ به روز شده
- اسکریپت ها را در نمودار شعله نادیده بگیرید
- 20 بار CPU را گاز بگیرید
- پانل بینش عملکرد کاهش می یابد
- استفاده بیش از حد از حافظه را با فیلترهای جدید در عکس های پشته پیدا کنید
- سطل های ذخیره سازی را در برنامه> ذخیره سازی بازرسی کنید
- هشدارهای خود را با پرچم خط فرمان غیرفعال کنید
- فانوس دریایی 12.0.0
- نکات برجسته متفرقه
- خطاها و هشدارهای موجود در کنسول را با جمینی بهتر درک کنید
- @قوانین موقعیتی پشتیبانی در عناصر> سبک ها
- پیشرفت پانل منابع
- بسته بندی خودکار چاپی و بسته بندی براکت را پیکربندی کنید
- وعده های رد شده به عنوان گرفتار شناخته می شوند
- خطا در کنسول
- بهبود پانل شبکه
- عنوان های اولیه نکات را بازرسی کنید
- ستون آبشار را پنهان کنید
- بهبود پانل عملکرد
- ضبط آمار انتخاب کننده CSS
- سفارش را تغییر دهید و آهنگ ها را پنهان کنید
- نگهدارنده ها را در صفحه حافظه نادیده بگیرید
- فانوس دریایی 11.7.1
- نکات برجسته متفرقه
- پنل جدید Autofill
- ضربه زدن به شبکه پیشرفته برای Webrtc
- پشتیبانی انیمیشن های محور در پانل انیمیشن ها
- پشتیبانی از لانه سازی CSS بهبود یافته در عناصر> سبک ها
- پانل عملکرد پیشرفته
- توابع و فرزندانشان را در نمودار شعله مخفی کنید
- فلش از مبتکران منتخب تا رویدادهایی که آنها آغاز کرده اند
- فانوس دریایی 11.6.0
- ابزار ابزار برای دسته های خاص در حافظه> عکسهای فوری پشته
- برنامه> به روزرسانی های ذخیره سازی
- بایت های مورد استفاده برای ذخیره سازی مشترک
- وب SQL کاملاً مستهلک شده است
- بهبود پانل پوشش
- پانل لایه ها ممکن است کاهش یابد
- استهلاک پروفایل JavaScript: فاز چهارم ، نهایی
- نکات برجسته متفرقه
- تخم مرغ عید پاک را پیدا کنید
- به روزرسانی های پانل عناصر
- یک صفحه متمرکز در عناصر> سبک ها را تقلید کنید
- انتخاب رنگ ، ساعت زاویه ای و ویرایشگر تسکین در
var()
- ابزار طول CSS مستهلک می شود
- Popover برای نتیجه جستجوی انتخاب شده در عملکرد> آهنگ اصلی
- به روزرسانی های پنل شبکه
- دکمه پاک کردن و فیلتر جستجو در شبکه> برگه EventStream
- وسایل ابزار با دلایل معافیت برای کوکی های شخص ثالث در شبکه> کوکی ها
- همه نقاط شکست در منابع را فعال و غیرفعال کنید
- مشاهده اسکریپت های بارگذاری شده در devtools برای node.js
- فانوس دریایی 11.5.0
- بهبود دسترسی
- نکات برجسته متفرقه
- مجموعه رسمی پسوندهای ضبط کننده زنده است
- پیشرفت شبکه
- دلیل عدم موفقیت در ستون وضعیت
- زیرمنو کپی بهبود یافته
- بهبود عملکرد
- آرد سوخاری در جدول زمانی
- مبتکران رویداد در مسیر اصلی
- منوی انتخاب کننده نمونه جاوا اسکریپت VM برای node.js devtools
- میانبر و فرمان جدید در منابع
- بهبود عناصر
- The :: View-Transition Pseue-Element اکنون در سبک ها قابل ویرایش است
- پشتیبانی از املاک و مستغلات برای ظروف بلوک
- پشتیبانی از وضعیت برای دستگاه های تاشو تقلید شده
- مضمون پویا
- هشدارهای فاز کوکی های شخص ثالث در پانل های شبکه و برنامه
- فانوس دریایی 11.4.0
- بهبود دسترسی
- نکات برجسته متفرقه
- بهبود عناصر
- نوار فیلتر ساده در پنل شبکه
-
@font-palette-values
پشتیبانی - مورد پشتیبانی: ملک سفارشی به عنوان یک بازپرداخت یک ملک سفارشی دیگر
- پشتیبانی نقشه منبع بهبود یافته
- بهبود پانل عملکرد
- آهنگ تعامل پیشرفته
- فیلتر پیشرفته در پایین ، درخت تماس و برگه ورود به سیستم رویداد
- نشانگرهای تورفتگی در پانل منابع
- وسایل ابزار مفید برای هدرهای ناعادلانه و محتوای موجود در پانل شبکه
- گزینه های جدید منوی فرمان برای افزودن و حذف الگوهای مسدود کننده درخواست
- آزمایش نقض CSP برداشته می شود
- فانوس دریایی 11.3.0
- بهبود دسترسی
- نکات برجسته متفرقه
- مرحله کوکی شخص ثالث
- کوکی های وب سایت خود را با ابزار تجزیه و تحلیل ماسهبازی حریم خصوصی تجزیه و تحلیل کنید
- لیست نادیده گرفته شده
- الگوی محرومیت پیش فرض برای node_modules
- استثنائات گرفتار اکنون در صورت گرفتار یا عبور از کد غیر نادیده گرفته شده ، اجرای آن را متوقف می کند
-
x_google_ignoreList
در نقشه های منبع بهignoreList
تغییر نام داد - حالت ورودی جدید در هنگام اشکال زدایی از راه دور تغییر دهید
- پانل عناصر اکنون URL هایی را برای گره های #Document نشان می دهد
- خط مشی امنیتی محتوای مؤثر در پانل برنامه
- اشکال زدایی انیمیشن بهبود یافته
- "آیا به این کد اعتماد دارید؟" گفتگو در منابع و هشدار خود در کنسول
- نقاط ضعف شنونده رویداد در کارگران وب و کارگاه ها
- نشان رسانه جدید برای
<audio>
و<video>
- از پیش بارگذاری مجدد به بارگیری سوداگرانه
- فانوس دریایی 11.2.0
- بهبود دسترسی
- نکات برجسته متفرقه
- بخش بهبود یافته Property در عناصر> سبک ها
- قانون قابل ویرایش Property
- مشکلات مربوط به قوانین نامعتبر Property گزارش شده است
- لیست به روز شده دستگاه ها برای تقلید
- json inline چاپی زیبا در برچسب های اسکریپت در منابع
- زمینه های خصوصی خودکار در کنسول
- فانوس دریایی 11.1.0
- بهبود دسترسی
- استهلاک وب SQL
- اعتبار سنجی نسبت ابعاد تصویر در برنامه> مانیفست
- نکات برجسته متفرقه
- بخش جدید برای خصوصیات سفارشی در عناصر> سبک ها
- بیشتر موضعی بیشتر پیشرفت می کند
- جستجوی پیشرفته
- پانل منابع بهبود یافته
- فضای کاری ساده در پانل منابع
- صفحات مجدد در منابع
- برجسته سازی نحو و چاپ بسیار زیبا برای انواع بیشتر اسکریپت
- تقلید از ویژگی رسانه های شفافیت کاهش یافته
- فانوس دریایی 11
- بهبود دسترسی
- نکات برجسته متفرقه
- بهبود پانل شبکه
- محتوای وب را به صورت محلی حتی سریعتر نادیده بگیرید
- محتوای درخواست های XHR و FETCH را نادیده بگیرید
- درخواست های پسوند Chrome را مخفی کنید
- کدهای وضعیت HTTP قابل خواندن انسانی
عملکرد: تغییرات در اولویت Fetch را برای رویدادهای شبکه مشاهده کنید
- تنظیمات منابع به طور پیش فرض فعال شده است: تاشو کد و فایل اتوماتیک فاش می کند
- اشکال زدایی بهبود یافته مسائل کوکی شخص ثالث
- رنگ های جدید
- فانوس دریایی 10.4.0
- پیش بارگذاری اشکال زدایی در پانل برنامه
- پسوند اشکال زدایی C/C ++ WebAssembly برای DevTools اکنون منبع باز است
- نکات برجسته متفرقه
- (تجربی) تقلید جدید رندر: تقدیر از تقدیر را ترجیح می دهد
- (آزمایش) مانیتور پروتکل پیشرفته
- اشکال زدایی بهبود یافته از برگه های شیوه ای گمشده
- پشتیبانی از زمان بندی خطی در عناصر> سبک ها> ویرایشگر آسانتر
- پشتیبانی از سطل های ذخیره سازی و نمای ابرداده
- فانوس دریایی 10.3.0
- قابلیت دسترسی: دستورات صفحه کلید و خواندن صفحه نمایش بهبود یافته
- نکات برجسته متفرقه
- بهبود عناصر
- نشان زیر شبکه CSS جدید
- ویژگی انتخاب کننده در رشته های ابزار
- مقادیر خاصیت CSS سفارشی در نوک ابزار
- پیشرفت منابع
- برجسته سازی نحو CSS
- میانبر برای تنظیم نقاط شکست مشروط
- برنامه> کاهش ردیابی گزاف گویی
- فانوس دریایی 10.2.0
- اسکریپت های محتوا را به طور پیش فرض نادیده بگیرید
- شبکه> بهبود پاسخ
- نکات برجسته متفرقه
- پشتیبانی اشکال زدایی WebAssembly
- رفتار پله بهبود یافته در برنامه های WASM
- Autofill اشکال زدایی با استفاده از صفحه عناصر و برگه شماره ها
- ادعاهای موجود در ضبط
- فانوس دریایی 10.1.1
- بهبود عملکرد
- performance.mark () زمانبندی را در شناور در عملکرد> زمان بندی نشان می دهد
- پروفایل () فرمان عملکرد را نشان می دهد> اصلی
- هشدار برای تعامل آهسته کاربر
- به روزرسانی های وب ویتام
- استهلاک پروفایل JavaScript: فاز سه
- نکات برجسته متفرقه
- سرنشینان پاسخ شبکه را نادیده بگیرید
- پیشرفت های اشکال زدایی Nuxt ، Vite و Rollup
- بهبود CSS در عناصر> سبک ها
- خصوصیات و مقادیر CSS نامعتبر است
- پیوندها به فریم های کلیدی در خاصیت Shorthand Animation
- تنظیم کنسول جدید: خودکار در Enter
- منوی فرمان بر پرونده های نویسنده تأکید می کند
- استهلاک پروفایل JavaScript: مرحله دو
- نکات برجسته متفرقه
- به روزرسانی های ضبط کننده
- پسوندهای پخش مجدد ضبط
- با انتخاب کنندگان پیرس ضبط کنید
- ضبط های صادراتی به عنوان اسکریپت های عروسکی با تجزیه و تحلیل فانوس دریایی
- پسوند برای ضبط دریافت کنید
- عناصر> به روزرسانی سبک ها
- مستندات CSS در صفحه سبک
- پشتیبانی لانه سازی CSS
- نشانه گذاری نقاط ورود به سیستم و نقاط ضعف شرطی در کنسول
- اسکریپت های بی ربط را هنگام اشکال زدایی نادیده بگیرید
- استهلاک پروفایل JavaScript آغاز شد
- تقابل کاهش یافته
- فانوس دریایی 10
- نکات برجسته متفرقه
- اشکال زدایی رنگ HD با صفحه سبک
- نقطه شکست پیشرفته UX
- میانبرهای قابل تنظیم قابل تنظیم
- برجسته بهتر نحو برای زاویه
- ذخیره سازی ذخیره سازی مجدد در صفحه برنامه
- نکات برجسته متفرقه
- پاک کردن پنل عملکرد در بارگیری مجدد
- به روزرسانی های ضبط کننده
- کد جریان کاربر خود را در ضبط مشاهده و برجسته کنید
- انواع انتخاب کننده ضبط را سفارشی کنید
- هنگام ضبط جریان کاربر را ویرایش کنید
- خودکار چاپی زیبا
- پیش نمایش بهتر نحو و پیش نمایش درون خطی برای VUE ، SCSS و موارد دیگر
- اتمام ارگونومیک و سازگار در کنسول
- نکات برجسته متفرقه
- ضبط: به عنوان گزینه هایی برای مراحل ، پخش در صفحه ، منوی زمینه مرحله کپی کنید
- نام عملکرد واقعی را در ضبط های عملکرد نشان دهید
- میانبرهای صفحه کلید جدید در پانل کنسول و منابع
- اشکال زدایی JavaScript بهبود یافته
- نکات برجسته متفرقه
- [تجربی] UX پیشرفته در مدیریت نقاط شکست
- [تجربی] چاپ اتوماتیک در مکان زیبا
- نکات مربوط به خواص CSS غیرفعال
- تنظیم خودکار XPath و انتخاب کننده متن در صفحه ضبط
- از طریق عبارات جدا از کاما قدم بردارید
- تنظیم لیست نادیده گرفته شده
- نکات برجسته متفرقه
- میانبرهای صفحه کلید را در DevTools سفارشی کنید
- مضامین نور و تیره را با میانبر صفحه کلید تغییر دهید
- اشیاء C/C ++ را در بازرس حافظه برجسته کنید
- از اطلاعات کامل آغازگر برای واردات HAR پشتیبانی کنید
- جستجوی DOM را پس از فشار دادن
Enter
شروع کنید - نمادهای
start
وend
نمایش برای خواص Flexbox CSSalign-content
- نکات برجسته متفرقه
- پرونده های گروهی توسط تالیف / مستقر در پانل منابع
- آثار پشته پیوندی برای عملیات ناهمزمان
- به طور خودکار اسکریپت های شخص ثالث شناخته شده را نادیده بگیرید
- در هنگام اشکال زدایی پشته تماس بهبود یافته
- پنهان کردن منابع فهرست شده در صفحه منابع
- مخفی کردن پرونده های نادیده گرفته شده در منوی فرمان
- تعامل جدید در پانل عملکرد
- تجزیه زمان LCP در پانل Performance Insights
- تولید خودکار نام پیش فرض برای ضبط در صفحه ضبط
- نکات برجسته متفرقه
- پخش گام به گام در ضبط
- از ماوس از رویداد در صفحه ضبط پشتیبانی کنید
- بزرگترین رنگ محتوا (LCP) در پانل عملکرد بینش
- فلاش های متن (foit ، fout) را به عنوان علل ریشه بالقوه برای تغییر طرح شناسایی کنید
- دستگیرندگان پروتکل در صفحه مانیفست
- نشان لایه بالا در پانل عناصر
- ضمیمه اطلاعات اشکال زدایی WASM در زمان اجرا
- پشتیبانی از ویرایش زنده هنگام اشکال زدایی
- مشاهده و ویرایش Scope در قوانین در صفحه سبک
- بهبود نقشه منبع
- نکات برجسته متفرقه
- قاب را هنگام اشکال زدایی مجدداً راه اندازی کنید
- گزینه های پخش آهسته در صفحه ضبط
- برای پنل ضبط یک برنامه افزودنی بسازید
- پرونده های گروهی توسط تالیف / مستقر در پانل منابع
- آهنگ زمان بندی کاربر جدید در پانل Performance Insights
- شکاف اختصاص یافته یک عنصر را نشان می دهد
- همزمانی سخت افزار را برای ضبط عملکرد شبیه سازی کنید
- پیش نمایش مقدار غیر رنگی هنگام اتمام متغیرهای CSS
- فریم های مسدود کننده را در قسمت حافظه نهان پشت/رو به جلو شناسایی کنید
- پیشنهادات خودکار بهبود یافته برای اشیاء جاوا اسکریپت
- پیشرفت نقشه ها
- نکات برجسته متفرقه
- رویدادهای دو کلیک و کلیک راست را در صفحه ضبط ضبط کنید
- حالت جدید و حالت عکس فوری در پنل فانوس دریایی
- کنترل بزرگنمایی بهبود یافته در پانل عملکرد بینش
- تأیید کنید که ضبط عملکرد را حذف کنید
- صفحات مجدد در پانل عناصر
- انتخاب یک رنگ در خارج از مرورگر
- پیش نمایش ارزش درون خطی بهبود یافته در هنگام اشکال زدایی
- از حباب های بزرگ برای تأیید کنندگان مجازی پشتیبانی کنید
- میانبرهای صفحه کلید جدید در پانل منابع
- پیشرفت نقشه ها
- ویژگی پیش نمایش: پانل بینش عملکرد جدید
- میانبرهای جدید برای تقلید از مضامین نور و تاریک
- امنیت بهبود یافته در برگه پیش نمایش شبکه
- بارگیری مجدد در نقطه شکست
- به روزرسانی های کنسول
- ضبط جریان کاربر را در ابتدا لغو کنید
- نمایش عناصر شبه برجسته وراثت در صفحه سبک
- نکات برجسته متفرقه
- [آزمایش] CSS را کپی کنید
- [آزمایش] انتخاب رنگ در خارج از مرورگر
- واردات و صادرات جریان کاربر ضبط شده به عنوان یک فایل JSON
- مشاهده لایه های آبشار در صفحه سبک
- پشتیبانی از عملکرد رنگ
hwb()
- نمایش ویژگی های خصوصی را بهبود بخشید
- نکات برجسته متفرقه
- [آزمایشی] حالت جدید و حالت عکس فوری در پانل فانوس دریایی
- مشاهده و ویرایش supports در قوانین در صفحه سبک
- از انتخاب کنندگان مشترک به طور پیش فرض پشتیبانی کنید
- انتخاب کننده ضبط را سفارشی کنید
- تغییر نام یک ضبط
- خصوصیات کلاس/عملکرد پیش نمایش در شناور
- فریم های جزئی در پانل عملکرد ارائه شده است
- نکات برجسته متفرقه
- درخواست های Weblockocket
- صفحه API گزارش جدید در صفحه برنامه
- پشتیبانی صبر کنید تا عنصر قابل مشاهده باشد/قابل کلیک در صفحه ضبط
- یک ظاهر طراحی شده ، قالب بندی و فیلتر کنسول بهتر
- پسوند Chrome اشکال زدایی با پرونده های نقشه منبع
- درخت پوشه منبع بهبود یافته در پانل منابع
- نمایش پرونده های منبع کارگر در پانل منابع
- به روزرسانی های تم تاریک خودکار Chrome
- صفحه رنگ آمیزی کننده رنگ آمیزی و صفحه تقسیم
- نکات برجسته متفرقه
- ویژگی پیش نمایش: درخت دسترسی کامل صفحه
- تغییرات دقیق تر در برگه تغییرات
- زمان طولانی تر را برای ضبط جریان کاربر تنظیم کنید
- اطمینان حاصل کنید که صفحات شما با برگه پشتی/رو به جلو قابل ذخیره است
- ویژگی های جدید فیلتر صفحه
- از ویژگی های رسانه ای CSS CONCED COLORS تقلید کنید
- حاکمان را در فرمان شناور نمایش دهید
- پشتیبانی
row-reverse
وcolumn-reverse
در ویرایشگر Flexbox - میانبرهای صفحه کلید جدید برای پخش مجدد XHR و گسترش تمام نتایج جستجو
- فانوس دریایی 9 در پانل فانوس دریایی
- پانل منابع بهبود یافته
- نکات برجسته متفرقه
- [آزمایش] نقاط پایانی در صفحه API گزارش دهی
- ویژگی پیش نمایش: پنل ضبط جدید
- لیست دستگاه را در حالت دستگاه تازه کنید
- خودکار با ویرایش به عنوان HTML
- تجربه اشکال زدایی کد بهبود یافته
- همگام سازی تنظیمات DevTools در دستگاه ها
- ویژگی پیش نمایش: پانل نمای کلی CSS جدید
- ترمیم و بهبود یافته طول CSS ویرایش و کپی تجربه
- تقلید از ویژگی رسانه های CSS-Contrast
- از ویژگی تم Dark Dark Darm استفاده کنید
- اعلامیه ها را به عنوان JavaScript در صفحه سبک کپی کنید
- برگه بار جدید در پنل شبکه
- نمایش خصوصیات موجود در صفحه Properties را بهبود بخشید
- گزینه مخفی کردن خطاهای CORS در کنسول
- پیش نمایش و ارزیابی اشیاء
Intl
مناسب در کنسول - آثار پشته async سازگار
- نوار کناری کنسول را حفظ کنید
- صفحه حافظه پنهان برنامه در پانل برنامه
- [آزمایش] صفحه API گزارش جدید در صفحه برنامه
- ابزارهای جدید نویسندگی CSS
- مخفی کردن مسائل در برگه موارد
- نمایش خصوصیات را بهبود بخشید
- فانوس دریایی 8.4 در صفحه فانوس دریایی
- قطعه قطعه ها را در پانل منابع مرتب کنید
- پیوندهای جدید به یادداشت های ترجمه ترجمه شده و گزارش یک اشکال ترجمه
- UI بهبود یافته برای منوی فرمان DevTools
- از DevTools به زبان دلخواه خود استفاده کنید
- دستگاه های جدید Nest Hub در لیست دستگاه
- آزمایشات مبدا در نمای جزئیات فریم
- نشان جدید CSS Container Badge
- کادر انتخاب جدید برای معکوس کردن فیلترهای شبکه
- استهلاک آینده از نوار کناری کنسول
- نمایش هدرهای
Set-Cookies
Raw در برگه Issues و پنل شبکه - دسترسی سازندگان بومی را به عنوان خاصیت خود در کنسول نمایش می دهد
- ردیف خطای مناسب برای اسکریپت های درون خطی با #SourceUrl
- تغییر قالب رنگ در صفحه محاسبه شده
- وسایل ابزار سفارشی را با وسایل بومی HTML جایگزین کنید
- [تجربی] مسائل را در برگه موضوعات پنهان کنید
- پرس و جوهای قابل ویرایش CSS در صفحه سبک
- پیش نمایش بسته نرم افزاری در پنل شبکه
- انتساب گزارش اشکال زدایی API
- دست زدن به رشته بهتر در کنسول
- اشکال زدایی cors بهبود یافته
- فانوس دریایی 8.1
- URL یادداشت جدید در صفحه مانیفست
- انتخاب کننده های تطبیق CSS ثابت
- پاسخ های JSON بسیار چاپی در پنل شبکه
- ویرایشگر شبکه CSS
- پشتیبانی از بازسازی
const
در کنسول - منبع منبع
- میانبر جدید برای مشاهده جزئیات فریم
- پشتیبانی از اشکال زدایی CORS پیشرفته
- نامگذاری برچسب XHR به واکشی/XHR
- نوع منبع WASM در پنل شبکه
- User-Agent Client Hints for devices in the Network conditions tab
- Report Quirks mode issues in the Issues tab
- Include Compute Intersections in the Performance panel
- Lighthouse 7.5 in the Lighthouse panel
- Deprecated "Restart frame" context menu in the call stack
- [Experimental] Protocol monitor
- [Experimental] Puppeteer Recorder
- Web Vitals information pop up
- New Memory inspector
- Visualize CSS scroll-snap
- New badge settings pane
- Enhanced image preview with aspect ratio information
- New network conditions button with options to configure
Content-Encoding
s - shortcut to view computed value
-
accent-color
keyword - Categorize issue types with colors and icons
- Delete Trust tokens
- Blocked features in the Frame details view
- Filter experiments in the Experiments setting
- New
Vary Header
column in the Cache storage pane - Support JavaScript private brand check
- Enhanced support for breakpoints debugging
- Support hover preview with
[]
notation - Improved outline of HTML files
- Proper error stack traces for Wasm debugging
- New CSS flexbox debugging tools
- New Core Web Vitals overlay
- Moved issue count to the Console status bar
- Report Trusted Web Activity issues
- Format strings as (valid) JavaScript string literals in the Console
- New Trust Tokens pane in the Application panel
- Emulate the CSS color-gamut media feature
- Improved Progressive Web Apps tooling
- New
Remote Address Space
column in the Network panel - بهبود عملکرد
- Display allowed/disallowed features in the Frame details view
- New
SameParty
column in the Cookies pane - Deprecated non-standard
fn.displayName
support - Deprecation of
Don't show Chrome Data Saver warning
in the Settings menu - [Experimental] Automatic low-contrast issue reporting in the Issues tab
- [Experimental] Full accessibility tree view in the Elements panel
- Debugging support for Trusted Types violations
- Capture node screenshot beyond viewport
- New Trust Tokens tab for network requests
- Lighthouse 7 in the Lighthouse panel
- Support forcing the CSS
:target
state - New shortcut to duplicate element
- Color pickers for custom CSS properties
- New shortcuts to copy CSS properties
- New option to show URL-decoded cookies
- Clear only visible cookies
- New option to clear third-party cookies in the Storage pane
- Edit User-Agent Client Hints for custom devices
- Persist "record network log" setting
- View WebTransport connections in the Network panel
- "Online" renamed to "No throttling"
- New copy options in the Console, Sources panel, and Styles pane
- New Service Workers information in the Frame details view
- Measure Memory information in the Frame details view
- Provide feedback from the Issues tab
- Dropped frames in the Performance panel
- Emulate foldable and dual-screen in Device Mode
- [Experimental] Automate browser testing with Puppeteer Recorder
- [Experimental] Font editor in the Styles pane
- [Experimental] CSS flexbox debugging tools
- [Experimental] New CSP Violations tab
- [Experimental] New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)
- Faster DevTools startup
- New CSS angle visualization tools
- Emulate unsupported image types
- Simulate storage quota size in the Storage pane
- New Web Vitals lane in the Performance panel
- Report CORS errors in the Network panel
- Cross-origin isolation information in the Frame details view
- New Web Workers information in the Frame details view
- Display opener frame details for opened windows
- Open Network panel from the Service Workers pane
- Copy property value
- Copy stacktrace for network initiator
- Preview Wasm variable value on mouseover
- Evaluate Wasm variable in the Console
- Consistent units of measurement for file/memory sizes
- Highlight pseudo elements in the Elements panel
- [Experimental] CSS Flexbox debugging tools
- [Experimental] Customize chords keyboard shortcuts
- New CSS Grid debugging tools
- New WebAuthn tab
- Move tools between top and bottom panel
- New Computed sidebar pane in the Styles pane
- Grouping CSS properties in the Computed pane
- Lighthouse 6.3 in the Lighthouse panel
-
performance.mark()
events in the Timings section - New
resource-type
andurl
filters in the Network panel - Frame details view updates
- Deprecation of
Settings
in the More tools menu - [Experimental] View and fix color contrast issues in the CSS Overview panel
- [Experimental] Customize keyboard shortcuts in DevTools
- New Media panel
- Capture node screenshots using Elements panel context menu
- Issues tab updates
- Emulate missing local fonts
- Emulate inactive users
- Emulate
prefers-reduced-data
- Support for new JavaScript features
- Lighthouse 6.2 in the Lighthouse panel
- Deprecation of "other origins" listing in the Service Workers pane
- Show coverage summary for filtered items
- New frame details view in Application panel
- Accessible color suggestion in the Styles pane
- Reinstate Properties pane in the Elements panel
- Human-readable
X-Client-Data
header values in the Network panel - Auto-complete custom fonts in the Styles pane
- Consistently display resource type in Network panel
- Clear buttons in the Elements and Network panels
- Style editing for CSS-in-JS frameworks
- Lighthouse 6 in the Lighthouse panel
- First Meaningful Paint (FMP) deprecation
- Support for new JavaScript features
- New app shortcut warnings in the Manifest pane
- Service worker
respondWith
events in the Timing tab - Consistent display of the Computed pane
- Bytecode offsets for WebAssembly files
- Line-wise copy and cut in Sources Panel
- Console settings updates
- Performance panel updates
- New icons for breakpoints, conditional breakpoints, and logpoints
- Fix site issues with the new Issues tab
- View accessibility information in the Inspect Mode tooltip
- Performance panel updates
- More accurate promise terminology in the Console
- Styles pane updates
- Deprecation of the Properties pane in the Elements panel
- App shortcuts support in the Manifest pane
- Emulate vision deficiencies
- Emulate locales
- Cross-Origin Embedder Policy (COEP) debugging
- New icons for breakpoints, conditional breakpoints, and logpoints
- View network requests that set a specific cookie
- Dock to left from the Command Menu
- The Settings option in the Main Menu has moved
- The Audits panel is now the Lighthouse panel
- Delete all Local Overrides in a folder
- Updated Long Tasks UI
- Maskable icon support in the Manifest pane
- Moto G4 support in Device Mode
- Cookie-related updates
- More accurate web app manifest icons
- Hover over CSS
content
properties to see unescaped values - Source map errors in the Console
- Setting for disabling scrolling past the end of a file
- Support for
let
andclass
redeclarations in the Console - Improved WebAssembly debugging
- Request Initiator Chains in the Initiator tab
- Highlight the selected network request in the Overview
- URL and path columns in the Network panel
- Updated User-Agent strings
- New Audits panel configuration UI
- Per-function or per-block code coverage modes
- Code coverage must now be initiated by a page reload
- Debug why a cookie was blocked
- View cookie values
- Simulate different prefers-color-scheme and prefers-reduced-motion preferences
- Code coverage updates
- Debug why a network resource was requested
- Console and Sources panels respect indentation preferences again
- New shortcuts for cursor navigation
- Multi-client support in the Audits panel
- Payment Handler debugging
- Lighthouse 5.2 in the Audits panel
- Largest Contentful Paint in the Performance panel
- File DevTools issues from the Main Menu
- Copy element styles
- Visualize layout shifts
- Lighthouse 5.1 in the Audits panel
- OS theme syncing
- Keyboard shortcut for opening the Breakpoint Editor
- Prefetch cache in the Network panel
- Private properties when viewing objects
- Notifications and push messages in the Application panel
- Autocomplete with CSS values
- A new UI for network settings
- WebSocket messages in HAR exports
- HAR import and export buttons
- Real-time memory usage
- Service worker registration port numbers
- Inspect Background Fetch and Background Sync events
- Puppeteer for Firefox
- Meaningful presets when autocompleting CSS functions
- Clear site data from the Command Menu
- View all IndexedDB databases
- View a resource's uncompressed size on hover
- Inline breakpoints in the Breakpoints pane
- IndexedDB and Cache resource counts
- Setting for disabling the detailed Inspect tooltip
- Setting for toggling tab indentation in the Editor
- Highlight all nodes affected by CSS property
- Lighthouse v4 in the Audits panel
- WebSocket binary message viewer
- Capture area screenshot in the Command Menu
- Service worker filters in the Network panel
- Performance panel updates
- Long tasks in Performance panel recordings
- First Paint in the Timing section
- Bonus tip: Shortcut for viewing RGB and HSL color codes (video)
- Logpoints
- Detailed tooltips in Inspect Mode
- Export code coverage data
- Navigate the Console with a keyboard
- AAA contrast ratio line in the Color Picker
- Save custom geolocation overrides
- تاشو کد
- Frames tab renamed to Messages tab
- Bonus tip: Network panel filtering by property (video)
- Visualize performance metrics in the Performance panel
- Highlight text nodes in the DOM Tree
- Copy the JS path to a DOM node
- Audits panel updates , including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
- Bonus tip: Use Device Mode to inspect media queries (video)
- Hover over a Live Expression result to highlight a DOM node
- Store DOM nodes as global variables
- Initiator and priority information now in HAR imports and exports
- Access the Command Menu from the Main Menu
- Picture-in-Picture breakpoints
- Bonus tip: Use
monitorEvents()
to log a node's fired events in the Console (video) - Live Expressions in the Console
- Highlight DOM nodes during Eager Evaluation
- Performance panel optimizations
- More reliable debugging
- Enable network throttling from the Command Menu
- Autocomplete Conditional Breakpoints
- Break on AudioContext events
- Debug Node.js apps with ndb
- Bonus tip: Measure real world user interactions with the User Timing API
- Eager Evaluation
- Argument hints
- Function autocompletion
- ES2017 keywords
- Lighthouse 3.0 in the Audits panel
- BigInt support
- Adding property paths to the Watch pane
- "Show timestamps" moved to Settings
- Bonus tip: Lesser-known Console methods (video)
- Search across all network headers
- CSS variable value previews
- Copy as fetch
- New audits, desktop configuration options, and viewing traces
- Stop infinite loops
- User Timing in the Performance tabs
- JavaScript VM instances clearly listed in the Memory panel
- Network tab renamed to Page tab
- Dark theme updates
- Certificate transparency information in the Security panel
- Site isolation features in the Performance panel
- Bonus tip: Layers panel + Animations Inspector (video)
- Blackboxing in the Network panel
- Auto-adjust zooming in Device Mode
- Pretty-printing in the Preview and Response tabs
- Previewing HTML content in the Preview tab
- Local Overrides support for styles inside of HTML
- Bonus tip: Blackbox framework scripts to make Event Listener Breakpoints more useful
- Local Overrides
- New accessibility tools
- The Changes tab
- New SEO and performance audits
- Multiple recordings in the Performance panel
- Reliable code stepping with workers in async code
- Bonus tip: Automate DevTools actions with Puppeteer (video)
- مانیتور عملکرد
- Console Sidebar
- Group similar Console messages
- Bonus tip: Toggle hover pseudo-class (video)
- Multi-client remote debugging support
- Workspaces 2.0
- 4 new audits
- Simulate push notifications with custom data
- Trigger background sync events with custom tags
- Bonus tip: Event listener breakpoints (video)
- Top-level await in the Console
- New screenshot workflows
- CSS Grid highlighting
- A new Console API for querying objects
- New Console filters
- HAR imports in the Network panel
- Previewable cache resources
- More predictable cache debugging
- Block-level code coverage
- Mobile device throttling simulation
- View storage usage
- View when a service worker cached responses
- Enable the FPS meter from the Command Menu
- Set mousewheel behavior to zoom or scroll
- Debugging support for ES6 modules
- New Audits panel
- 3rd-Party Badges
- A new gesture for Continue To Here
- Step into async
- More informative object previews in the Console
- More informative context selection in the Console
- Real-time updates in the Coverage tab
- Simpler network throttling options
- Async stacks on by default
- CSS and JS code coverage
- Full-page screenshots
- مسدود کردن درخواست ها
- Step over async await
- Unified Command Menu
کروم 130
کروم 129
کروم 128
کروم 127
کروم 126
کروم 125
کروم 124
کروم 123
کروم 122
کروم 121
کروم 120
کروم 119
کروم 118
Chrome 117
Chrome 116
کروم 115
Chrome 114
Chrome 113
Chrome 112
کروم 111
Chrome 110
کروم 109
Chrome 108
Chrome 107
کروم 106
Chrome 105
Chrome 104
کروم 103
Chrome 102
Chrome 101
کروم 100
کروم 99
کروم 98
کروم 97
کروم 96
کروم 95
کروم 94
کروم 93
کروم 92
Chrome 91
Chrome 90
Chrome 89
Chrome 88
Chrome 87
Chrome 86
Chrome 85
Chrome 84
Chrome 83
Chrome 82
Chrome 81
Chrome 80
Chrome 79
Chrome 78
Chrome 77
Chrome 76
Chrome 75
Chrome 74
Chrome 73
Chrome 72
Chrome 71
Chrome 70
Chrome 68
Chrome 67
Chrome 66
Chrome 65
Chrome 64
Chrome 63
Chrome 62
Chrome 61
Chrome 60
Chrome 59
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
asProfiler Overhead
( 1358602 ). - DevTools improved autocompletion:
- 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.
- Network panel improvements
- Network filters reimagined
- HAR exports now exclude sensitive data by default
- Elements panel improvements
- Autocomplete values for text-emphasis-* properties
- Scroll overflows marked with a badge
- Performance panel improvements
- Recommendations in live metrics
- Navigate breadcrumbs
- Memory panel improvements
- New 'Detached elements' profile
- Improved naming of plain JS objects
- Turn off dynamic theming
- Chrome Experiment: Process sharing
- Lighthouse 12.2.1
- Miscellaneous highlights
- Recorder supports export to Puppeteer for Firefox
- Performance panel improvements
- Live metrics observations
- Search requests in the Network track
- See stack traces of performance.mark and performance.measure calls
- Use test address data in the Autofill panel
- Elements panel improvements
- Force more states for specific elements
- Elements > Styles now autocompletes more grid properties
- Lighthouse 12.2.0
- Miscellaneous highlights
- Console insights by Gemini are going live in most European countries
- Performance panel updates
- Enhanced Network track
- Customize performance data with extensibility API
- Details in the Timings track
- Copy all listed requests in the Network panel
- Faster heap snapshots with named HTML tags and less clutter
- Open Animations panel to capture animations and edit @keyframes live
- Lighthouse 12.1.0
- بهبود دسترسی
- Miscellaneous highlights
- Inspect CSS anchor positioning in the Elements panel
- Sources panel improvements
- Enhanced 'Never Pause Here'
- New scroll snap event listeners
- Network panel improvements
- Updated network throttling presets
- Service worker information in custom fields of the HAR format
- Send and receive WebSocket events in the Performance panel
- Miscellaneous highlights
- Performance panel improvements
- Move and hide tracks with updated track configuration mode
- Ignore scripts in the flame chart
- Throttle down the CPU by 20 times
- Performance insights panel will be deprecated
- Find excessive memory usage with new filters in heap snapshots
- Inspect storage buckets in Application > Storage
- Disable self-XSS warnings with a command-line flag
- Lighthouse 12.0.0
- Miscellaneous highlights
- Understand errors and warnings in the Console better with Gemini
- @position-try rules support in Elements > Styles
- Sources panel improvements
- Configure automatic pretty-printing and bracket closing
- Handled rejected promises are recognized as caught
- Error causes in the Console
- Network panel improvements
- Inspect Early Hints headers
- Hide the Waterfall column
- Performance panel improvements
- Capture CSS selector statistics
- Change order and hide tracks
- Ignore retainers in the Memory panel
- Lighthouse 11.7.1
- Miscellaneous highlights
- New Autofill panel
- Enhanced network throttling for WebRTC
- Scroll-driven animations support in the Animations panel
- Improved CSS nesting support in Elements > Styles
- Enhanced Performance panel
- Hide functions and their children in the flame chart
- Arrows from selected initiators to events they initiated
- Lighthouse 11.6.0
- Tooltips for special categories in Memory > Heap snapshots
- Application > Storage updates
- Bytes used for shared storage
- Web SQL is fully deprecated
- Coverage panel improvements
- The Layers panel might be deprecated
- JavaScript Profiler deprecation: Phase four, final
- Miscellaneous highlights
- Find the Easter egg
- Elements panel updates
- Emulate a focused page in Elements > Styles
- Color Picker, Angle Clock, and Easing Editor in
var()
fallbacks - CSS length tool is deprecated
- Popover for the selected search result in the Performance > Main track
- Network panel updates
- Clear button and search filter in the Network > EventStream tab
- Tooltips with exemption reasons for third-party cookies in Network > Cookies
- Enable and disable all breakpoints in Sources
- View loaded scripts in DevTools for Node.js
- Lighthouse 11.5.0
- بهبود دسترسی
- Miscellaneous highlights
- The official collection of Recorder extensions is live
- Network improvements
- Failure reason in the Status column
- Improved Copy submenu
- بهبود عملکرد
- Breadcrumbs in the Timeline
- Event initiators in the Main track
- JavaScript VM instance selector menu for Node.js DevTools
- New shortcut and command in Sources
- Elements improvements
- The ::view-transition pseudo-element is now editable in Styles
- The align-content property support for block containers
- Posture support for emulated foldable devices
- Dynamic theming
- Third-party cookies phaseout warnings in the Network and Application panels
- Lighthouse 11.4.0
- بهبود دسترسی
- Miscellaneous highlights
- Elements improvements
- Streamlined filter bar in the Network panel
-
@font-palette-values
support - Supported case: Custom property as a fallback of another custom property
- Improved source map support
- Performance panel improvements
- Enhanced Interactions track
- Advanced filtering in Bottom-Up, Call Tree, and Event Log tabs
- Indentation markers in the Sources panel
- Helpful tooltips for overridden headers and content in the Network panel
- New Command Menu options for adding and removing request blocking patterns
- The CSP violations experiment is removed
- Lighthouse 11.3.0
- بهبود دسترسی
- Miscellaneous highlights
- Third-party cookie phaseout
- Analyze your website's cookies with the Privacy Sandbox Analysis Tool
- Enhanced ignore listing
- Default exclusion pattern for node_modules
- Caught exceptions now stop execution if caught or passing through non-ignored code
-
x_google_ignoreList
renamed toignoreList
in source maps - New input mode toggle during remote debugging
- The Elements panel now shows URLs for #document nodes
- Effective Content Security Policy in the Application panel
- Improved animation debugging
- 'Do you trust this code?' dialog in Sources and self-XSS warning in Console
- Event listener breakpoints in web workers and worklets
- The new media badge for
<audio>
and<video>
- Preloading renamed to Speculative loading
- Lighthouse 11.2.0
- بهبود دسترسی
- Miscellaneous highlights
- Improved @property section in Elements > Styles
- Editable @property rule
- Issues with invalid @property rules are reported
- Updated list of devices to emulate
- Pretty-print inline JSON in script tags in Sources
- Autocomplete private fields in Console
- Lighthouse 11.1.0
- بهبود دسترسی
- Web SQL deprecation
- Screenshot aspect ratio validation in Application > Manifest
- Miscellaneous highlights
- New section for custom properties in Elements > Styles
- More local overrides improvements
- Enhanced search
- Improved Sources panel
- Streamlined workspace in the Sources panel
- Reorder panes in Sources
- Syntax highlighting and pretty-printing for more script types
- Emulate prefers-reduced-transparency media feature
- Lighthouse 11
- بهبود دسترسی
- Miscellaneous highlights
- Network panel improvements
- Override web content locally even faster
- Override the content of XHR and fetch requests
- Hide Chrome extension requests
- Human-readable HTTP status codes
Performance: See the changes in fetch priority for network events
- Sources settings enabled by default: Code folding and automatic file reveal
- Improved debugging of third-party cookie issues
- رنگ های جدید
- Lighthouse 10.4.0
- Debug preloading in the Application panel
- The C/C++ WebAssembly debugging extension for DevTools is now open source
- Miscellaneous highlights
- (Experimental) New rendering emulation: prefers-reduced-transparency
- (Experimental) Enhanced Protocol monitor
- Improved debugging of missing stylesheets
- Linear timing support in Elements > Styles > Easing Editor
- Storage buckets support and metadata view
- Lighthouse 10.3.0
- Accessibility: Keyboard commands and improved screen reading
- Miscellaneous highlights
- Elements improvements
- New CSS subgrid badge
- Selector specificity in tooltips
- Values of custom CSS properties in tooltips
- Sources improvements
- CSS syntax highlighting
- Shortcut to set conditional breakpoints
- Application > Bounce Tracking Mitigations
- Lighthouse 10.2.0
- Ignore content scripts by default
- Network > Response improvements
- Miscellaneous highlights
- WebAssembly debugging support
- Improved stepping behavior in Wasm apps
- Debug Autofill using the Elements panel and Issues tab
- Assertions in Recorder
- Lighthouse 10.1.1
- بهبود عملکرد
- performance.mark() shows timing on hover in Performance > Timings
- profile() command populates Performance > Main
- Warning for slow user interactions
- Web Vitals updates
- JavaScript Profiler deprecation: Phase three
- Miscellaneous highlights
- Override network response headers
- Nuxt, Vite, and Rollup debugging improvements
- CSS improvements in Elements > Styles
- Invalid CSS properties and values
- Links to key frames in the animation shorthand property
- New Console setting: Autocomplete on Enter
- Command Menu emphasizes authored files
- JavaScript Profiler deprecation: Stage two
- Miscellaneous highlights
- Recorder updates
- Recorder replay extensions
- Record with pierce selectors
- Export recordings as Puppeteer scripts with Lighthouse analysis
- Get extensions for Recorder
- Elements > Styles updates
- CSS documentation in the Styles pane
- CSS nesting support
- Marking logpoints and conditional breakpoints in the Console
- Ignore irrelevant scripts during debugging
- JavaScript Profiler deprecation started
- Emulate reduced contrast
- Lighthouse 10
- Miscellaneous highlights
- Debugging HD color with the Styles pane
- Enhanced breakpoint UX
- Customizable Recorder shortcuts
- Better syntax highlight for Angular
- Reorganize caches in the Application panel
- Miscellaneous highlights
- Clearing Performance Panel on reload
- Recorder updates
- View and highlight the code of your user flow in the Recorder
- Customize selector types of a recording
- Edit user flow while recording
- Automatic in-place pretty print
- Better syntax highlight and inline preview for Vue, SCSS and more
- Ergonomic and consistent Autocomplete in the Console
- Miscellaneous highlights
- Recorder: Copy as options for steps, in-page replay, step's context menu
- Show actual function names in performance's recordings
- New keyboard shortcuts in the Console & Sources panel
- Improved JavaScript debugging
- Miscellaneous highlights
- [Experimental] Enhanced UX in managing breakpoints
- [Experimental] Automatic in-place pretty print
- Hints for inactive CSS properties
- Auto-detect XPath and text selectors in the Recorder panel
- Step through comma-separated expressions
- Improved Ignore list setting
- Miscellaneous highlights
- Customize keyboard shortcuts in DevTools
- Toggle light and dark themes with keyboard shortcut
- Highlight C/C++ objects in the Memory Inspector
- Support full initiator information for HAR import
- Start DOM search after pressing
Enter
- Display
start
andend
icons foralign-content
CSS flexbox properties - Miscellaneous highlights
- Group files by Authored / Deployed in the Sources panel
- Linked stack traces for asynchronous operations
- Automatically ignore known third-party scripts
- Improved call stack during debugging
- Hiding ignore-listed sources in the Sources panel
- Hiding ignore-listed files in the Command Menu
- New Interactions track in the Performance panel
- LCP timings breakdown in the Performance Insights panel
- Auto-generate default name for recordings in the Recorder panel
- Miscellaneous highlights
- Step-by-step replay in the Recorder
- Support mouse over event in the Recorder panel
- Largest Contentful Paint (LCP) in the Performance insights panel
- Identify flashes of text (FOIT, FOUT) as potential root causes for layout shifts
- Protocol handlers in the Manifest pane
- Top layer badge in the Elements panel
- Attach Wasm debugging information at runtime
- Support live edit during debugging
- View and edit @scope at rules in the Styles pane
- Source map improvements
- Miscellaneous highlights
- Restart frame during debugging
- Slow replay options in the Recorder panel
- Build an extension for the Recorder panel
- Group files by Authored / Deployed in the Sources panel
- New User Timings track in the Performance insights panel
- Reveal assigned slot of an element
- Simulate hardware concurrency for Performance recordings
- Preview non-color value when autocompleting CSS variables
- Identify blocking frames in the Back/forward cache pane
- Improved autocomplete suggestions for JavaScript objects
- Source maps improvements
- Miscellaneous highlights
- Capture double-click and right-click events in the Recorder panel
- New timespan and snapshot mode in the Lighthouse panel
- Improved zoom control in the Performance Insights panel
- Confirm to delete a performance recording
- Reorder panes in the Elements panel
- Picking a color outside of the browser
- Improved inline value preview during debugging
- Support large blobs for virtual authenticators
- New keyboard shortcuts in the Sources panel
- Source maps improvements
- Preview feature: New Performance insights panel
- New shortcuts to emulate light and dark themes
- Improved security on the Network Preview tab
- Improved reloading at breakpoint
- Console updates
- Cancel user flow recording at the start
- Display inherited highlight pseudo-elements in the Styles pane
- Miscellaneous highlights
- [Experimental] Copy CSS changes
- [Experimental] Picking color outside of browser
- Import and export recorded user flows as a JSON file
- View cascade layers in the Styles pane
- Support for the
hwb()
color function - Improved the display of private properties
- Miscellaneous highlights
- [Experimental] New timespan and snapshot mode in the Lighthouse panel
- View and edit @supports at rules in the Styles pane
- Support common selectors by default
- Customize the recording's selector
- Rename a recording
- Preview class/function properties on hover
- Partially presented frames in the Performance panel
- Miscellaneous highlights
- Throttling WebSocket requests
- New Reporting API pane in the Application panel
- Support wait until element is visible/clickable in the Recorder panel
- Better console styling, formatting and filtering
- Debug Chrome extension with source map files
- Improved source folder tree in the Sources panel
- Display worker source files in the Sources panel
- Chrome's Auto Dark Theme updates
- Touch-friendly color-picker and split pane
- Miscellaneous highlights
- Preview feature: Full-page accessibility tree
- More precise changes in the Changes tab
- Set longer timeout for user flow recording
- Ensure your pages are cacheable with the Back/forward cache tab
- New Properties pane filter
- Emulate the CSS forced-colors media feature
- Show rulers on hover command
- Support
row-reverse
andcolumn-reverse
in the Flexbox editor - New keyboard shortcuts to replay XHR and expand all search results
- Lighthouse 9 in the Lighthouse panel
- Improved Sources panel
- Miscellaneous highlights
- [Experimental] Endpoints in the Reporting API pane
- Preview feature: New Recorder panel
- Refresh device list in Device Mode
- Autocomplete with Edit as HTML
- Improved code debugging experience
- Syncing DevTools settings across devices
- Preview feature: New CSS Overview panel
- Restored and improved CSS length edit and copy experince
- Emulate the CSS prefers-contrast media feature
- Emulate the Chrome's Auto Dark Theme feature
- Copy declarations as JavaScript in the Styles pane
- New Payload tab in the Network panel
- Improved the display of properties in the Properties pane
- Option to hide CORS errors in the Console
- Proper
Intl
objects preview and evaluation in the Console - Consistent async stack traces
- Retain the Console sidebar
- Deprecated Application cache pane in the Application panel
- [Experimental] New Reporting API pane in the Application panel
- New CSS length authoring tools
- Hide issues in the Issues tab
- Improved the display of properties
- Lighthouse 8.4 in the Lighthouse panel
- Sort snippets in the Sources panel
- New links to translated release notes and report a translation bug
- Improved UI for DevTools command menu
- Use DevTools in your preferred language
- New Nest Hub devices in the Device list
- Origin trials in the Frame details view
- New CSS container queries badge
- New checkbox to invert the network filters
- Upcoming deprecation of the Console sidebar
- Display raw
Set-Cookies
headers in the Issues tab and Network panel - Consistent display native accessors as own properties in the Console
- Proper error stack traces for inline scripts with #sourceURL
- Change color format in the Computed pane
- Replace custom tooltips with native HTML tooltips
- [Experimental] Hide issues in the Issues tab
- Editable CSS container queries in the Styles pane
- Web bundle preview in the Network panel
- Attribution Reporting API debugging
- Better string handling in the Console
- Improved CORS debugging
- Lighthouse 8.1
- New note URL in the Manifest pane
- Fixed CSS matching selectors
- Pretty-printing JSON responses in the Network panel
- CSS grid editor
- Support for
const
redeclarations in the Console - Source order viewer
- New shortcut to view frame details
- Enhanced CORS debugging support
- Rename XHR label to Fetch/XHR
- Filter Wasm resource type in the Network panel
- User-Agent Client Hints for devices in the Network conditions tab
- Report Quirks mode issues in the Issues tab
- Include Compute Intersections in the Performance panel
- Lighthouse 7.5 in the Lighthouse panel
- Deprecated "Restart frame" context menu in the call stack
- [Experimental] Protocol monitor
- [Experimental] Puppeteer Recorder
- Web Vitals information pop up
- New Memory inspector
- Visualize CSS scroll-snap
- New badge settings pane
- Enhanced image preview with aspect ratio information
- New network conditions button with options to configure
Content-Encoding
s - shortcut to view computed value
-
accent-color
keyword - Categorize issue types with colors and icons
- Delete Trust tokens
- Blocked features in the Frame details view
- Filter experiments in the Experiments setting
- New
Vary Header
column in the Cache storage pane - Support JavaScript private brand check
- Enhanced support for breakpoints debugging
- Support hover preview with
[]
notation - Improved outline of HTML files
- Proper error stack traces for Wasm debugging
- New CSS flexbox debugging tools
- New Core Web Vitals overlay
- Moved issue count to the Console status bar
- Report Trusted Web Activity issues
- Format strings as (valid) JavaScript string literals in the Console
- New Trust Tokens pane in the Application panel
- Emulate the CSS color-gamut media feature
- Improved Progressive Web Apps tooling
- New
Remote Address Space
column in the Network panel - بهبود عملکرد
- Display allowed/disallowed features in the Frame details view
- New
SameParty
column in the Cookies pane - Deprecated non-standard
fn.displayName
support - Deprecation of
Don't show Chrome Data Saver warning
in the Settings menu - [Experimental] Automatic low-contrast issue reporting in the Issues tab
- [Experimental] Full accessibility tree view in the Elements panel
- Debugging support for Trusted Types violations
- Capture node screenshot beyond viewport
- New Trust Tokens tab for network requests
- Lighthouse 7 in the Lighthouse panel
- Support forcing the CSS
:target
state - New shortcut to duplicate element
- Color pickers for custom CSS properties
- New shortcuts to copy CSS properties
- New option to show URL-decoded cookies
- Clear only visible cookies
- New option to clear third-party cookies in the Storage pane
- Edit User-Agent Client Hints for custom devices
- Persist "record network log" setting
- View WebTransport connections in the Network panel
- "Online" renamed to "No throttling"
- New copy options in the Console, Sources panel, and Styles pane
- New Service Workers information in the Frame details view
- Measure Memory information in the Frame details view
- Provide feedback from the Issues tab
- Dropped frames in the Performance panel
- Emulate foldable and dual-screen in Device Mode
- [Experimental] Automate browser testing with Puppeteer Recorder
- [Experimental] Font editor in the Styles pane
- [Experimental] CSS flexbox debugging tools
- [Experimental] New CSP Violations tab
- [Experimental] New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)
- Faster DevTools startup
- New CSS angle visualization tools
- Emulate unsupported image types
- Simulate storage quota size in the Storage pane
- New Web Vitals lane in the Performance panel
- Report CORS errors in the Network panel
- Cross-origin isolation information in the Frame details view
- New Web Workers information in the Frame details view
- Display opener frame details for opened windows
- Open Network panel from the Service Workers pane
- Copy property value
- Copy stacktrace for network initiator
- Preview Wasm variable value on mouseover
- Evaluate Wasm variable in the Console
- Consistent units of measurement for file/memory sizes
- Highlight pseudo elements in the Elements panel
- [Experimental] CSS Flexbox debugging tools
- [Experimental] Customize chords keyboard shortcuts
- New CSS Grid debugging tools
- New WebAuthn tab
- Move tools between top and bottom panel
- New Computed sidebar pane in the Styles pane
- Grouping CSS properties in the Computed pane
- Lighthouse 6.3 in the Lighthouse panel
-
performance.mark()
events in the Timings section - New
resource-type
andurl
filters in the Network panel - Frame details view updates
- Deprecation of
Settings
in the More tools menu - [Experimental] View and fix color contrast issues in the CSS Overview panel
- [Experimental] Customize keyboard shortcuts in DevTools
- New Media panel
- Capture node screenshots using Elements panel context menu
- Issues tab updates
- Emulate missing local fonts
- Emulate inactive users
- Emulate
prefers-reduced-data
- Support for new JavaScript features
- Lighthouse 6.2 in the Lighthouse panel
- Deprecation of "other origins" listing in the Service Workers pane
- Show coverage summary for filtered items
- New frame details view in Application panel
- Accessible color suggestion in the Styles pane
- Reinstate Properties pane in the Elements panel
- Human-readable
X-Client-Data
header values in the Network panel - Auto-complete custom fonts in the Styles pane
- Consistently display resource type in Network panel
- Clear buttons in the Elements and Network panels
- Style editing for CSS-in-JS frameworks
- Lighthouse 6 in the Lighthouse panel
- First Meaningful Paint (FMP) deprecation
- Support for new JavaScript features
- New app shortcut warnings in the Manifest pane
- Service worker
respondWith
events in the Timing tab - Consistent display of the Computed pane
- Bytecode offsets for WebAssembly files
- Line-wise copy and cut in Sources Panel
- Console settings updates
- Performance panel updates
- New icons for breakpoints, conditional breakpoints, and logpoints
- Fix site issues with the new Issues tab
- View accessibility information in the Inspect Mode tooltip
- Performance panel updates
- More accurate promise terminology in the Console
- Styles pane updates
- Deprecation of the Properties pane in the Elements panel
- App shortcuts support in the Manifest pane
- Emulate vision deficiencies
- Emulate locales
- Cross-Origin Embedder Policy (COEP) debugging
- New icons for breakpoints, conditional breakpoints, and logpoints
- View network requests that set a specific cookie
- Dock to left from the Command Menu
- The Settings option in the Main Menu has moved
- The Audits panel is now the Lighthouse panel
- Delete all Local Overrides in a folder
- Updated Long Tasks UI
- Maskable icon support in the Manifest pane
- Moto G4 support in Device Mode
- Cookie-related updates
- More accurate web app manifest icons
- Hover over CSS
content
properties to see unescaped values - Source map errors in the Console
- Setting for disabling scrolling past the end of a file
- Support for
let
andclass
redeclarations in the Console - Improved WebAssembly debugging
- Request Initiator Chains in the Initiator tab
- Highlight the selected network request in the Overview
- URL and path columns in the Network panel
- Updated User-Agent strings
- New Audits panel configuration UI
- Per-function or per-block code coverage modes
- Code coverage must now be initiated by a page reload
- Debug why a cookie was blocked
- View cookie values
- Simulate different prefers-color-scheme and prefers-reduced-motion preferences
- Code coverage updates
- Debug why a network resource was requested
- Console and Sources panels respect indentation preferences again
- New shortcuts for cursor navigation
- Multi-client support in the Audits panel
- Payment Handler debugging
- Lighthouse 5.2 in the Audits panel
- Largest Contentful Paint in the Performance panel
- File DevTools issues from the Main Menu
- Copy element styles
- Visualize layout shifts
- Lighthouse 5.1 in the Audits panel
- OS theme syncing
- Keyboard shortcut for opening the Breakpoint Editor
- Prefetch cache in the Network panel
- Private properties when viewing objects
- Notifications and push messages in the Application panel
- Autocomplete with CSS values
- A new UI for network settings
- WebSocket messages in HAR exports
- HAR import and export buttons
- Real-time memory usage
- Service worker registration port numbers
- Inspect Background Fetch and Background Sync events
- Puppeteer for Firefox
- Meaningful presets when autocompleting CSS functions
- Clear site data from the Command Menu
- View all IndexedDB databases
- View a resource's uncompressed size on hover
- Inline breakpoints in the Breakpoints pane
- IndexedDB and Cache resource counts
- Setting for disabling the detailed Inspect tooltip
- Setting for toggling tab indentation in the Editor
- Highlight all nodes affected by CSS property
- Lighthouse v4 in the Audits panel
- WebSocket binary message viewer
- Capture area screenshot in the Command Menu
- Service worker filters in the Network panel
- Performance panel updates
- Long tasks in Performance panel recordings
- First Paint in the Timing section
- Bonus tip: Shortcut for viewing RGB and HSL color codes (video)
- Logpoints
- Detailed tooltips in Inspect Mode
- Export code coverage data
- Navigate the Console with a keyboard
- AAA contrast ratio line in the Color Picker
- Save custom geolocation overrides
- تاشو کد
- Frames tab renamed to Messages tab
- Bonus tip: Network panel filtering by property (video)
- Visualize performance metrics in the Performance panel
- Highlight text nodes in the DOM Tree
- Copy the JS path to a DOM node
- Audits panel updates , including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
- Bonus tip: Use Device Mode to inspect media queries (video)
- Hover over a Live Expression result to highlight a DOM node
- Store DOM nodes as global variables
- Initiator and priority information now in HAR imports and exports
- Access the Command Menu from the Main Menu
- Picture-in-Picture breakpoints
- Bonus tip: Use
monitorEvents()
to log a node's fired events in the Console (video) - Live Expressions in the Console
- Highlight DOM nodes during Eager Evaluation
- Performance panel optimizations
- More reliable debugging
- Enable network throttling from the Command Menu
- Autocomplete Conditional Breakpoints
- Break on AudioContext events
- Debug Node.js apps with ndb
- Bonus tip: Measure real world user interactions with the User Timing API
- Eager Evaluation
- Argument hints
- Function autocompletion
- ES2017 keywords
- Lighthouse 3.0 in the Audits panel
- BigInt support
- Adding property paths to the Watch pane
- "Show timestamps" moved to Settings
- Bonus tip: Lesser-known Console methods (video)
- Search across all network headers
- CSS variable value previews
- Copy as fetch
- New audits, desktop configuration options, and viewing traces
- Stop infinite loops
- User Timing in the Performance tabs
- JavaScript VM instances clearly listed in the Memory panel
- Network tab renamed to Page tab
- Dark theme updates
- Certificate transparency information in the Security panel
- Site isolation features in the Performance panel
- Bonus tip: Layers panel + Animations Inspector (video)
- Blackboxing in the Network panel
- Auto-adjust zooming in Device Mode
- Pretty-printing in the Preview and Response tabs
- Previewing HTML content in the Preview tab
- Local Overrides support for styles inside of HTML
- Bonus tip: Blackbox framework scripts to make Event Listener Breakpoints more useful
- Local Overrides
- New accessibility tools
- The Changes tab
- New SEO and performance audits
- Multiple recordings in the Performance panel
- Reliable code stepping with workers in async code
- Bonus tip: Automate DevTools actions with Puppeteer (video)
- مانیتور عملکرد
- Console Sidebar
- Group similar Console messages
- Bonus tip: Toggle hover pseudo-class (video)
- Multi-client remote debugging support
- Workspaces 2.0
- 4 new audits
- Simulate push notifications with custom data
- Trigger background sync events with custom tags
- Bonus tip: Event listener breakpoints (video)
- Top-level await in the Console
- New screenshot workflows
- CSS Grid highlighting
- A new Console API for querying objects
- New Console filters
- HAR imports in the Network panel
- Previewable cache resources
- More predictable cache debugging
- Block-level code coverage
- Mobile device throttling simulation
- View storage usage
- View when a service worker cached responses
- Enable the FPS meter from the Command Menu
- Set mousewheel behavior to zoom or scroll
- Debugging support for ES6 modules
- New Audits panel
- 3rd-Party Badges
- A new gesture for Continue To Here
- Step into async
- More informative object previews in the Console
- More informative context selection in the Console
- Real-time updates in the Coverage tab
- Simpler network throttling options
- Async stacks on by default
- CSS and JS code coverage
- Full-page screenshots
- مسدود کردن درخواست ها
- Step over async await
- Unified Command Menu