مرجع ویژگی های عملکرد

Kayce Basques

Sofia Emelianova

این صفحه یک مرجع جامع از ویژگی‌های Chrome DevTools مربوط به تجزیه و تحلیل عملکرد است.

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

ثبت عملکرد

می توانید زمان اجرا یا عملکرد بارگذاری را ضبط کنید.

عملکرد زمان اجرا را ضبط کنید

زمانی که می‌خواهید عملکرد یک صفحه را در حال اجرا، برخلاف بارگذاری، تجزیه و تحلیل کنید، عملکرد زمان اجرا را ضبط کنید.

1. به صفحه ای که می خواهید آنالیز کنید بروید.
2. روی تب Performance در DevTools کلیک کنید.

3. روی Record کلیک کنید .

   

4. با صفحه تعامل داشته باشید. DevTools تمام فعالیت های صفحه را که در نتیجه تعاملات شما رخ می دهد، ثبت می کند.

5. دوباره روی Record یا Stop کلیک کنید تا ضبط متوقف شود.

رکورد عملکرد بار

زمانی که می خواهید عملکرد یک صفحه را در حال بارگذاری تجزیه و تحلیل کنید، عملکرد بارگذاری را ضبط کنید، برخلاف در حال اجرا.

1. به صفحه ای که می خواهید آنالیز کنید بروید.
2. پنل عملکرد DevTools را باز کنید.

3. روی شروع نمایه سازی و بارگذاری مجدد صفحه کلیک کنید . DevTools ابتدا به about:blank پیمایش می کند تا اسکرین شات ها و ردپای باقی مانده را پاک کند. سپس DevTools معیارهای عملکرد را در حین بارگیری مجدد صفحه ثبت می کند و سپس به طور خودکار ضبط را چند ثانیه پس از اتمام بارگیری متوقف می کند.

   

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

در این مثال، پنل Performance فعالیت در حین بارگذاری صفحه را نشان می دهد.

هنگام ضبط، اسکرین شات بگیرید

برای گرفتن اسکرین شات از هر فریم در حین ضبط، کادر چک Screenshots را فعال کنید.

برای آشنایی با نحوه تعامل با اسکرین شات ها به مشاهده اسکرین شات رجوع کنید.

اجباری به جمع آوری زباله در حین ضبط

در حالی که صفحه ای را ضبط می کنید، روی جمع آوری زباله پاک کن کلیک کنید تا جمع آوری زباله مجبور شود.

نمایش تنظیمات ضبط

روی تنظیمات ضبط کلیک کنید برای نمایش تنظیمات بیشتر مربوط به نحوه ضبط عملکرد توسط DevTools.

نمونه های جاوا اسکریپت را غیرفعال کنید

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

1. تنظیمات Capture را باز کنید منو به نمایش تنظیمات ضبط مراجعه کنید.
2. چک باکس Disable JavaScript Samples را فعال کنید.
3. از صفحه ضبط کنید.

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

این مثال یک ضبط با نمونه های JS غیرفعال را نشان می دهد.

این مثال یک ضبط با نمونه های JS فعال را نشان می دهد.

هنگام ضبط شبکه را دریچه گاز بگیرید

برای مهار کردن شبکه در حین ضبط:

1. تنظیمات Capture را باز کنید منو به نمایش تنظیمات ضبط مراجعه کنید.
2. Network را روی سطح انتخاب شده از throttling تنظیم کنید.

هنگام ضبط، سی پی یو را گاز بگیرید

برای دریچه گاز CPU هنگام ضبط:

1. تنظیمات Capture را باز کنید منو به نمایش تنظیمات ضبط مراجعه کنید.
2. CPU را روی سطح throttling انتخاب شده تنظیم کنید.

Throttling نسبت به قابلیت های رایانه شما است. به عنوان مثال، گزینه کاهش سرعت 2 برابر باعث می شود CPU شما 2 برابر کندتر از توانایی معمول خود کار کند. DevTools نمی تواند CPU های دستگاه های تلفن همراه را به طور واقعی شبیه سازی کند، زیرا معماری دستگاه های تلفن همراه با معماری دسکتاپ و لپ تاپ بسیار متفاوت است.

