آیا این آشنا به نظر می رسد؟ شما در حال اشکال زدایی یک مشکل عملکرد در Chrome DevTools هستید، اما حجم بالای اطلاعات در پانل عملکرد، تمرکز فقط بر مرتبط ترین و کاربردی ترین بخش ها را دشوار می کند. بین طول خط زمانی، عمق نمودار شعله و وسعت بسیاری از مسیرهای مختلف داده، پیمایش می تواند چالش برانگیز باشد. همانطور که پنل عملکرد فوق العاده قدرتمند است، مفید بودن آن نباید به قیمت استفاده از آن تمام شود!
به عنوان بخشی از ابتکار ما برای بهبود ابزار عملکرد Chrome، اخیراً سه ویژگی جدید را با هدف کاهش تراکم اطلاعات و کمک به توسعه‌دهندگان برای سفارشی‌سازی گردش کار خود راه‌اندازی کرده‌ایم:
- قسمت های نامربوط از جدول زمانی را پنهان کنید
- قسمت های نامربوط نمودار شعله را پنهان کنید
- پنهان کردن آهنگ های نامربوط
در این پست، نگاهی دقیق‌تر به هر یک از این ویژگی‌ها خواهیم داشت و نشان می‌دهیم که چگونه می‌توانید از آنها برای تمرکز بر حیاتی‌ترین اطلاعات استفاده کنید.
قسمت های نامربوط از جدول زمانی را پنهان کنید
عملکرد وب در مقیاس میلی ثانیه عمل می کند، بنابراین حتی اگر ضبط عملکرد شما فقط چند ثانیه طول بکشد، فرصت های زیادی برای از دست دادن جایگاه خود وجود دارد.
در کروم 122، قابلیت ایجاد پودر سوخاری را اضافه کردیم. این ویژگی به شما امکان می‌دهد تا مرزهای جدول زمانی را محکم کنید تا فقط بتوانید در یک منطقه مورد علاقه که توسط شما تعیین شده بزرگنمایی یا حرکت دهید. برای مثال، محدود کردن جدول زمانی به این روش می‌تواند مفید باشد، برای مثال، اگر می‌خواهید مسائل مربوط به پاسخ‌گویی را اشکال‌زدایی کنید ، بنابراین می‌توانید توجه خود را روی یک تعامل واحد یا کار طولانی مشکل‌ساز متمرکز کنید.
اسکرین شات قبلی نمای نزدیک از جدول زمانی را نشان می دهد که فعالیت رشته اصلی مانند اجرای اسکریپت و کار ارائه را به تصویر می کشد. هنگامی که نشانگر را روی آن نگه می دارید، یک دکمه جدید ظاهر می شود که مرزهای جدول زمانی را به پنجره فعلی تنظیم می کند. دکمه با عرض پنجره زمان، بر حسب میلی ثانیه، و نماد برچسب گذاری می شود. خرده‌های نان در بالای نمای کلی جدول زمانی قرار دارند و هر کدام با اندازه پنجره زمانی خود برچسب‌گذاری می‌شوند.
برای استفاده از این قابلیت:
- بزرگنمایی کنید و خط زمانی را به یک منطقه مورد علاقه حرکت دهید.
- روی نماد ذره بین در نمای کلی خط زمانی کلیک کنید تا خط زمانی را محکم کنید و یک خرده نان تنظیم کنید.
- در صورت نیاز برای بزرگنمایی در ناحیه مورد نظر تو در تو تکرار کنید.
- برای بازگشت به مناطق مورد علاقه قبلی یا محدوده کامل جدول زمانی، روی خرده نان کلیک کنید.
کوتاه کردن خط زمانی کمک می کند تا اطمینان حاصل شود که هرگز به طور تصادفی از محدوده خارج نخواهید شد و به بخش نامربوطی از جدول زمانی پیمایش نخواهید کرد. با این حال، در صورت نیاز، می‌توانید روی پودر سوخاری کلیک کنید تا دوباره کوچک‌نمایی کنید. مزیت دیگر این است که نمای کلی جدول زمانی با آهنگ‌های زیر هماهنگ می‌ماند. این می تواند تشخیص فرصت های عملکرد مانند جریان های مجدد اجباری و شناسایی علت اصلی آنها در نمودار شعله را بسیار آسان تر کند.
قسمت های نامربوط نمودار شعله را پنهان کنید
تجزیه و تحلیل فعالیت نخ اصلی کار کوچکی نیست. این قسمت از پانل عملکرد به عنوان نمودار شعله شناخته می شود، زیرا پشته های تماس می توانند طولانی و دوک شوند. در برخی موارد شدید، این پشته‌ها می‌توانند آنقدر سخت باشند که درک کل موضوع و تمرکز بر روی چیزی که می‌خواهید بهینه‌سازی کنید، دشوار است.
با شروع Chrome 124، می‌توانید دقیقاً کدام ورودی‌ها را در نمودار شعله پنهان کنید، سفارشی کنید ، بنابراین می‌توانید روی کاربردی‌ترین اطلاعات تمرکز کنید.
هنگامی که روی یک تابع در نمودار شعله کلیک راست می کنید، یک منوی زمینه با چندین گزینه برای پنهان کردن ورودی ها ظاهر می شود:
- پنهان کردن تابع : تابع انتخاب شده را از نمودار شعله حذف کنید. فرزندان آن به سمت بالا حرکت می کنند تا بلافاصله پس از عملکرد والدین ظاهر شوند.
- پنهان کردن کودکان : نمودار شعله را در تابع انتخاب شده هرس کنید و همه فرزندان آن را پنهان کنید.
- پنهان کردن فرزندان تکراری : همه نمونه های تابع انتخاب شده را از بقیه نمودار شعله حذف کنید.
همچنین چندین میانبر صفحه کلید مفید وجود دارد که می توانید هنگام انتخاب یک تابع از آنها استفاده کنید:
- H : عملکرد انتخاب شده را مخفی کنید
- C : فرزندان تابع انتخاب شده را مخفی کنید
- R : نمونه هایی از تابع انتخاب شده را بعداً در پشته مخفی کنید.
- U : فرزندان پنهان تابع انتخاب شده را نشان می دهد
اسکریپت های نامربوط را برای همیشه پنهان کنید
گزینه Add script to ignore list تابع انتخاب شده را از نمودار شعله پنهان می کند و همچنین تمام توابع دیگر تعریف شده در همان فایل اسکریپت را مخفی می کند. این اسکریپت همچنین به لیست نادیده گرفتن اضافه می شود، که دیباگر DevTools از آن برای عبور از توابع و نادیده گرفتن استثناهای منشأ اسکریپت استفاده می کند.
اسکریپت های اضافه شده به لیست نادیده گرفته می شوند، بنابراین همچنان در ردیابی های جدید از نمودار شعله پنهان می شوند. اسکریپت های خارج از کنترل شما کاندیدهای خوبی برای لیست نادیده گرفتن خواهند بود. از سوی دیگر، پنهان کردن عملکردهای فردی موقتی به ردیابی فعلی و بیشتر وابسته به موقعیت است. برای مثال، ممکن است بخواهید یک پشته دست و پا گیر از فراخوانی های تابع بازگشتی را پنهان کنید تا کار با ردیابی آسان تر شود.
برای بازگرداندن لیست نادیده گرفتن یا هر عملکرد پنهان دیگری در نمودار شعله، می توانید از منوی زمینه برای بازنشانی فرزندان تابع انتخاب شده یا بازنشانی همه عملکردهای پنهان در سراسر ردیابی استفاده کنید. توابع با فرزندان پنهان با نماد ▼ حاشیه نویسی می شوند، که همچنین با کلیک کردن، کودکان را بازنشانی می کند.
هر گونه عمق و پیچیدگی غیر ضروری که می توانید از نمودار شعله بردارید، آن را بسیار قابل استفاده تر می کند. در صورت نیاز، داشتن قابلیت سفارشی کردن ورودی‌هایی که می‌بینید یک پیشرفت ارگونومیک است که به شما کمک می‌کند توجه خود را روی مهم‌ترین اطلاعات برای کار در دست متمرکز کنید.
پنهان کردن آهنگ های نامربوط
فعالیت رشته اصلی تنها یک آهنگ از پانل عملکرد را تشکیل می دهد. آهنگ‌ها در پانل عملکرد، فعالیت یک فرآیند را تجسم می‌کنند، و همه آنها با یک جدول زمانی مشترک برای کمک به اشکال‌زدایی، تراز می‌شوند. علاوه بر مسیر اصلی ، تراک‌های جداگانه برای سایر فریم‌ها، رشته‌ها و کارگران مورد استفاده صفحه، و همچنین شبکه ، فریم‌ها ، انیمیشن‌ها و تراک‌های تعامل وجود دارد. حتی تعداد تراک‌های بیشتری فعالیت فرآیندهای سطح پایین Chrome مانند IO، GPU، و Compositor را مشخص می‌کنند. این اطلاعات زیادی است! و با این حال، برای اکثر گردش‌های کاری عملکرد، شما فقط نگران اطلاعات چند آهنگ در یک زمان هستید.
از Chrome 125، یک حالت پیکربندی جدید وجود دارد که به شما امکان می‌دهد آهنگ‌های غیرضروری را پنهان کنید یا آنها را مطابق میل خود مرتب کنید. به عنوان مثال، اگر یک تعامل آهسته را بهینه می‌کنید، ممکن است همه چیز را به جز تراک‌های تعاملات ، اصلی و GPU پنهان کنید.
برای ویرایش آهنگ‌ها، روی نام هر آهنگ کلیک راست کرده و Configure tracks را انتخاب کنید. این حالت پیکربندی را باز می‌کند، جایی که می‌توانید تک تک آهنگ‌ها را نشان دهید، پنهان کنید یا مرتب کنید. برای ذخیره تنظیمات برگزیده خود، روی دکمه Finish configuring tracks کلیک کنید.
پیکربندی آهنگ‌ها به شما این امکان را می‌دهد که نحوه ارائه اطلاعات حیاتی توسط پانل عملکرد به گردش کار شما را کنترل کنید. می‌توانید از این تنظیمات برای پنهان کردن فعالیت‌ها از فرآیندهای نامرتبط استفاده کنید و مسیرها را به گونه‌ای جابه‌جا کنید که راحت‌ترین دسترسی را به داده‌های مورد نیازتان داشته باشید.
بسته شدن
این سه ویژگی، کنترل‌های ارگونومیک جدید و قدرتمندی را برای سفارشی‌سازی گردش کار عملکرد خود در اختیار شما قرار می‌دهند. با استفاده از این ویژگی ها و کاهش میزان نویز، خود را در موقعیت بسیار بهتری برای یافتن آنچه به دنبال آن هستید و درک داده ها قرار می دهید.
ما دوست داریم بشنویم که چه چیزی خوب کار می کند یا چگونه تجربه شما می تواند بهبود یابد. اگر سؤال یا بازخورد کلی دارید، با تماس با ChromeDevTools@ به ما اطلاع دهید. اگر چیزی کار نمی کند یا پیشنهادی برای ویژگی های جدید دارید، در مورد این موضوع باز نظر بگذارید.
این تازه شروع ابتکار ما برای بهبود ابزار عملکرد Chrome است و ما هیجان زده هستیم که هر چیز دیگری را که در زمینه آشپزی داریم به اشتراک بگذاریم تا استفاده از پنل عملکرد آسان تر و قدرتمندتر از همیشه باشد. ما پست بعدی خود را منتشر خواهیم کرد که دسته بعدی ویژگی ها را در اینجا در وبلاگ Chrome for Developers به نمایش می گذارد. در همین حال، صفحه «چیزهای جدید در Chrome» را بررسی کنید تا در جریان همه چیز جدید در DevTools و Chrome باشید.