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

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

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

صفحه سنجه‌های فعال

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

با تعامل شما با صفحه و پیمایش به صفحه‌های جدید، سنجه‌ها به‌روز می‌شوند، ازجمله پیمایش‌های نرم سمت کارخواه در برنامه‌های تک‌صفحه‌ای که با نشان SOFT NAV مشخص می‌شوند. این روش خوبی برای شناسایی مشکلات عملکرد است—به‌ویژه برای INP و CLS اگر فقط تحت شرایط خاصی ظاهر شوند. وقتی مشکل عملکرد به‌طور مداوم تکرار شد، می‌توانید ردیابی را ضبط کنید تا جزئیات بیشتری برای اشکال‌زدایی مشکل زیربنایی دریافت کنید.

ویژگی‌های صفحه سنجه‌های فعال

صفحه سنجه‌های زنده علاوه بر سنجه‌ها، دارای ویژگی‌های زیر است:

• سنجه‌های فیلد از CrUX وقتی در پانل سنجه‌های فیلد فعال باشد.
• خلاصه‌ای از تفاوت‌های قابل‌توجه بین سنجه‌های محلی و فیلد.
• عنصر LCP که می‌توان با نگه داشتن نشانگر روی آن، این عنصر را در صفحه برجسته کرد.
• جزئیات خوشه CLS و نوع INP
• جزئیات بیشتر درباره نگه داشتن نشانگر روی سنجه‌ها (برای مثال، زیربخش‌های LCP و INP، و هیستوگرام‌های فیلد)
• پانل‌های تعاملات و تغییرات چیدمان که سابقه تعاملات و تغییرات چیدمان را ضبط می‌کنند.
• پانل سنجه‌های فیلد که در آن می‌توان داده‌های CrUX را روشن کرد، جزئیات دوره زمانی آن داده‌ها، امکان جابه‌جایی بین داده‌های مبدأ و نشانی وب (درصورت وجود) و بین داده‌های رایانه و تلفن همراه.
• پانل تنظیمات محیط با راهنمایی درباره اینکه از کدام دستگاه، واحد پردازش مرکزی، و محدود کردن شبکه براساس داده‌های CrUX استفاده شود.

برای جزئیات بیشتر، به پست وبلاگ پایش عملکرد Core Web Vitals محلی و کاربر واقعی در DevTools مراجعه کنید.

عملکرد ضبط

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

عملکرد زمان اجرا را ثبت می‌کند

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

1. به صفحه‌ای که می‌خواهید تجزیه‌وتحلیل کنید بروید.
2. روی برگه عملکرد در DevTools کلیک کنید.
3. روی ضبط کلیک کنید.
4. با صفحه تعامل داشته باشید. DevTools همه فعالیت‌های صفحه را که درنتیجه تعامل‌های شما رخ می‌دهد ضبط می‌کند.
5. برای توقف ضبط، دوباره روی ضبط کلیک کنید یا روی توقف کلیک کنید.

ضبط عملکرد بار کردن

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

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

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

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

ثبت نماگرفت درحین ضبط

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

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

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

اجبار کردن زباله‌روبی درحین ضبط

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

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

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

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

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

1. منو تنظیمات ضبط را باز کنید. نمایش تنظیمات ضبط را ببینید.
2. چارگوش انتخاب Disable JavaScript Samples (غیرفعال کردن نمونه‌های جاوا اسکریپت) را فعال کنید.
3. از صفحه فیلم بگیرید.

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

این مثال ضبطی را با نمونه‌های جاوااسکریپت غیرفعال نشان می‌دهد.

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

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

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

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

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

محدود کردن CPU درحین ضبط

برای محدود کردن CPU درحین ضبط:

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

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

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

فعال کردن آمار گزینشگر CSS

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

1. منو تنظیمات ضبط را باز کنید. نمایش تنظیمات ضبط را ببینید.
2. چارگوش فعال کردن آمار گزینشگر CSS را علامت بزنید.

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

فعال کردن ابزارهای دقیق رنگ پیشرفته

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

1. منو تنظیمات ضبط را باز کنید. نمایش تنظیمات ضبط را ببینید.
2. چارگوش فعال کردن ابزارهای پیشرفته رنگ‌آمیزی را علامت بزنید.

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

نمایش ردیابی‌های سفارشی

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

پاک کردن قطعه ضبط‌شده قبلی

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

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

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

حاشیه‌نویسی و هم‌رسانی قطعه ضبط‌شده

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

دریافت اطلاعات آماری استفاده‌کردنی