فعال کردن آمار انتخابگر CSS

برای مشاهده آمار انتخابگرهای قوانین CSS خود در طول رویدادهای طولانی مدت محاسبه مجدد سبک :

1. تنظیمات Capture را باز کنید منو به نمایش تنظیمات ضبط مراجعه کنید.
2. تیک گزینه Enable CSS Selector stats را بزنید.

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

ابزار دقیق رنگ را فعال کنید

برای مشاهده دقیق ابزار دقیق رنگ:

1. تنظیمات Capture را باز کنید منو به نمایش تنظیمات ضبط مراجعه کنید.
2. تیک گزینه Enable advanced paint instrumentation را علامت بزنید.

برای یادگیری نحوه تعامل با اطلاعات رنگ، مشاهده لایه ها و مشاهده نمایه رنگ را ببینید.

تقلید همزمانی سخت افزاری

برای آزمایش عملکرد برنامه با تعداد هسته های مختلف پردازنده، می توانید مقدار گزارش شده توسط ویژگی navigator.hardwareConcurrency را پیکربندی کنید. برخی از برنامه ها از این ویژگی برای کنترل میزان موازی بودن برنامه خود استفاده می کنند، به عنوان مثال، برای کنترل اندازه مخزن pthread Emscripten.

برای شبیه سازی همزمانی سخت افزار:

1. تنظیمات Capture را باز کنید منو به نمایش تنظیمات ضبط مراجعه کنید.
2. Hardware Concurrency را علامت بزنید و تعداد هسته ها را در کادر ورودی تنظیم کنید.

DevTools یک نماد هشدار را نمایش می دهد در کنار تب Performance به شما یادآوری می کند که شبیه سازی همزمانی سخت افزاری فعال است.

برای بازگشت به مقدار پیش فرض 10 ، روی Revert کلیک کنید دکمه

ضبط را ذخیره کنید

برای ذخیره یک ضبط، کلیک راست کرده و Save Profile را انتخاب کنید.

یک ضبط را بارگیری کنید

برای بارگیری یک ضبط، کلیک راست کرده و Load Profile را انتخاب کنید.

ضبط قبلی را پاک کنید

پس از ضبط، Clear recording را فشار دهید برای پاک کردن آن ضبط از پانل عملکرد .

یک ضبط عملکرد را تجزیه و تحلیل کنید

پس از اینکه عملکرد زمان اجرا را ضبط کردید یا عملکرد بار را ثبت کردید ، پانل Performance داده های زیادی را برای تجزیه و تحلیل عملکرد آنچه که اخیراً رخ داده است ارائه می دهد.

ضبط را پیمایش کنید

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

بخشی از ضبط را انتخاب کنید

در زیر نوار اکشن پانل عملکرد و در بالای ضبط، می‌توانید بخش نمای کلی Timeline را با نمودارهای CPU و NET مشاهده کنید.

برای انتخاب بخشی از ضبط، کلیک کنید و نگه دارید، سپس در نمای کلی خط زمان به چپ یا راست بکشید.

برای انتخاب بخشی با استفاده از صفحه کلید:

1. روی مسیر اصلی یا هر یک از همسایگان آن تمرکز کنید.
2. از کلیدهای W , A , S , D به ترتیب برای بزرگنمایی، حرکت به چپ، کوچکنمایی و حرکت به راست استفاده کنید.

برای انتخاب بخشی با استفاده از پد لمسی:

1. ماوس را روی بخش نمای کلی خط زمانی یا هر یک از تراک‌ها ( اصلی و همسایگان آن) نگه دارید.
2. با استفاده از دو انگشت، انگشت خود را به سمت بالا بکشید تا کوچک‌نمایی کنید، برای حرکت به چپ انگشتتان را به سمت چپ بکشید، برای بزرگ‌نمایی تند به پایین بکشید و برای حرکت به راست، انگشتتان را به سمت راست بکشید.

پودر سوخاری ایجاد کنید و بین سطوح بزرگنمایی بپرید

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

برای ایجاد و استفاده از پودر سوخاری:

1. در نمای کلی خط زمانی ، بخشی از ضبط را انتخاب کنید .
2. نشانگر را روی قسمت انتخابی نگه دارید و روی دکمه N ms zoom_in کلیک کنید. انتخاب برای پر کردن نمای کلی جدول زمانی گسترش می یابد. زنجیره‌ای از خرده‌های سوخاری در بالای نمای کلی Timeline شروع به ساختن می‌کند.
3. دو مرحله قبل را تکرار کنید تا یک پودر سوخاری تو در تو ایجاد کنید. تا زمانی که محدوده انتخاب بیشتر از 5 میلی ثانیه باشد، می توانید به لانه سازی آرد سوخاری ادامه دهید.
4. برای پرش به یک سطح بزرگنمایی انتخابی، روی خرده نان مربوطه در زنجیره بالای نمای کلی خط زمانی کلیک کنید.

برای حذف خرده‌های سوخاری فرزند، روی خرده نان والد کلیک راست کرده و Remove child breadcrumbs را انتخاب کنید.

نمودار شعله بلند را اسکرول کنید

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

فعالیت های جستجو

می‌توانید فعالیت‌های موجود در مسیر اصلی و درخواست‌ها را در مسیر شبکه جستجو کنید.

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

• macOS: Command + F
• ویندوز، لینوکس: Control + F

این مثال یک عبارت منظم را در کادر جستجو در پایین نشان می دهد که هر فعالیتی را که با E شروع می شود پیدا می کند.

برای چرخه فعالیت‌هایی که با درخواست شما مطابقت دارند:

• روی دکمه expand_less Previous یا expand_more Next کلیک کنید.
• Shift + Enter را برای انتخاب قبلی یا Enter برای انتخاب بعدی فشار دهید.

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

برای تغییر تنظیمات پرس و جو:

• روی match_case Match case کلیک کنید تا عبارت query حساس شود.
• روی regular_expression عبارت منظم کلیک کنید تا از یک عبارت منظم در پرس و جو خود استفاده کنید.

برای پنهان کردن کادر جستجو، روی لغو کلیک کنید.

ترتیب آهنگ ها را تغییر دهید و آنها را پنهان کنید

برای از بین بردن ردیابی عملکرد، می توانید ترتیب آهنگ ها را تغییر دهید و موارد نامربوط را در حالت پیکربندی آهنگ پنهان کنید.

برای جابجایی و پنهان کردن آهنگ ها:

1. برای وارد شدن به حالت پیکربندی، روی نام آهنگ کلیک راست کرده و پیکربندی آهنگ‌ها را انتخاب کنید.
2. روی arrow_upward up یا arrow_downward down کلیک کنید تا یک مسیر به بالا یا پایین منتقل شود. روی visibility_off کلیک کنید تا پنهان شود.
3. پس از اتمام، روی Finish configuring tracks در پایین کلیک کنید تا از حالت پیکربندی خارج شوید.

برای مشاهده عملکرد این گردش کار، ویدیو را تماشا کنید.

پانل Performance پیکربندی آهنگ را برای ردیابی های جدید ذخیره می کند اما در جلسات بعدی DevTools نه.

مشاهده فعالیت موضوع اصلی

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

روی یک رویداد کلیک کنید تا اطلاعات بیشتری درباره آن در برگه خلاصه مشاهده کنید. پانل Performance رویداد انتخاب شده را با رنگ آبی نشان می دهد.

این مثال اطلاعات بیشتری را در مورد رویداد فراخوانی تابع get در تب Summary نشان می دهد.

نمودار شعله را بخوانید

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

این مثال نمودار شعله ای را در مسیر اصلی نشان می دهد. یک رویداد click باعث فراخوانی تابع ناشناس شد. این تابع به نوبه خود، onEndpointClick_ را فراخوانی کرد، که handleClick_ و غیره را نامید.

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

کارهای طولانی نیز با یک مثلث قرمز برجسته می شوند و قسمت بیش از 50 میلی ثانیه به رنگ قرمز سایه می زند:

در این مثال، کار بیش از 400 میلی ثانیه طول کشید، بنابراین قسمتی که 350 میلی ثانیه آخر را نشان می دهد با رنگ قرمز سایه زده می شود، در حالی که 50 میلی ثانیه اولیه نیست.

علاوه بر این، مسیر اصلی اطلاعات مربوط به پروفایل های CPU را نشان می دهد که با توابع کنسول profile() و profileEnd() شروع و متوقف شده اند.

برای پنهان کردن نمودار شعله دقیق فراخوانی های جاوا اسکریپت، به غیرفعال کردن نمونه های جاوا اسکریپت مراجعه کنید. وقتی نمونه‌های JS غیرفعال هستند، فقط رویدادهای سطح بالا مانند Event (click) و Function Call می‌بینید.

آغازگر رویداد را ردیابی کنید

مسیر اصلی می‌تواند فلش‌هایی را نشان دهد که آغازگرهای زیر و رویدادهایی را که ایجاد کرده‌اند را به هم متصل می‌کند:

• باطل کردن سبک یا طرح -> محاسبه مجدد سبک ها یا طرح بندی
• درخواست قاب انیمیشن -> قاب انیمیشن فعال شد
• Request Idle Callback -> Fire Idle Callback
• تایمر -> Timer Fired را نصب کنید
• ایجاد WebSocket -> ارسال... و دریافت WebSocket Handshake یا نابود کردن WebSocket

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

در صورت انتخاب، تب Summary Initiator را برای پیوندها برای آغازگرها و Initiated by links را برای رویدادهایی که آنها ایجاد کرده اند نشان می دهد. برای پرش بین رویدادهای مربوطه روی آنها کلیک کنید.

توابع و فرزندان آنها را در نمودار شعله پنهان کنید

برای از بین بردن نمودار شعله در موضوع اصلی ، می توانید توابع انتخاب شده یا فرزندان آنها را پنهان کنید:

1. در مسیر اصلی ، روی یک تابع کلیک راست کرده و یکی از گزینه های زیر را انتخاب کنید یا میانبر مربوطه را فشار دهید:

   • پنهان کردن تابع ( H )
   • پنهان کردن کودکان ( C )
   • پنهان کردن کودکان تکراری ( R )
   • بازنشانی کودکان ( U )
   • بازنشانی ردیابی ( T )
   • اضافه کردن اسکریپت به لیست نادیده گرفتن ( I )

   

   یک دکمه کشویی arrow_drop_down در کنار نام تابع با فرزندان پنهان ظاهر می شود.

2. برای مشاهده تعداد فرزندان پنهان، نشانگر را روی دکمه کشویی arrow_drop_down نگه دارید.

   

3. برای بازنشانی عملکردی با کودکان پنهان یا نمودار شعله کامل، عملکرد را انتخاب کنید و U فشار دهید یا روی هر عملکردی راست کلیک کنید و به ترتیب Reset trace را انتخاب کنید.

اسکریپت های موجود در نمودار شعله را نادیده بگیرید

برای افزودن یک اسکریپت به لیست نادیده گرفتن، روی یک اسکریپت در نمودار کلیک راست کرده و گزینه Add script to ignore list را انتخاب کنید.

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

مشاهده فعالیت ها در یک جدول

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

• وقتی می‌خواهید فعالیت‌های ریشه‌ای را ببینید که بیشترین کار را انجام می‌دهند، از برگه Call Tree استفاده کنید.
• وقتی می‌خواهید فعالیت‌هایی را ببینید که بیشترین زمان در آن‌ها به طور مستقیم صرف شده است، از برگه پایین به بالا استفاده کنید.
• وقتی می‌خواهید فعالیت‌ها را به ترتیبی که در طول ضبط انجام شده‌اند مشاهده کنید، از برگه گزارش رویداد استفاده کنید.

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

• match_case مورد کبریت .
• regular_expression عبارت منظم .
• match_word مطابقت کل کلمه .

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

برای باز کردن یک فایل منبع در پانل منابع ، روی پیوند کلیک کنید.

توجه: سه بخش بعدی همگی به یک نسخه نمایشی اشاره دارند. می‌توانید نسخه نمایشی را خودتان در Activity Tabs Demo اجرا کنید و منبع را در GoogleChrome/devtools-samples/perf/activitytabs.html مشاهده کنید.

