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

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

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

این نسخه تعدادی بهبود در پنل Performance به ارمغان می آورد.

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

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

قبل و بعد از افزودن منبع و مبدا به تب Summary.

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

شماره Chromium: 368541957 .

پشتیبانی از داده های فیلد 'LCP توسط فاز'

با روشن بودن داده‌های میدانی ، عملکرد > اطلاعات آماری > بینش فازی LCP اکنون زمان‌بندی تصویر صدک 75 از گزارش Chrome UX را در جدول دیگری به شما نشان می‌دهد، بنابراین می‌توانید زمان‌بندی‌ها را دقیقاً در بینش مقایسه کنید.

بینش قبل و بعد از افزودن پشتیبانی از داده های میدانی به "LCP به مرحله".

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

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

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

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

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

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

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

برای باز کردن نمای درختی دسترس‌پذیری، روی دکمه view Switch to Accessibility Tree در گوشه سمت راست بالای درخت DOM در پانل Elements کلیک کنید.

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

برای کسب اطلاعات بیشتر، درخت دسترسی کامل را در Chrome DevTools ببینید.

شماره Chromium: 40808541 .

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

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

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

گزینه Ask AI به پایین منو منتقل شد

اکنون گزینه Ask AI به جای در بالا در پایین منوهای کشویی قرار دارد.

قبل و بعد از انتقال گزینه "Ask AI" به پایین منوی کشویی.

با خیال راحت نظرات خود را در مورد پنل کمک هوش مصنوعی در crbug.com/364805393 بنویسید.

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

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

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

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

شماره Chromium: 40543651 .

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

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

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

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

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

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

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

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

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