موارد جدید در DevTools، Chrome 135

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

بهبود پنل عملکرد

این نسخه بهبودهای زیادی را در پنل عملکرد (Performance) به همراه دارد.

لینک‌های مبدا و اسکریپت برای فراخوانی پروفایل و تابع در Performance

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

قبل و بعد از اضافه کردن منبع و مبدا به برگه خلاصه.

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

شماره کروم: ۳۶۸۵۴۱۹۵۷

پشتیبانی از داده‌های میدانی «LCP بر اساس فاز»

با روشن بودن داده‌های میدانی ، بخش Performance > Insights > LCP by phase insight اکنون زمان‌بندی‌های تصویر ۷۵ درصد از گزارش تجربه کاربری کروم را در یک جدول اضافی به شما نشان می‌دهد، بنابراین می‌توانید زمان‌بندی‌ها را مستقیماً در این Insight مقایسه کنید.

پشتیبانی از داده‌های میدانی قبل و بعد از افزودن به بینش «LCP بر اساس فاز».

بینش «درخت وابستگی شبکه»

تب Performance > Insights ، بینش جدید Network dependency tree را به مجموعه خود اضافه می‌کند. این بینش به شما می‌گوید که آیا درخواست‌های حیاتی زنجیره‌ای دارید یا خیر، که توصیه نمی‌شود. برای دیدن هایلایت شدن آنها در مسیر Network ، نشانگر ماوس را روی درخواست‌های فهرست شده در این بینش نگه دارید.

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

سنگین‌ترین هایلایت پشته‌ای

پنل Performance اکنون آیتم‌های مسیر اصلی را هنگامی که در Call tree یا Bottom-up > Heaviest stack sidebar روی آنها اشاره می‌کنید، هایلایت می‌کند و بقیه را کم‌رنگ می‌کند. این به شما امکان می‌دهد آیتم‌های تو در تو در call stack را که بیشترین زمان را می‌برند، به صورت بصری پیدا کنید.

نمای درختی دسترسی‌پذیری در Elements

نمای درختی دسترسی‌پذیری تمام‌صفحه اکنون به‌طور پیش‌فرض در پنل عناصر فعال است.

پیش از این، می‌توانستید یک درخت دسترسی جداگانه را در تب Elements > Accessibility مرور کنید. اکنون می‌توانید روی دکمه Switch to Accessibility Tree view در گوشه سمت راست بالای درخت DOM در پنل Elements کلیک کنید تا بین درخت‌های دسترسی DOM و تمام صفحه جابجا شوید، بنابراین می‌توانید آنها و ارتباطشان را راحت‌تر بررسی کنید.

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

درخت دسترسی به شما امکان می‌دهد بررسی کنید که فناوری کمکی چگونه محتوای شما را می‌بیند و ویژگی‌های ARIA و ویژگی‌های دسترسی محاسبه‌شده گره‌های DOM را به شما نشان می‌دهد. برای کسب اطلاعات بیشتر، به درخت دسترسی کامل در Chrome DevTools مراجعه کنید.

مشکل کرومیوم: ۴۰۸۰۸۵۴۱

حالت‌های خالی بهبود یافته برای پنل‌های مختلف

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

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

گزینه «از هوش مصنوعی بپرسید» به پایین منو منتقل شد

گزینه « از هوش مصنوعی بپرس» (Ask AI) حالا به جای بالا، در پایین منوهای کشویی قرار دارد.

قبل و بعد از انتقال گزینه «از هوش مصنوعی بپرسید» به پایین منوی کشویی.

در صورت تمایل می‌توانید نظرات خود را در مورد پنل پشتیبانی هوش مصنوعی در crbug.com/364805393 با ما در میان بگذارید.

فانوس دریایی ۱۲.۴.۰

پنل Lighthouse اکنون Lighthouse 12.4.0 را اجرا می‌کند.

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

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

مشکل کروم: ۴۰۵۴۳۶۵۱

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

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

  • عملکرد > خلاصه : دو خط Total time و Self time را با یک خط Duration جایگزین کرد که (self time) را نیز در صورت وجود، در پرانتز نشان می‌دهد ( crbug.com/395572753 ).
  • مشکلات : انواع مشکلات جدید اضافه شد: مشکلات <select> در درخت دسترسی و خطاهای امضای پیام SRI که هنگام تجزیه یا اعتبارسنجی در سرویس شبکه رخ می‌دهند ( crbug.com/381044049 ، crbug.com/347890366 ).
  • دسترسی‌پذیری : تب عناصر > سبک‌ها اکنون عناصری را که با استفاده از پیمایش صفحه‌کلید از میان آنها عبور می‌کنید، ترسیم می‌کند ( crbug.com/396311936 ).
  • عناصر : مشکلات مربوط به <select> اکنون پشتیبانی می‌شوند و با یک زیرخط موج‌دار برجسته می‌شوند ( crbug.com/378738916 ).
  • شبکه : نمادهای «نقطه لغو» و هشدار کوکی اکنون به جای سمت چپ، در سمت راست نام برگه نشان داده می‌شوند ( crbug.com/390556283 ).

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

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

با تیم Chrome DevTools تماس بگیرید

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

قابلیت‌های جدید در DevTools

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