فعالیت های ریشه ای

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

فعالیت‌های روت آن‌هایی هستند که باعث می‌شوند مرورگر برخی کارها را انجام دهد. به عنوان مثال، هنگامی که روی یک صفحه کلیک می کنید، مرورگر یک فعالیت Event را به عنوان فعالیت ریشه فعال می کند. آن Event ممکن است باعث شود که یک handler اجرا شود.

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

برای مثالی از فعالیت‌های ریشه، تب Call Tree را ببینید.

برگه Call Tree

از تب Call Tree برای مشاهده اینکه کدام فعالیت‌های ریشه بیشترین کار را انجام می‌دهند استفاده کنید.

برگه Call Tree فقط فعالیت‌ها را در طول بخش انتخابی ضبط نمایش می‌دهد. برای آشنایی با نحوه انتخاب بخش‌ها ، به انتخاب بخش ضبط شده مراجعه کنید.

در این مثال، سطوح بالای آیتم‌های ستون Activity ، مانند Event ، Paint و Composite Layers ، فعالیت‌های ریشه هستند. تودرتو نشان دهنده پشته تماس است. در این مثال، Event باعث Function Call شد که باعث button.addEventListener شد که باعث b و غیره شد.

زمان خود نشان دهنده زمانی است که مستقیماً در آن فعالیت صرف شده است. کل زمان نشان دهنده زمان صرف شده در آن فعالیت یا هر یک از فرزندان آن است.

روی Self Time ، Total Time یا Activity کلیک کنید تا جدول بر اساس آن ستون مرتب شود.

از کادر فیلتر برای فیلتر کردن رویدادها بر اساس نام فعالیت استفاده کنید.

به طور پیش فرض منوی گروه بندی روی No Grouping تنظیم شده است. از منوی گروه بندی برای مرتب کردن جدول فعالیت ها بر اساس معیارهای مختلف استفاده کنید.

روی Show Heaviest Stack کلیک کنید برای نمایش جدول دیگری در سمت راست جدول Activity . برای پر کردن جدول Heaviest Stack روی یک فعالیت کلیک کنید. جدول Heaviest Stack به شما نشان می دهد که کدام یک از فرزندان فعالیت انتخابی طولانی ترین زمان را برای اجرا صرف کرده اند.

تب Bottom-Up

از تب Bottom-Up برای مشاهده اینکه کدام فعالیت ها بطور مستقیم بیشترین زمان را در مجموع می گیرند استفاده کنید.

تب Bottom-Up فقط فعالیت ها را در طول بخش انتخاب شده از ضبط نمایش می دهد. برای آشنایی با نحوه انتخاب بخش‌ها ، به انتخاب بخش ضبط شده مراجعه کنید.

در نمودار شعله مسیر اصلی این مثال، می‌بینید که تقریباً تمام زمان صرف اجرای سه فراخوانی برای wait() شده است. بر این اساس، فعالیت برتر در برگه Bottom-Up wait است. در نمودار شعله، رنگ زرد زیر تماس‌های wait در واقع هزاران تماس Minor GC است. بر این اساس، می‌توانید ببینید که در تب Bottom-Up ، گران‌ترین فعالیت بعدی Minor GC است.

ستون Self Time نشان دهنده زمان انبوهی است که مستقیماً در آن فعالیت صرف شده است، در همه موارد آن.

ستون مجموع زمان نشان دهنده زمان جمع آوری شده در آن فعالیت یا هر یک از فرزندان آن است.

برگه گزارش رویداد

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

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

ستون Start Time نشان دهنده نقطه ای است که آن فعالیت در آن شروع شده است، نسبت به شروع ضبط. زمان شروع 1573.0 ms برای مورد انتخاب شده در این مثال به این معنی است که فعالیت 1573 میلی ثانیه پس از شروع ضبط شروع شده است.

ستون Self Time نشان دهنده زمان صرف شده مستقیم در آن فعالیت است.

