بهروزرسانیهای ضبطکننده
پشتیبانی از افزونههای بازپخش
ضبطکننده از گزینههای بازپخش سفارشی پشتیبانی میکند که میتوانید با یک افزونه در DevTools جاسازی کنید.
افزونهی نمونه را امتحان کنید. گزینهی new custom replay را انتخاب کنید تا رابط کاربری custom replay باز شود.
برای سفارشیسازی ضبطکننده با نیازهای خود و ادغام آن با ابزارهایتان، توسعه افزونه خودتان را در نظر بگیرید: API مربوط به chrome.devtools.recorder را بررسی کنید و نمونههای افزونه بیشتری را بررسی کنید.
مشکل کروم: ۱۴۰۰۲۴۳
ضبط با انتخابگرهای سوراخ
علاوه بر انتخابگرهای سفارشی، CSS، ARIA، متن و XPath ، اکنون میتوانید با استفاده از انتخابگرهای pierce رکورد بگیرید. این انتخابگرها مانند انتخابگرهای CSS رفتار میکنند اما میتوانند از ریشههای سایه نیز عبور کنند.
یک ضبط جدید را در صفحهای با DOM سایه شروع کنید و بررسی کنید برای ضبط، انواع Selector را وارد کنید . تعامل خود را با عناصر موجود در DOM سایه ضبط کنید و مرحله مربوطه را بررسی کنید.
شماره کروم: ۱۴۱۱۱۸۸ .
با استفاده از تحلیل Lighthouse، اسکریپت را به صورت Puppeteer خروجی بگیرید
ضبطکننده یک گزینه جدید برای خروجی گرفتن معرفی میکند: Puppeteer (شامل تحلیل Lighthouse) . با Puppeteer ، میتوانید کروم را خودکار و کنترل کنید. با Lighthouse ، میتوانید عملکرد وبسایت خود را ضبط و بهبود بخشید.
ضبط خود را باز کنید، کلیک کنید Export را انتخاب کنید ، گزینه جدید را انتخاب کنید و فایل
.js را ذخیره کنید.
اسکریپت Puppeteer را اجرا کنید تا گزارش Lighthouse را در فایل flow.report.html دریافت کنید.
دریافت افزونهها
گزینههایی را برای سفارشیسازی تجربه ضبطکننده خود، مثلاً با گزینههای خروجی سفارشی، بررسی کنید. با کلیک روی «افزونههای ضبطکننده» را دریافت کنید. خروجی > دریافت افزونهها در یک ضبط.
در صورت تمایل میتوانید افزونهی خود را به لیست افزونههای ضبط اضافه کنید. مشتاقانه منتظر دیدن افزونهی شما در این لیست هستیم!
مشکلات کروم: ۱۴۱۷۱۰۴ ، ۱۴۱۳۱۶۸ .
بهروزرسانیهای عناصر > سبکها
مستندات CSS
چند بار در روز مستندات مربوط به ویژگیهای CSS را جستجو میکنید؟ اکنون وقتی نشانگر ماوس را روی یک ویژگی قرار میدهید، صفحه Elements > Styles توضیح کوتاهی را به شما نشان میدهد.
این راهنمای ابزار همچنین دارای یک پیوند «بیشتر بدانید» است که شما را به یک مرجع CSS MDN در مورد این ویژگی هدایت میکند.
اگر CSS را خوب بلد باشید، ممکن است نکات راهنما برایتان آزاردهنده باشند. برای غیرفعال کردن همه آنها، بررسی کنید نشان نده .
برای روشن کردن مجدد آنها، بررسی کنید تنظیمات > تنظیمات برگزیده > عناصر >
راهنمای ابزار مستندات CSS را نمایش دهید .
شماره کروم: 1401107
پشتیبانی از CSS تودرتو
بخش عناصر > سبکها اکنون سینتکس CSS Nesting را تشخیص میدهد و سبکهای تو در تو را روی عناصر مناسب اعمال میکند.
شماره کروم: 1172985
علامتگذاری نقاط ثبت وقایع و نقاط توقف شرطی در کنسول
با بهبود بیشتر تجربه کاربری نقاط شکست ، کنسول اکنون پیامهایی را که توسط نقاط شکست ایجاد میشوند، علامتگذاری میکند:
-
console.*فراخوانیهای شرطی در نقاط توقف با علامت سوال نارنجی? - پیامهای ثبتشده با دو نقطه صورتی
..
کنسول اکنون به جای اسکریپتهای VM<number> که کروم برای اجرای هر بخش از جاوااسکریپت روی V8 ایجاد میکند، لینکهای لنگر مناسبی به نقاط شکست در فایلهای منبع ارائه میدهد.
برای رفتن مستقیم به ویرایشگر نقطه شکست، روی پیوند کنار پیام نقطه شکست کلیک کنید.
مشکل کروم: ۱۰۲۷۴۵۸
نادیده گرفتن اسکریپتهای نامربوط در هنگام اشکالزدایی
برای کمک به شما در تمرکز روی مهمترین بخشهای کدتان، اکنون میتوانید اسکریپتهای نامربوط را مستقیماً از طریق درخت فایل در قسمت Sources > Page به فهرست نادیده گرفتن اضافه کنید.
روی هر اسکریپت یا پوشهای کلیک راست کنید و یکی از گزینههای مربوط به نادیده گرفتن را انتخاب کنید. ممکن است گزینههایی برای اضافه کردن یا حذف اسکریپت یا پوشه به لیست و از آن مشاهده کنید. اشکالزدا اسکریپتهای اضافه شده به لیست را نادیده میگیرد و آنها را در پشته فراخوانی حذف میکند.
تمام اسکریپتها و پوشههای فهرستشده در فهرست نادیدهگرفتهشده، در درخت فایل خاکستریرنگ میشوند.
اگر یک اسکریپت نادیده گرفته شده را انتخاب کنید، دکمه پیکربندی شما را به تنظیمات > فهرست نادیده گرفته شده . همچنین میتوانید منابع نادیده گرفته شده را از درخت فایل با استفاده از
> منابع نادیده گرفته شده را مخفی کنید
.
مشکل کرومیوم: ۸۸۳۳۲۵
منسوخ شدن JavaScript Profiler آغاز شد
از همان اوایل کروم ۵۸ ، تیم DevTools قصد داشت در نهایت JavaScript Profiler را منسوخ کند و توسعهدهندگان Node.js و Deno را وادار کند تا از پنل Performance برای پروفایلبندی عملکرد CPU جاوا اسکریپت استفاده کنند.
این نسخه DevTools (112) حذف چهار مرحلهای JavaScript Profiler را آغاز میکند. پنل JavaScript Profiler اکنون بنر هشدار مربوطه را نشان میدهد.
به جای Profiler ، از پنل Performance برای پروفایل کردن CPU استفاده کنید.
برای کسب اطلاعات بیشتر و ارائه بازخورد، به RFC مربوطه و crbug.com/1354548 مراجعه کنید.
شماره کروم: ۱۴۱۷۶۴۷ .
کنتراست کاهش یافته را شبیهسازی کنید
تب رندرینگ (Rendering) گزینه جدیدی به فهرست کمبودهای بینایی اضافه میکند - کنتراست کاهشیافته (Reduced contrast ). با این گزینه، میتوانید بفهمید که وبسایت شما برای افرادی که حساسیت کنتراست کمتری دارند، چگونه به نظر میرسد.
توجه داشته باشید که گزینههای لیست بهروزرسانی شدهاند تا به شما بگویند که این گزینهها نشاندهندهی چه نوع عدم حساسیت رنگی هستند.
با استفاده از DevTools، میتوانید تمام مشکلات کنتراست را به طور همزمان پیدا کرده و برطرف کنید. برای اطلاعات بیشتر، به بخش «وبسایت خود را خواناتر کنید» مراجعه کنید.
مشکلات کرومیوم: ۱۴۱۲۷۱۹ ، ۱۴۱۲۷۲۱ .
فانوس دریایی ۱۰
پنل Lighthouse اکنون Lighthouse 10.0.1 را اجرا میکند. برای جزئیات بیشتر، به موارد جدید در Lighthouse 10.0.1 مراجعه کنید.
برای یادگیری اصول اولیه استفاده از پنل Lighthouse در DevTools، به Lighthouse: Optimize website speed مراجعه کنید.
فانوس دریایی > >
ناوبری قدیمی اکنون به طور پیشفرض غیرفعال است. این گزینه از پیکربندی قدیمی Lighthouse در حالت ناوبری استفاده میکند.
لایتهاوس ۱۰ اکنون از موتو جی پاور به عنوان دستگاه شبیهسازی پیشفرض استفاده میکند. DevTools این دستگاه را به تنظیمات > دستگاهها .
مشکل کروم: ۷۷۲۵۵۸
هشدار کنسول برای حذف کنترلکننده واکشی سرویس ورکر بدون عملیات شما
کروم ۱۱۲ از مدیریتکنندههای واکشی سرویس no-op (بدون عملیات) صرفنظر میکند، زیرا ممکن است پیمایش را کند کنند اما هدفی را دنبال نمیکنند. چنین مدیریتکنندههایی دیگر برای اینکه وبسایت شما به عنوان یک برنامه وب پیشرونده واجد شرایط شود، لازم نیستند.
اکنون کنسول در صورت یافتن یک کنترلکنندهی واکشی بدون عملیات در وبسایت شما، هشداری نشان میدهد. حذف آن را در نظر بگیرید.
شماره کروم: ۱۳۴۷۳۱۹
نکات برجسته متفرقه
برخی از اصلاحات قابل توجه در این نسخه عبارتند از:
- بخش منابع > نقاط شکست اکنون مسیرهای فایل متمایز را در کنار نامهای مبهم فایل ( 1403924 ) نشان میدهد.
- بخش اصلی در نمودار شعلهای پنل Performance اکنون
CpuProfiler::StartProfilingبه عنوانProfiler Overhead( 1358602 ) تعیین میکند. - DevTools تکمیل خودکار را بهبود بخشید:
- DevTools یک نقطه توقف برای شنونده رویداد اضافه کرده است تا به شما امکان دهد هنگام باز کردن پنجره تصویر در تصویر سند ( ۱۳۱۵۳۵۲ ) مکث کنید.
- DevTools یک راه حل موقت تنظیم کرده است که به درستی مصنوعات وبپک Vue2 را به عنوان جاوا اسکریپت ( 1416562 ) نمایش میدهد.
- یک تنظیم کنسول نام بهتری پیدا میکند: گسترش خودکار پیامهای console.trace(). ( 1139616 ).
دانلود کانالهای پیشنمایش
استفاده از Chrome