پانل عملکرد شامل اطلاعات آماری عملکردی است که در گزارش‌های Lighthouse نیز ارائه می‌شود. این اطلاعات آماری می‌تواند روش‌هایی برای بهبود عملکرد پیشنهاد دهد و تجزیه‌وتحلیل هدایت‌شده‌ای درباره مشکلات عملکرد زیر ارائه دهد: بخش‌های فرعی LCP و INP، مشکلات شناسایی درخواست LCP، طرف‌های سوم، و همچنین منابع جاوا اسکریپت قدیمی و تکراری. برای مشاهده فهرست کامل، به اسناد «اطلاعات آماری عملکرد» مراجعه کنید.

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

برای استفاده از اطلاعات آماری:

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

پیمایش قطعه ضبط‌شده

برای کمک به شما در پیمایش، وقتی نشانگر را روی ردیابی عملکرد نگه می‌دارید، پانل عملکرد کارهای زیر را انجام می‌دهد:

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

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

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

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

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

• کلاسیک: بزرگ‌نمایی با چرخ موشواره (صفحه لمسی بالا یا پایین) و پیمایش عمودی با تبدیل + چرخ موشواره.
• مدرن: پیمایش عمودی با چرخ موشواره، پیمایش افقی با Shift + چرخ موشواره، و بزرگ‌نمایی با Command/Control + چرخ موشواره.

کادر گفتگوی میان‌برها همچنین یک برگه تقلب از میان‌برهای دردسترس را به شما ارائه می‌دهد.

بخشی از قطعه ضبط‌شده را انتخاب کنید

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

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

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

1. روی قطعه اصلی یا هریک از قطعه‌های مجاور آن تمرکز کنید.
2. از کلیدهای W،‏ A،‏ S،‏ D به‌ترتیب برای زوم‌پیش کردن، حرکت به چپ، زوم‌پس کردن، و حرکت به راست استفاده کنید.

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

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

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

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

برای ایجاد و استفاده از راهنمای گام‌به‌گام:

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

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

پیمایش نمودار شعله‌ای طولانی

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

نادیده گرفتن دستورگان نامربوط در نمودار شعله‌ای

برای تمرکز بهتر روی کد، می‌توانید متن‌های نامربوط را به فهرست استثناها اضافه کنید.

برای نادیده گرفتن دستورگان، یکی از کارهای زیر را انجام دهید:

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

پانل به‌طور خودکار تودرتویی بیش‌ازحد را برای چنین اسکریپت‌هایی جمع می‌کند و آن‌ها را به‌عنوان On ignore list (REGULAR_EXPRESSION) علامت‌گذاری می‌کند.

در فشرده کردن نمایش کادر گفتگوی تنظیمات فهرست استثناها، می‌توانید قوانین فهرست استثناها را روشن و خاموش کنید.

برای برداشتن دستورگان از فهرست استثناها، روی آن در نمودار شعله‌ای کلیک راست کنید و برداشتن دستورگان از فهرست استثناها را انتخاب کنید یا نشانگر را روی آن در کادر گفتگوی compress نمایش تنظیمات فهرست استثناها نگه دارید و روی delete برداشتن کلیک کنید.

‫DevTools قوانین فهرست نادیده گرفتن را که در تنظیمات تنظیمات > فهرست نادیده گرفتن اضافه می‌کنید ذخیره می‌کند.

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

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

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

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

• ‫macOS: ‏ Command و F
• ‫Windows،‏ Linux: Control+F

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

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

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

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

برای اصلاح تنظیمات پُرسمان:

• برای حساس کردن پُرسمان به حروف، روی match_case حروف‌حساس کلیک کنید.
• روی regular_expression عبارت باقاعده کلیک کنید تا از عبارت باقاعده در پُرسمانتان استفاده کنید.

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

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

برای مرتب کردن ردیابی عملکرد، می‌توانید ترتیب مسیرها را تغییر دهید و مسیرهای نامربوط را در حالت پیکربندی مسیر پنهان کنید.

برای جابه‌جا کردن و پنهان کردن قطعه‌ها:

1. برای وارد شدن به حالت پیکربندی، روی نام قطعه کلیک‌راست کنید و پیکربندی قطعه‌ها را انتخاب کنید.
2. برای جابه‌جا کردن قطعه به بالا یا پایین، روی arrow_upward بالا یا arrow_downward پایین کلیک کنید. برای پنهان کردن آن، روی visibility_off کلیک کنید.
3. وقتی تمام شد، روی اتمام پیکربندی قطعه‌ها در پایین کلیک کنید تا از حالت پیکربندی خارج شوید.

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

پانل عملکرد پیکربندی مسیر را برای ردیابی‌های جدید ذخیره می‌کند اما در جلسه‌های بعدی DevTools ذخیره نمی‌کند.