ستون‌های زمان کل زمان صرف شده مستقیماً در آن فعالیت یا هر یک از فرزندان آن را نشان می‌دهد.

روی Start Time ، Self Time یا Total Time کلیک کنید تا جدول بر اساس آن ستون مرتب شود.

از کادر فیلتر برای فیلتر کردن فعالیت ها بر اساس نام استفاده کنید.

از منوی Duration برای فیلتر کردن فعالیت‌هایی که کمتر از 1 یا 15 میلی‌ثانیه طول کشیده است، استفاده کنید. به طور پیش فرض منوی مدت زمان روی همه تنظیم شده است، به این معنی که همه فعالیت ها نشان داده می شوند.

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

مشاهده زمان بندی

در مسیر تایمگز ، نشانگرهای مهمی مانند:

• اولین رنگ (FP)
• اولین رنگ محتوایی (FCP)
• بزرگترین رنگ محتوایی (LCP)
• رویداد DOMContentLoaded (DCL)
• رویداد Onload (L)
• سفارشی performance.mark() شما تماس می گیرد. یک علامت جداگانه با راهنمای ابزار در زیر با 813.44 میلی‌ثانیه نشان داده شده است، با برچسب شروع به اجرای جاوا اسکریپت .
• performance.measure() سفارشی شما را فراخوانی می کند. یک دهانه زرد در زیر نشان داده شده است که دارای برچسب تعامل آهسته است.

یک نشانگر را برای مشاهده جزئیات بیشتر در برگه خلاصه ، از جمله مهر زمانی، زمان کل، زمان خود و شی detail انتخاب کنید. برای فراخوانی‌های performance.mark() و performance.measure() ، تب همچنین ردپای پشته را نشان می‌دهد.

مشاهده تعاملات

برای ردیابی مشکلات احتمالی پاسخگویی، تعاملات کاربر را در مسیر Interactions مشاهده کنید.

برای مشاهده تعاملات:

1. برای مثال، DevTools را در این صفحه نمایشی باز کنید .
2. پانل Performance را باز کنید و ضبط را شروع کنید .
3. روی یک عنصر (قهوه) کلیک کنید و ضبط را متوقف کنید.
4. مسیر تعاملات را در جدول زمانی پیدا کنید.

در این مثال، تراک Interactions تعامل Pointer را نشان می دهد. فعل و انفعالات دارای سبیل هایی هستند که تاخیر ورودی و ارائه را در مرزهای زمانی پردازش نشان می دهد. ماوس را روی تعامل نگه دارید تا راهنمایی ابزار با تاخیر ورودی، زمان پردازش و تاخیر ارائه را ببینید.

تراک Interactions همچنین هشدارهای Interaction to Next Paint (INP) را برای تعاملات بیش از 200 میلی ثانیه در برگه Summary و در یک راهنمای ابزار در حالت شناور نشان می دهد:

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

مشاهده فعالیت GPU

فعالیت GPU را در بخش GPU مشاهده کنید.

مشاهده فعالیت شطرنجی

فعالیت شطرنجی را در بخش Thread Pool مشاهده کنید.

تجزیه و تحلیل فریم در ثانیه (FPS)

DevTools راه های زیادی برای تجزیه و تحلیل فریم در ثانیه ارائه می دهد:

• از بخش Frames برای مشاهده مدت زمان یک فریم خاص استفاده کنید.
• از FPS متر برای تخمین زمان واقعی FPS هنگام اجرای صفحه استفاده کنید. مشاهده فریم در ثانیه در زمان واقعی با FPS متر را ببینید.

بخش فریم ها

بخش Frames به شما می گوید که یک فریم خاص چقدر طول کشیده است.

ماوس را روی یک قاب نگه دارید تا راهنمایی ابزار را با اطلاعات بیشتر در مورد آن مشاهده کنید.

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

بخش Frames می تواند چهار نوع فریم را نشان دهد:

1. قاب بیکار (سفید) . بدون تغییر.
2. قاب (سبز) . مطابق انتظار و به موقع ارائه شد.
3. قاب نیمه ارائه شده (زرد با الگوی خط تیره پهن و پراکنده) . کروم تمام تلاش خود را کرد تا حداقل برخی به‌روزرسانی‌های بصری را به موقع ارائه کند. به عنوان مثال، در صورتی که کار رشته اصلی فرآیند رندر (انیمیشن بوم) دیر باشد اما موضوع کامپوزیتور (پیمایش) به موقع باشد.
4. قاب افتاده (قرمز با الگوی خطی متراکم) . Chrome نمی‌تواند قاب را در زمان معقول ارائه کند.

این مثال زمانی که ماوس را روی یک قاب نیمه ارائه شده نگه دارید، یک راهنمای ابزار را نشان می دهد.

برای مشاهده اطلاعات بیشتر درباره قاب در برگه خلاصه ، روی یک فریم کلیک کنید. DevTools قاب انتخاب شده را به رنگ آبی ترسیم می کند.

مشاهده درخواست های شبکه

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

در کنار نام تراک Network ، یک افسانه با انواع درخواست های رنگی وجود دارد.

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

ماوس را روی یک درخواست نگه دارید تا راهنمایی ابزار را ببینید:

• URL درخواست و کل زمان اجرای آن.
• اولویت یا تغییر اولویت، به عنوان مثال، Medium -> High .
• این که آیا درخواست Render blocking است یا خیر.
• تفکیک زمان‌بندی درخواست، که بعداً توضیح داده شد.

هنگامی که روی یک درخواست کلیک می کنید، مسیر شبکه یک فلش را از آغازگر خود به سمت درخواست می کشد.

علاوه بر این، پانل عملکرد ، تب Summary را با اطلاعات بیشتر در مورد درخواست، از جمله فیلدهای اولویت اولیه و اولویت (نهایی) به شما نشان می دهد. اگر مقادیر آنها متفاوت باشد، اولویت واکشی درخواست در طول ضبط تغییر کرده است. برای اطلاعات بیشتر، بهینه سازی بارگیری منبع با Fetch Priority API را ببینید.

تب Summary نیز تفکیک زمان بندی درخواست را نشان می دهد.

درخواست www.google.com با یک خط در سمت چپ ( |– )، یک نوار در وسط با یک قسمت تیره و یک قسمت روشن، و یک خط در سمت راست ( –| ) نشان داده شده است.

می‌توانید زمان‌بندی دیگری را در برگه شبکه پیدا کنید. روی درخواست در مسیر Network یا URL آن در برگه Summary کلیک راست کنید و روی Reveal در پانل Network کلیک کنید. DevTools شما را به پنل Network می برد و درخواست مربوطه را انتخاب می کند. تب Timeming آن را باز کنید.

در اینجا نحوه نگاشت این دو شکست به یکدیگر آمده است:

• خط چپ ( |– ) همه چیز تا گروه Connection start از رویدادها است. به عبارت دیگر، همه چیز قبل از Request Sent است.
• بخش نوری نوار Request sent و Waiting for server response است.
• قسمت تاریک نوار Content download است.
• خط راست ( –| ) زمان صرف شده در انتظار رشته اصلی است. برگه Network > Timeming آن را نشان نمی دهد.

مشاهده معیارهای حافظه

برای مشاهده معیارهای حافظه از آخرین ضبط، کادر انتخاب حافظه را فعال کنید.

DevTools نمودار حافظه جدیدی را در بالای تب Summary نمایش می دهد. همچنین یک نمودار جدید در زیر نمودار NET وجود دارد که HEAP نام دارد. نمودار HEAP همان اطلاعات خط JS Heap در نمودار حافظه را ارائه می دهد.

این مثال معیارهای حافظه را در بالای تب Summary نشان می دهد.

خطوط رنگی روی نمودار به چک باکس های رنگی بالای نمودار نشان داده می شوند. برای مخفی کردن آن دسته از نمودار، یک چک باکس را غیرفعال کنید.

نمودار فقط منطقه ضبط انتخاب شده را نشان می دهد. در مثال قبلی، نمودار حافظه فقط میزان مصرف حافظه برای شروع ضبط را تا حدود 1000 میلی ثانیه نشان می دهد.

مدت زمان بخشی از ضبط را مشاهده کنید

