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

Kayce Basques

Sofia Emelianova

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

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

ثبت عملکرد

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

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

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

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

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

   

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

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

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

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

1. به صفحه ای که می خواهید آنالیز کنید بروید.
2. پنل Performance 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 های دستگاه های تلفن همراه را به طور واقعی شبیه سازی کند، زیرا معماری دستگاه های تلفن همراه با معماری دسکتاپ و لپ تاپ بسیار متفاوت است.

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

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

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. برای پرش به یک سطح بزرگنمایی انتخابی، روی خرده نان مربوطه در زنجیره بالای نمای کلی خط زمانی کلیک کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   • پنهان کردن تابع ( H )
   • پنهان کردن کودکان ( C )
   • پنهان کردن کودکان تکراری ( R )
   • بازنشانی کودکان ( U )
   • بازنشانی ردیابی

   

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

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

   

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

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

پانل عملکرد نشان دهنده فعالیت نخ اصلی در نمودار شعله است. محور 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 را برای رویدادهایی که آنها ایجاد کرده اند نشان می دهد. برای پرش بین رویدادهای مربوطه روی آنها کلیک کنید.

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

پس از ضبط یک صفحه، برای تجزیه و تحلیل فعالیت ها نیازی به تکیه صرفاً به مسیر اصلی ندارید. 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() سفارشی شما را فراخوانی می کند. یک دهانه زرد در زیر نشان داده شده است که دارای برچسب تعامل آهسته است.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بخش فریم ها

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

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

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

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

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

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

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

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

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

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

• HTML: آبی
• CSS: بنفش
• JS: زرد
• تصاویر: سبز

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

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

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

در مثال قبلی، درخواست www.google.com با یک خط در سمت چپ، یک نوار در وسط با یک بخش تاریک و یک بخش روشن، و یک خط در سمت راست نشان داده شده است. اسکرین شات بعدی نمایش مربوط به همان درخواست را در زبانه Timeing پنل Network نشان می دهد. در اینجا نحوه نگاشت این دو نمایش به یکدیگر آمده است:

• خط چپ همه چیز مربوط به گروه رویدادهای Connection Start است، که شامل آن می شود. به عبارت دیگر، همه چیز قبل از Request Sent ، انحصاری است.
• بخش نور نوار Request Sent و Waiting (TTFB) است.
• قسمت تاریک نوار، Content Download است.
• خط مناسب اساساً زمان صرف شده برای انتظار برای موضوع اصلی است. این در برگه زمان‌بندی نشان داده نمی‌شود.

این مثال نمایش نوار خط درخواست www.google.com را نشان می دهد.

این مثال نمایش برگه زمان‌بندی درخواست www.google.com را نشان می‌دهد.

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

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

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 ترسیم می کند.

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

،

Kayce Basques

Sofia Emelianova

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

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

ثبت عملکرد

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

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

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

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

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

   

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

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

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

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

1. به صفحه ای که می خواهید آنالیز کنید بروید.
2. پنل Performance 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 های دستگاه های تلفن همراه را به طور واقعی شبیه سازی کند، زیرا معماری دستگاه های تلفن همراه با معماری دسکتاپ و لپ تاپ بسیار متفاوت است.

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

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

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 کلیک کنید. انتخاب برای پر کردن نمای کلی جدول زمانی گسترش می یابد. زنجیره ای از آرد سوخاری ها در بالای نمای کلی جدول زمانی شروع به کار می کنند.
3. دو مرحله قبلی را برای ایجاد یک خرده نان تو در تو تکرار کنید. شما می توانید تا زمانی که دامنه انتخاب بیشتر از 5 میلی ثانیه باشد ، به لانه های نان لانه ادامه دهید.
4. برای پرش به سطح بزرگنمایی انتخاب شده ، روی آرد سوخاری مربوطه در زنجیره در بالای نمای کلی جدول زمانی کلیک کنید.

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

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

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

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

• MACOS: فرمان + F
• ویندوز ، لینوکس: کنترل + F

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

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

• بر روی دکمه های بعدی یا Expand_more بعدی کلیک کنید.
• SHIFT + ENTER را فشار دهید تا قبلی را انتخاب کنید یا برای انتخاب بعدی وارد شوید .

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

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

• برای حساسیت به پرونده پرس و جو ، روی مورد match_case کلیک کنید.
• برای استفاده از یک عبارت معمولی در پرس و جو خود ، بر روی عبارت معمولی_ اکسپرسیون کلیک کنید.

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

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

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

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

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

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

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

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

   • عملکرد پنهان ( H )
   • پنهان کردن کودکان ( C )
   • پنهان کردن کودکان ( R )
   • تنظیم مجدد کودکان ( U )
   • ردیابی

   

   یک دکمه کشویی Arrow_drop_down در کنار نام عملکرد با کودکان پنهان ظاهر می شود.

2. برای دیدن تعداد کودکان پنهان ، روی دکمه کشویی Arrow_Drop_down حرکت کنید.

   

3. برای تنظیم مجدد یک عملکرد با کودکان پنهان یا نمودار شعله ، عملکرد را انتخاب کرده و بر روی هر عملکردی U یا راست کلیک کرده و به ترتیب Reset Trace را انتخاب کنید.

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

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

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

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

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

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

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

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

پیگیری مبتکران رویداد

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