مشاهده فعالیت رشته اصلی

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

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

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

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

تمیز بین رویدادهای شخص اول و شخص ثالث

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

برای تمرکز فقط بر عملکرد کد شخص اول:

1. مطمئن شوید که هیچ‌چیزی در ردیابی عملکرد یا در برگه اطلاعات آماری انتخاب نشده باشد. برای انجام این کار، روی فضای خالی در ردیابی کلیک کنید.
2. check_box کم‌نور کردن طرف‌های سوم را در نوار کنش در بالا علامت بزنید. پانل عملکرد رویدادهای مربوط به طرف سوم را در ردیابی عملکرد خاکستری می‌کند و فقط رویدادهای طرف اول را برجسته نگه می‌دارد.

رویدادها را با جدول «طرف اول / سوم» برجسته کنید

در محدوده انتخاب‌شده در نمای کلی خط زمان و وقتی هیچ‌کدام از رویدادها انتخاب نشده باشند، برگه خلاصه جدول شخص اول / شخص ثالث را نشان می‌دهد که اندازه انتقال و زمان رشته اصلی موارد زیر را فهرست می‌کند:

• نهاد طرف اول با نشان 1st party علامت‌گذاری شده است.
• همه نهادهای طرف سوم شناسایی‌شده در محدوده انتخاب‌شده، بدون علامت.
• افزونه‌های علامت‌گذاری‌شده با Extension نشان.
• [unattributed] نهاد دیگر.

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

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

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

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

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

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

تکالیف طولانی نیز با یک مثلث قرمز برجسته می‌شوند و بخشی که بیش از ۵۰ میلی‌ثانیه طول می‌کشد با رنگ قرمز سایه‌دار می‌شود:

در این مثال، تکلیف بیش‌از ۴۰۰ میلی‌ثانیه طول کشیده است، بنابراین بخشی که نشان‌دهنده ۳۵۰ میلی‌ثانیه آخر است با رنگ قرمز سایه‌زنی شده است، درحالی‌که ۵۰ میلی‌ثانیه اول سایه‌زنی نشده است.

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

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

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

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

• نامعتبر شدن سبک یا چیدمان -> محاسبه مجدد سبک‌ها یا چیدمان
• درخواست قاب پویانمایی -> قاب پویانمایی فعال شد
• Request Idle Callback (درخواست فراخوانی حالت آزاد) -> Fire Idle Callback (فعال کردن فراخوانی حالت آزاد)
• زمان‌سنج نصب -> زمان‌سنج فعال شد
• ایجاد WebSocket -> ارسال... و دریافت دست‌دهی WebSocket یا از بین بردن WebSocket
• زمان‌بندی postTask -> فراخوانی postTask یا لغو کردن postTask

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

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

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

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

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

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

   

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

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

   

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

نادیده گرفتن دستورگان در نمودار شعله‌ای

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

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

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

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

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

می‌توانید روی موردی در هریک از سه جدول (و در جدول شخص اول / ثالث در برگه خلاصه) کلیک کنید تا رویدادهای مربوطه در ردگیری برجسته بمانند و بقیه موارد هنگام مرور ردگیری عملکرد محو شوند.

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

• match_case مطابقت دادن با اندازه حروف.
• regular_expression عبارت باقاعده.
• match_word انطباق کل واژه.

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

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

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

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

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

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

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

برگه درخت تماس

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

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

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

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

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

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

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

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

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

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

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

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

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

جدول سنگین‌ترین پشته

در سمت چپ برگه درخت تماس یا پایین به بالا، روی right_panel_open نمایش سنگین‌ترین پشته کلیک کنید تا جدول سنگین‌ترین پشته نمایان شود.

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

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

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

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

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

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

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

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

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

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

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

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

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

در رونهادی با خطوط عمودی در سراسر ردگیری عملکرد، می‌توانید نشانگرهای مهم عملکرد را ببینید، مثل:

• اولین نقاشی دارای محتوا (FCP)
• بزرگ‌ترین نقاشی دارای محتوا (LCP)
• رویداد DOMContentLoaded‏ (DCL)
• بارگیری رویداد (L)

برای دیدن مُهر زمان نشانگرها، نشانگر را روی نام نشانگرها در پایین ردیابی نگه دارید.

مشاهده زمان‌بندی‌های سفارشی

در قطعه زمان‌بندی‌ها، نشانگرهای عملکرد سفارشی‌تان را مشاهده کنید، ازجمله:

• ‫performance.mark() تماس. یک علامت تکی با نکته‌ابزار در زیر در ۸۱۳٫۴۴ میلی‌ثانیه نشان داده شده است که برچسب شروع اجرای جاوا اسکریپت دارد.
• performance.measure() تماس. یک بازه زرد در زیر نشان داده شده است که برچسب تعامل کند دارد.

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

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

تعامل‌های کاربر را در قطعه تعامل‌ها مشاهده کنید تا مشکلات احتمالی پاسخ‌دهی را ردیابی کنید.

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

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

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

پیگیری تعامل‌ها همچنین هشدارهای تعامل تا رنگ بعدی (INP) را برای تعامل‌های طولانی‌تر از ۲۰۰ میلی‌ثانیه در برگه خلاصه و در نکته‌ابزار در حالت شناور نشان می‌دهد:

قطعه تعاملات تعاملات بیش‌از ۲۰۰ میلی‌ثانیه را با یک مثلث قرمز در گوشه بالا سمت راست علامت‌گذاری می‌کند.

مشاهده تغییرات چیدمان

تغییرات چیدمان را در قطعه تغییرات چیدمان مشاهده کنید. شیفت‌ها به‌صورت لوزی‌های بنفش نشان داده می‌شوند و براساس نزدیکی‌شان در خط زمان در خوشه‌ها (خطوط بنفش) گروه‌بندی می‌شوند.

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

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

برای اطلاعات بیشتر، تغییر چیدمان تجمعی (CLS) را ببینید.

مشاهده پویانمایی‌ها

پویانمایی‌ها را در قطعه پویانمایی‌ها مشاهده کنید. پویانمایی‌ها به‌عنوان عناصر یا دارایی‌های CSS مربوطه (درصورت وجود) نام‌گذاری می‌شوند، برای مثال، transform یا my-element. پویانمایی‌های غیرترکیبی با مثلث‌های قرمز در گوشه بالا سمت راست علامت‌گذاری شده‌اند.

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

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

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

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

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

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

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

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

بخش «قاب‌ها»

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

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

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

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

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

این مثال نکته‌ابزاری را نشان می‌دهد که وقتی مکان‌نما را روی قاب نیمه‌ارائه‌شده‌ای نگه می‌دارید ظاهر می‌شود.

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

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

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

در کنار نام قطعه شبکه، راهنمایی با انواع درخواست‌های کدگذاری‌شده با رنگ وجود دارد.

درخواست‌های مسدودسازی پرداز زدن با مثلثی قرمز در گوشه بالا سمت راست علامت‌گذاری شده‌اند.

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

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

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

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

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

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

درصورت وجود، برگه خلاصه همچنین تفکیک زمان‌بندی‌های سرور را برای درخواست‌های شبکه‌ای که فناوری‌های پردازش سمت سرور را پیاده‌سازی می‌کنند نشان می‌دهد. برای این درخواست‌ها، پانل عملکرد داده‌ها را از سرصفحه پاسخ Server-Timing می‌گیرد.

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

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

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

مشاهده سنجه‌های حافظه

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

«ابزارهای توسعه‌دهندگان» نمودار جدیدی به‌نام حافظه را در بالای برگه خلاصه نمایش می‌دهد. همچنین نمودار جدیدی در زیر نمودار NET وجود دارد که HEAP نامیده می‌شود. نمودار HEAP همان اطلاعات خط JS Heap در نمودار Memory را ارائه می‌دهد.

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

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

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

مشاهده مدت زمان بخشی از قطعه ضبط‌شده

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

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

مشاهده نماگرفت

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

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

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

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

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

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

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

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

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

نشانگر را روی لایه‌ای نگه دارید تا در نمودار برجسته شود.

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

برای جابه‌جا کردن نمودار:

• روی حالت پانوراما کلیک کنید تا در امتداد محورهای X و Y حرکت کنید.
• روی حالت چرخش کلیک کنید تا در امتداد محور Z بچرخد.
• برای بازنشانی نمودار به موقعیت اصلی‌اش، روی بازنشانی تبدیل کلیک کنید.

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

مشاهده تحلیل‌گر نقاشی

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

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

تجزیه‌وتحلیل عملکرد پرداز زدن با برگه «پرداز زدن»

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

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

با «سنجشگر FPS»، فریم در ثانیه را به‌صورت هم‌زمان مشاهده کنید

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

آمار پرداز زدن قاب را ببینید.

با «چشمک زدن رنگ»، رویدادهای رنگ‌آمیزی را به‌طور هم‌زمان مشاهده کنید

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

Paint flashing (چشمک زدن رنگ) را ببینید.

مشاهده رونهاد لایه‌ها با «مرزهای لایه»

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

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

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

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

مشکلات عملکرد پیمایش را ببینید.