هنگام تجزیه و تحلیل بخشی مانند شبکه یا اصلی ، گاهی اوقات به تخمین دقیق تری از مدت زمان انجام برخی رویدادها نیاز دارید. Shift را نگه دارید، کلیک کنید و نگه دارید و برای انتخاب بخشی از ضبط، به چپ یا راست بکشید. در پایین انتخاب شما، DevTools نشان می دهد که این بخش چقدر طول کشیده است.

در این مثال، مُهر زمانی 488.53ms در پایین قسمت انتخاب‌شده نشان می‌دهد که آن بخش چقدر طول کشیده است.

مشاهده یک اسکرین شات

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

ماوس را روی نمای کلی Timeline نگه دارید تا تصویری از ظاهر صفحه در آن لحظه ضبط را مشاهده کنید. نمای کلی Timeline بخشی است که شامل نمودارهای CPU ، FPS و NET است.

همچنین می توانید با کلیک بر روی یک فریم در بخش Frames، اسکرین شات ها را مشاهده کنید. DevTools نسخه کوچکی از اسکرین شات را در تب Summary نمایش می دهد.

این مثال اسکرین شات قاب 195.5ms را در تب Summary نشان می‌دهد که روی آن در بخش Frames کلیک می‌کنید.

روی تصویر کوچک در تب Summary کلیک کنید تا روی اسکرین شات بزرگنمایی کنید.

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

مشاهده اطلاعات لایه ها

برای مشاهده اطلاعات لایه های پیشرفته در مورد یک قاب:

1. ابزار دقیق رنگ را فعال کنید .
2. در قسمت Frames یک فریم را انتخاب کنید. DevTools اطلاعات لایه های خود را در برگه Layers جدید، در کنار تب Event Log نمایش می دهد.

ماوس را روی یک لایه نگه دارید تا آن را در نمودار برجسته کنید.

این مثال لایه #39 را نشان می‌دهد که وقتی ماوس را روی آن قرار می‌دهید برجسته شده است.

برای جابجایی نمودار:

• روی Pan Mode کلیک کنید برای حرکت در امتداد محورهای X و Y.
• روی Rotate Mode کلیک کنید برای چرخش در امتداد محور Z.
• روی Reset Transform کلیک کنید برای بازنشانی نمودار به موقعیت اصلی خود.

تجزیه و تحلیل لایه را در عمل مشاهده کنید:

مشاهده پروفایلر رنگ

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

1. ابزار دقیق رنگ را فعال کنید .
2. یک رویداد Paint را در مسیر اصلی انتخاب کنید.

عملکرد رندر را با تب Rendering تجزیه و تحلیل کنید

از ویژگی های برگه Rendering برای کمک به تجسم عملکرد رندر صفحه خود استفاده کنید.

تب Rendering را باز کنید .

با FPS متر فریم در ثانیه را در زمان واقعی مشاهده کنید

آمار رندر فریم یک پوشش است که در گوشه سمت راست بالای نمای شما ظاهر می شود. این یک تخمین زمان واقعی از FPS را در حین اجرای صفحه ارائه می دهد.

به آمار رندر فریم مراجعه کنید.

رویدادهای نقاشی را در زمان واقعی با Paint Flashing مشاهده کنید

از Paint Flashing برای دریافت یک نمای زمان واقعی از تمام رویدادهای رنگ در صفحه استفاده کنید.

به چشمک زدن رنگ مراجعه کنید.

مشاهده همپوشانی از لایه ها با Layer Borders

از Layer Borders برای مشاهده همپوشانی از حاشیه های لایه و کاشی ها در بالای صفحه استفاده کنید.

مرزهای لایه را ببینید.

مشکلات عملکرد اسکرول را در زمان واقعی پیدا کنید

از مشکلات عملکرد پیمایش برای شناسایی عناصری از صفحه استفاده کنید که شنوندگان رویداد مرتبط با پیمایش هستند که ممکن است به عملکرد صفحه آسیب برساند. DevTools عناصر بالقوه مشکل ساز را در Teal ترسیم می کند.

مسائل مربوط به عملکرد پیمایش را ببینید.