• بی اعتبار بودن سبک یا طرح -> سبک ها یا طرح بندی مجدد را محاسبه کنید
• قاب انیمیشن را درخواست کنید -> قاب انیمیشن اخراج شد
• درخواست پاسخ به تماس بیکار -> بازگشت به تماس با آتش سوزی
• تایمر را نصب کنید -> تایمر اخراج شده است
• ایجاد WebSocket -> ارسال ... و دریافت WebSocket Handshake یا WebSocket را نابود کنید

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

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

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

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

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

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

• CACK_CASE MATCH CASE .
• بیان منظم_ بیان .
• match_word با کلمه کامل مطابقت دارد .

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

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

توجه: سه بخش بعدی همه به همان نسخه ی نمایشی اشاره دارند. شما می توانید نسخه ی نمایشی را در Tabs Activity Demo اجرا کنید و منبع را در Googlechrome/DevTools-samples/perf/actiontabs.html مشاهده کنید.

فعالیت های اصلی

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

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

در نمودار شعله اصلی آهنگ ، فعالیتهای ریشه ای در بالای نمودار قرار دارند. در برگه های Log Log Call و Event ، فعالیتهای ریشه موارد سطح بالا هستند.

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

برگه Call Tree

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

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

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

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

برای مرتب کردن جدول توسط آن ستون ، روی زمان خود ، زمان کل یا فعالیت کلیک کنید.

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

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

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

برگه پایین به بالا

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

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

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

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

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

برگه ورود به سیستم رویداد

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

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

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

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

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

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

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

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

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

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

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

• رنگ اول (FP)
• اولین رنگ محتوا (FCP)
• بزرگترین رنگ محتوایی (LCP)
• رویداد Domcontentloaded (DCL)
• رویداد Onload (L)
• performance.mark() تماس می گیرد. یک علامت جداگانه با Tooltip در زیر در 813.44 ms نشان داده شده است ، که دارای برچسب شروع به اجرای JavaScript است .
• performance.measure() تماس می گیرد. یک دهانه زرد در زیر نشان داده شده است ، با برچسب تعامل آهسته .

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

تعامل را مشاهده کنید

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

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

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

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

آهنگ تعامل همچنین تعامل با هشدارهای رنگ بعدی (INP) برای تعامل بیش از 200 میلی ثانیه در برگه خلاصه و در یک ابزار ابزار در شناور را نشان می دهد:

آهنگ تعامل ، تعامل بیش از 200 میلی ثانیه با مثلث قرمز در گوشه بالا سمت راست را نشان می دهد.

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

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

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

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

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

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

• از بخش فریم ها استفاده کنید تا ببینید که یک قاب خاص چقدر طول می کشد.
• با استفاده از صفحه FPS برای برآورد زمان واقعی از FPS با استفاده از صفحه ، از FPS استفاده کنید. مشاهده فریم در ثانیه در زمان واقعی با متر FPS .

بخش قاب ها

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

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

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

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

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

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

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

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

بخش شبکه را برای مشاهده آبشار درخواست های شبکه که در طول ضبط رخ داده است ، گسترش دهید.

درخواست ها به شرح زیر رنگی هستند:

• HTML: آبی
• CSS: بنفش
• JS: زرد
• تصاویر: سبز

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

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

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

در مثال قبلی ، درخواست www.google.com توسط یک خط در سمت چپ ، یک نوار در وسط با یک قسمت تاریک و یک قسمت سبک و یک خط در سمت راست نشان داده شده است. تصویر بعدی بازنمایی مربوط به همان درخواست را در برگه زمان بندی پنل شبکه نشان می دهد. در اینجا نحوه ترسیم این دو نمایش به یکدیگر آمده است:

• خط سمت چپ همه چیز تا گروه Connection Start از رویدادها ، فراگیر است. به عبارت دیگر ، این همه چیز قبل از Request Sent ، اختصاصی است.
• بخش نور نوار Request Sent و Waiting (TTFB) است.
• قسمت تاریک نوار Content Download است.
• خط مناسب در اصل زمان صرف انتظار برای موضوع اصلی است. این در برگه زمان بندی نشان داده نشده است.

این مثال نمایندگی خط بار درخواست www.google.com را نشان می دهد.

این مثال نمایشگاه برگه زمان درخواست www.google.com را نشان می دهد.

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

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

DevTools نمودار حافظه جدید ، بالاتر از برگه خلاصه را نشان می دهد. همچنین نمودار جدیدی در زیر نمودار خالص به نام Heap وجود دارد. نمودار Heap اطلاعات مشابه خط JS Heap را در نمودار حافظه ارائه می دهد.

این مثال معیارهای حافظه را در بالای برگه خلاصه نشان می دهد.

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

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

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

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

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

مشاهده یک تصویر

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

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

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

این مثال تصویر را برای قاب 195.5ms در برگه خلاصه نشان می دهد وقتی روی بخش فریم ها کلیک می کنید.

برای بزرگنمایی روی تصویر روی تصویر کوچک در برگه خلاصه کلیک کنید.

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

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

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

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

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

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

برای حرکت نمودار:

• روی حالت پان کلیک کنید برای حرکت در امتداد محورهای x و y.
• روی حالت چرخش کلیک کنید برای چرخش در امتداد محور z.
• روی Reset Transform کلیک کنید برای تنظیم مجدد نمودار به موقعیت اصلی آن.

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

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

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

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

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

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

برگه Rendering را باز کنید .

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

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

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

وقایع نقاشی را در زمان واقعی با چشمک زدن رنگ مشاهده کنید

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

چشمک زن را ببینید.

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

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

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

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

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

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