ناوبری و فیلترینگ بهبود یافته در پانل عملکرد DevTools

برندن کنی
Brendan Kenny

تاریخ انتشار: 19 مارس 2025

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

ناوبری بهبود یافته

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

یک گزینه جدید در زیر امکان جابجایی بین پیمایش "کلاسیک" موجود و رویکرد جدید "مدرن" را فراهم می کند.

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

در حالت کلاسیک، پیمایش (توسط پد لمسی یا چرخ پیمایش) به بزرگنمایی و کوچکنمایی ادامه می‌دهد، در حالی که نگه‌داشتن shift و اسکرول کردن، نمودار شعله را به سمت بالا و پایین حرکت می‌کند.

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

میانبرهای صفحه کلید (مانند استفاده از WASD برای پیمایش ردیابی) بدون تغییر به کار خود ادامه می دهند.

نمای کلی دو طرفه

در نزدیکی بالای پانل عملکرد ، نمودار CPU ، بخشی از نمای کلی جدول زمانی قرار دارد. تخمین‌هایی از استفاده از CPU را در طول ضبط ردیابی، به تفکیک نوع کار نشان می‌دهد (به عنوان مثال، نارنجی برای اجرای اسکریپت، بنفش برای عملیات رندر).

بالای پنل DevTools Performance، فعالیت CPU را در چندین رنگ تجسم می کند

این یک نمای کلی از ردیابی را ارائه می دهد - که گاهی اوقات به عنوان یک نقشه کوچک از آن یاد می شود - خلاصه ای در سطح بالا از کل جدول زمانی ارائه می دهد، حتی زمانی که برای بررسی مسائل خاص زوم می کنید.

با این حال، هنگام نگاه کردن به ردیابی، می توان به راحتی مکان دقیق خود را در Minimap از دست داد - و بالعکس - بنابراین ما ویژگی های جدیدی را معرفی کرده ایم که به پیوند نمای کلی با نمای بزرگنمایی شده کمک می کند. اکنون، هنگامی که ماوس را روی نمای کلی نگه می‌دارید، یک خط عمودی مربوطه در نمودار شعله ظاهر می‌شود که همان نقطه زمانی را در نمودار شعله نشان می‌دهد:

به طور مشابه، با نگه داشتن ماوس روی ورودی‌های نمودار شعله، اکنون قسمت مربوطه از نمودار CPU برجسته می‌شود. این برای دیدن اینکه دقیقاً کدام وظایف باعث افزایش ناگهانی CPU می شوند عالی است.

ردیابی را فیلتر کنید

اشکال زدایی مشکلات عملکرد معمولاً شامل غربال کردن مقدار زیادی داده است. برای کمک به تمرکز بر مرتبط‌ترین اطلاعات، توانایی فیلتر کردن نویز را بهبود بخشیده‌ایم.

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

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

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

اما اکنون می توانید به صورت دستی لیست نادیده گرفته شده را مستقیماً از در بالای پانل عملکرد ویرایش کنید. رجکس‌های فهرست نادیده گرفته شده در سراسر DevTools به اشتراک گذاشته می‌شوند—بنابراین اسکریپت‌های همسان در هنگام اشکال‌زدایی در پانل Sources نادیده گرفته می‌شوند و به ورودی‌های منفرد در flamechart جمع می‌شوند—و این فهرست در جلسات DevTools پایدار است.

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

اسکریپت های شخص ثالث کم نور

اسکریپت های شخص ثالث در وب سایت ها رایج هستند، اما اغلب می توانند خارج از کنترل ما باشند، یا برای یک جلسه اشکال زدایی خاص بی ربط باشند. گزینه جدید Dim 3rd partys در بالای پانل عملکرد، اسکریپت شخص ثالث و فعالیت شبکه را در جدول زمانی خاکستری می کند، درهم و برهمی بصری را کاهش می دهد و به شما امکان می دهد بر مشارکت های عملکرد شخص اول تمرکز کنید.

اما گاهی اوقات شما می خواهید کنترل بیشتری داشته باشید، مانند تمرکز روی یک شخص ثالث خاص، یا حتی فقط مشارکت های API یا CDN خودتان. در پایین پانل در تب Summary ، تفکیک اشخاص اول و ثالث وجود دارد که DevTools می تواند در صفحه پیدا کند. قرار دادن ماوس روی هر موجودی در لیست، هر فعالیتی را که از آن موجودیت نیست، خاکستری می کند.

نتیجه گیری

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