مرجع ميزات الأداء

هذه الصفحة هي مرجع شامل لميزات "أدوات مطوّري البرامج في Chrome" المتعلّقة بتحليل الأداء.

يمكنك الاطّلاع على تحليل أداء وقت التشغيل للحصول على دليل إرشادي حول كيفية تحليل أداء الصفحة باستخدام "أدوات مطوّري البرامج في Chrome".

شاشة "مقاييس الأداء المباشرة"

عند فتح لوحة الأداء لأول مرة، ستظهر لك شاشة "المقاييس المباشرة" التي تقدّم لك ملخّصًا فوريًا لأداء الصفحة الحالية باستخدام مؤشرات Core Web Vitals الثلاثة.

يتم تعديل المقاييس أثناء تفاعلك مع الصفحة وانتقالك إلى صفحات جديدة، بما في ذلك عمليات التنقّل السلس من جهة العميل في التطبيقات من صفحة واحدة، والتي يُشار إليها بشارة SOFT NAV. وهذه طريقة جيدة لتحديد مشاكل الأداء، خاصةً في ما يتعلق بمقياسَي INP وCLS إذا كانا يظهران في ظروف معيّنة فقط. بعد تكرار مشكلة في الأداء باستمرار، يمكنك تسجيل تتبُّع للحصول على مزيد من التفاصيل لتصحيح أخطاء المشكلة الأساسية.

ميزات شاشة "مقاييس الأداء المباشرة"

تتضمّن شاشة المقاييس المباشرة الميزات التالية، بالإضافة إلى المقاييس:

• بيانات مقاييس تجارب المستخدمِين الحقيقيين من CrUX عند تفعيلها في لوحة بيانات مقاييس تجارب المستخدمِين الحقيقيين
• ملخّص لأي اختلافات ملحوظة بين المقاييس على نظامك المحلي ومقاييس تجارب المستخدمين الحقيقيين
• عنصر LCP، الذي يمكن تمرير مؤشر الماوس فوقه لتمييزه على الصفحة
• تفاصيل مجموعة CLS ونوع INP
• مزيد من التفاصيل حول تمرير مؤشر الماوس فوق المقاييس (مثل الأجزاء الفرعية لمقياسَي LCP وINP والمدرّجات التكرارية لتجارب المستخدمين الحقيقيين)
• لوحتا التفاعلات وتغييرات التصميم لتسجيل سجلّ التفاعلات وتغييرات التصميم
• لوحة مقاييس البيانات الميدانية التي يمكن من خلالها تفعيل بيانات CrUX، وتفاصيل الفترة الزمنية لتلك البيانات، وإمكانية التبديل بين بيانات المصدر وعنوان URL (حيثما كان ذلك متاحًا) وبين بيانات أجهزة الكمبيوتر المكتبي وبيانات الجوّال.
• لوحة إعدادات البيئة مع إرشادات حول الجهاز ووحدة المعالجة المركزية وضبط الحد الأقصى المسموح لعرض نطاق الشبكة، استنادًا إلى بيانات CrUX.

لمزيد من التفاصيل، يمكنك الاطّلاع على منشور المدوّنة مراقبة أداء Core Web Vitals على نظامك المحلي ولدى المستخدمين الحقيقيين في أدوات مطوري البرامج.

تسجيل الأداء

يمكنك تسجيل أداء وقت التشغيل أو التحميل باستخدام الأزرار في أعلى يمين الشاشة أو أسفل يسارها:

تسجيل أداء وقت التشغيل

سجِّل أداء وقت التشغيل عندما تريد تحليل أداء صفحة أثناء تشغيلها، بدلاً من تحميلها.

1. انتقِل إلى الصفحة التي تريد تحليلها.
2. انقر على علامة التبويب الأداء في "أدوات مطوّري البرامج".
3. انقر على تسجيل .
4. يُرجى التفاعل مع الصفحة. تسجّل "أدوات مطوري البرامج في Chrome" كل أنشطة الصفحة التي تحدث نتيجة تفاعلاتك.
5. انقر على تسجيل مرة أخرى أو انقر على إيقاف لإيقاف التسجيل.

تسجيل أداء التحميل

يمكنك تسجيل أداء التحميل عندما تريد تحليل أداء صفحة أثناء تحميلها، بدلاً من تشغيلها.

1. انتقِل إلى الصفحة التي تريد تحليلها.
2. افتح لوحة الأداء في "أدوات مطوّري البرامج".
3. انقر على التسجيل وإعادة التحميل . تنتقل "أدوات مطوري البرامج في Chrome" أولاً إلى about:blank لمحو أي لقطات شاشة وتتبُّعات متبقية. بعد ذلك، تسجّل "أدوات مطوري البرامج" مقاييس الأداء أثناء إعادة تحميل الصفحة، ثم توقف التسجيل تلقائيًا بعد بضع ثوانٍ من انتهاء التحميل.

تعمل "أدوات مطوري البرامج في Chrome" تلقائيًا على تكبير جزء التسجيل الذي حدث فيه معظم النشاط.

في هذا المثال، تعرض لوحة الأداء النشاط أثناء تحميل الصفحة.

التقاط لقطات شاشة أثناء التسجيل

فعِّل مربّع الاختيار لقطات الشاشة لالتقاط لقطة شاشة لكل لقطة أثناء التسجيل.

لتخصيص دقة التسجيل المرئي ضمن حدود الذاكرة، افتح إعدادات التسجيل واختَر حجم اللقطة والحد الأقصى لعدد اللقطات من القائمة المنسدلة التقاط لقطة شاشة.

عرض لقطة شاشة للتعرّف على كيفية التفاعل مع لقطات الشاشة

فرض جمع البيانات غير الضرورية أثناء التسجيل

أثناء تسجيل صفحة، انقر على جمع البيانات المُهمَلة mop لفرض جمع البيانات المُهمَلة.

عرض إعدادات التسجيل

انقر على إعدادات الالتقاط لعرض المزيد من الإعدادات المتعلقة بطريقة تسجيل أداء DevTools.

إيقاف عيّنات JavaScript

تلقائيًا، يعرض المسار الرئيسي للتسجيل حزم التنفيذ التفصيلية لوظائف JavaScript التي تم استدعاؤها أثناء التسجيل. لإيقاف حِزم التنفيذ هذه:

1. افتح قائمة إعدادات الالتقاط . يُرجى الاطّلاع على إعدادات تسجيل العروض.
2. ضَع علامة في مربّع الاختيار إيقاف عيّنات JavaScript.
3. سجِّل محتوى الصفحة.

تعرض لقطات الشاشة التالية الفرق بين إيقاف نماذج JavaScript وتفعيلها. يكون مسار Main للتسجيل أقصر بكثير عند إيقاف أخذ العينات، لأنّه يحذف جميع حِزم تنفيذ JavaScript.

يعرض هذا المثال تسجيلًا مع إيقاف عيّنات JavaScript.

يعرض هذا المثال تسجيلاً يتضمّن عيّنات JS مفعَّلة.

تقليل سرعة الشبكة أثناء التسجيل

لتقييد الشبكة أثناء التسجيل:

1. افتح قائمة إعدادات التسجيل . يُرجى الاطّلاع على إعدادات تسجيل العروض.
2. اضبط الشبكة على مستوى التحكّم الذي اخترته.

في القائمة المنسدلة، قد تقترح لوحة الأداء أيضًا إعدادًا مسبقًا تلقائيًا للتقييد أو إعدادًا مسبقًا يقرّب تجربة قاعدة المستخدمين استنادًا إلى البيانات الميدانية.

تقييد أداء وحدة المعالجة المركزية (CPU) أثناء التسجيل

لتقييد أداء وحدة المعالجة المركزية أثناء التسجيل، اتّبِع الخطوات التالية:

1. افتح قائمة إعدادات التسجيل . يُرجى الاطّلاع على إعدادات تسجيل العروض.
2. اضبط وحدة المعالجة المركزية (CPU) على مستوى التقييد الذي اخترته.

تعتمد عملية التقييد على إمكانات الكمبيوتر. على سبيل المثال، يؤدي خيار إبطاء بمقدار الضعف إلى جعل وحدة المعالجة المركزية تعمل بسرعة أبطأ بمرتين من قدرتها المعتادة. لا يمكن لأداة DevTools محاكاة وحدات المعالجة المركزية للأجهزة الجوّالة بشكل كامل، لأنّ بنية الأجهزة الجوّالة تختلف كثيرًا عن بنية أجهزة الكمبيوتر المكتبي والمحمولة.

في القائمة المنسدلة، قد تقترح لوحة الأداء أيضًا إعدادًا مسبقًا تلقائيًا للتقييد أو إعدادًا مسبقًا يقرّب تجربة قاعدة المستخدمين استنادًا إلى البيانات الميدانية.

تفعيل إحصاءات أداة اختيار لغة CSS

للاطّلاع على إحصاءات أدوات اختيار قواعد CSS أثناء أحداث إعادة احتساب الأنماط التي تستغرق وقتًا طويلاً:

1. افتح قائمة إعدادات الالتقاط . يُرجى الاطّلاع على إعدادات تسجيل العروض.
2. ضَع علامة في مربّع الاختيار تفعيل إحصاءات أداة اختيار لغة CSS.

لمزيد من التفاصيل، اطّلِع على كيفية تحليل أداء أداة اختيار لغة CSS أثناء أحداث إعادة احتساب الأنماط.

تفعيل قياس سرعة العرض المتقدم

للاطّلاع على قياس سرعة العرض التفصيلي:

1. افتح قائمة إعدادات التسجيل . اطّلِع على عرض إعدادات التسجيل.
2. ضَع علامة في مربّع الاختيار تفعيل قياس سرعة العرض المتقدّم.

لمعرفة كيفية التفاعل مع معلومات العرض، راجِع عرض الطبقات وعرض محلّل عملية عرض محتوى الصفحة.

عرض قنوات الإصدار المخصّصة

يتيح هذا الخيار استخدام الملخّصات المخصّصة للمسارات ومجموعات المسارات المخصّصة في ملخّص التتبُّع، ويمكن تخصيصها باستخدام DevTools Extensibility API.

محو التسجيل السابق

بعد إجراء تسجيل، انقر على محو التسجيل لمحو هذا التسجيل من لوحة الأداء.

تحليل تسجيل للأداء

بعد تسجيل أداء وقت التشغيل أو تسجيل أداء التحميل، تقدّم لك لوحة الأداء الكثير من البيانات لتحليل أداء ما حدث للتو.

إضافة تعليقات توضيحية إلى تسجيل ومشاركته

إضافة تعليقات توضيحية على نتائج الأداء ومشاركتها

الحصول على إحصاءات قابلة للاستخدام

تتضمّن لوحة الأداء إحصاءات الأداء التي تظهر أيضًا في تقارير Lighthouse. يمكن أن تقترح هذه الإحصاءات طرقًا لتحسين الأداء وتقديم تحليل موجّه حول مشاكل الأداء التالية، مثل الأجزاء الفرعية من LCP وINP، ومشاكل اكتشاف طلبات LCP، والجهات الخارجية، بالإضافة إلى موارد JavaScript القديمة والمكرّرة. للاطّلاع على القائمة الكاملة، راجِع مستندات "إحصاءات الأداء".

تكون الإحصاءات جيدة عندما لا يتم رصد أي مشاكل. تسرد علامة التبويب الإحصاءات هذه الإحصاءات ضمن القسم المصغّر الإحصاءات التي تم اجتيازها في أسفل الصفحة. يتم إدراج الإحصاءات التي لم تجتَز الاختبار في أقسام مخصّصة لها.

للاستفادة من الإحصاءات، اتّبِع الخطوات التالية:

1. تسجيل الأداء
2. في الشريط الجانبي الأيمن من لوحة الأداء، افتح علامة التبويب الإحصاءات، ووسِّع الأقسام المختلفة، ومرِّر مؤشر الماوس فوق العناصر وانقر عليها. ستُبرز لوحة الأداء الأحداث المقابلة في التتبُّع.

التنقّل في التسجيل

لمساعدتك في التنقّل، عند تمرير مؤشر الماوس فوق تتبُّع الأداء، تنفّذ لوحة الأداء ما يلي:

• يعرض لك علامة عمودية تمتد على تتبُّع الأداء بالكامل عند تمرير مؤشر الماوس فوق نظرة عامة على المخطط الزمني.
• تمييز نطاق في نظرة عامة على المخطط الزمني عند تمرير مؤشر الماوس فوق عناصر في المسار الرئيسي

لفحص تسجيل الأداء عن كثب، يمكنك اختيار جزء من التسجيل، وتصفّح رسم بياني مفصّل لأداء الرموز طويل، والتكبير والتصغير، واستخدام مسارات التنقل للانتقال بين مستويات التكبير.

استخدام اختصارات لوحة المفاتيح للتنقّل

لاستخدام اختصارات لوحة المفاتيح للتنقّل بسرعة في التسجيل، عليك أولاً اختيار أسلوب التنقّل المفضّل لديك باستخدام لوحة المفاتيح.

في أعلى يسار اللوحة، انقر على مساعدة عرض الاختصارات واختَر أحد الخيارات التالية:

• كلاسيكي: يمكنك التكبير أو التصغير باستخدام عجلة الماوس (لوحة اللمس للأعلى أو للأسفل) والتمرير عموديًا باستخدام Shift + عجلة الماوس.
• حديث: التمرير عموديًا باستخدام عجلة الماوس، والتمرير أفقيًا باستخدام Shift + عجلة الماوس، والتكبير والتصغير باستخدام Command/Control + عجلة الماوس

يوفّر لك مربّع حوار الاختصارات أيضًا ورقة مرجعية للاختصارات المتاحة.

اختَر جزءًا من التسجيل

أسفل شريط الإجراءات في لوحة الأداء وفي أعلى التسجيل، يمكنك الاطّلاع على قسم نظرة عامة على المخطط الزمني مع الرسمَين البيانيَين وحدة المعالجة المركزية والشبكة.

لاختيار جزء من تسجيل، انقر مع الاستمرار، ثم اسحب لليسار أو اليمين على نظرة عامة على المخطط الزمني.

لاختيار جزء من الشاشة باستخدام لوحة المفاتيح:

1. ركِّز على المسار الرئيسي أو أي من المسارات المجاورة له.
2. استخدِم المفاتيح W وA وS وD للتكبير والتحرّك لليسار والتصغير والتحرّك لليمين على التوالي.

لتحديد جزء باستخدام لوحة التتبُّع:

1. مرِّر مؤشر الماوس فوق قسم نظرة عامة على المخطط الزمني أو أي من المقاطع الصوتية (الرئيسي والمقاطع المجاورة له).
2. باستخدام إصبعين، مرِّر سريعًا للأعلى للتصغير، ولليسار للانتقال إلى اليسار، وللأسفل للتكبير، ولليمين للانتقال إلى اليمين.

إنشاء أشرطة تنقّل والانتقال بين مستويات التكبير

تتيح لك النظرة العامة على المخطط الزمني إنشاء عدة مسارات تنقّل متداخلة بالتتابع، ما يزيد من مستويات التكبير، ثم التنقّل بحرية بين مستويات التكبير.

لإنشاء أشرطة تنقّل واستخدامها:

1. في نظرة عامة على المخطط الزمني، اختَر جزءًا من التسجيل.
2. مرِّر مؤشر الماوس فوق الجزء المحدّد وانقر على الزر N ms zoom_in. يتوسّع التحديد لملء نظرة عامة على المخطط الزمني. تبدأ سلسلة من أشرطة التنقّل في أعلى نظرة عامة على المخطط الزمني.
3. كرِّر الخطوتَين السابقتَين لإنشاء شريط تنقّل متداخل آخر. يمكنك مواصلة تداخل أشرطة التنقل طالما أن نطاق الاختيار أكبر من 5 مللي ثانية.
4. للانتقال إلى مستوى تكبير معيّن، انقر على شريط التنقّل المقابل في السلسلة في أعلى نظرة عامة على المخطط الزمني.

لإزالة العناصر الثانوية لشريط التنقّل، انقر بزر الماوس الأيمن على شريط التنقّل الرئيسي واختَر إزالة أشرطة التنقّل الثانوية.

كيفية الانتقال في رسم بياني مفصّل لأداء الرموز

للتمرير في رسم بياني مفصّل لأداء الرموز طويل في مسار Main أو أي من المسارات المجاورة له، انقر مع الاستمرار، ثم اسحب في أي اتجاه حتى يظهر ما تبحث عنه.

تجاهل النصوص البرمجية غير ذات الصلة في الرسم البياني المفصّل لأداء الرموز

للتركيز بشكل أفضل على الرمز البرمجي، يمكنك إضافة النصوص البرمجية غير ذات الصلة إلى قائمة التجاهل.

لتجاهل النصوص البرمجية، اتّبِع أحد الإجراءَين التاليَين:

• انقر على ضغط عرض مربّع حوار إعدادات قائمة التجاهل في شريط الإجراءات العلوي واكتب تعبيرًا عاديًا في حقل الإدخال. سيطبّق الرسم البياني المفصّل لأداء الرموز القاعدة الجديدة أثناء الكتابة.
• انقر بزر الماوس الأيمن على نص برمجي واختَر إضافة النص البرمجي إلى قائمة التجاهل. تضيف لوحة الأداء هذا النص البرمجي إلى القائمة في ضغط عرض مربّع حوار إعدادات قائمة التجاهل.

سيتم تلقائيًا تصغير اللوحة التي تتضمّن عددًا كبيرًا من مستويات التداخل في هذه النصوص البرمجية ووضع العلامة On ignore list (REGULAR_EXPRESSION) عليها.

في الضغط عرض مربّع حوار إعدادات قائمة التجاهل، يمكنك تفعيل قواعد قائمة التجاهل وإيقافها.

لإزالة نص برمجي من قائمة التجاهل، انقر بزر الماوس الأيمن عليه في رسم بياني مفصّل لأداء الرموز واختَر إزالة النص البرمجي من قائمة التجاهل أو مرِّر مؤشر الماوس فوقه في compress عرض إعدادات قائمة التجاهل وانقر على delete إزالة.

تحفظ "أدوات مطوري البرامج في Chrome" قواعد قائمة التجاهل التي تضيفها في الإعدادات الإعدادات > قائمة التجاهل.

بالإضافة إلى ذلك، للتركيز على نصوص الطرف الأول البرمجية فقط، ضَع علامة في المربّع check_box تعتيم الأطراف الثالثة. ستظهر نصوص الجهات الخارجية باللون الرمادي في لوحة الأداء.

أنشطة البحث

يمكنك البحث في الأنشطة في مسار Main والطلبات في مسار Network.

لفتح مربّع بحث في أسفل لوحة الأداء، اضغط على:

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

يعرض هذا المثال تعبيرًا عاديًا في مربّع البحث في أسفل الصفحة يعثر على أي نشاط يبدأ بـ E.

للتنقّل بين الأنشطة التي تطابق طلب البحث:

• انقر على الزرّ expand_less السابق أو expand_more التالي.
• اضغط على Shift+Enter لاختيار النتيجة السابقة أو Enter لاختيار النتيجة التالية.

تعرض لوحة الأداء تلميحًا للأداة فوق النشاط المحدّد في مربّع البحث.

لتعديل إعدادات طلب البحث:

• انقر على match_case مطابقة حالة الأحرف لجعل طلب البحث حسّاسًا لحالة الأحرف.
• انقر على regular_expression التعبير العادي لاستخدام تعبير عادي في طلب البحث.

لإخفاء مربّع البحث، انقر على إلغاء.

تغيير ترتيب المسارات وإخفاؤها

لإزالة الفوضى من تتبُّع الأداء، يمكنك تغيير ترتيب المسارات وإخفاء المسارات غير ذات الصلة في وضع ضبط المسارات.

لنقل الأغاني وإخفائها:

1. للدخول إلى وضع الإعداد، انقر بزر الماوس الأيمن على اسم مقطع صوتي واختَر ضبط المقاطع الصوتية.
2. انقر على arrow_upward للأعلى أو arrow_downward للأسفل لنقل مقطع صوتي للأعلى أو للأسفل. انقر على visibility_off لإخفائه.
3. عند الانتهاء، انقر على إنهاء إعداد قنوات الإصدار في أسفل الصفحة للخروج من وضع الإعداد.

شاهِد الفيديو للاطّلاع على طريقة سير العمل هذه.

تحفظ لوحة الأداء إعدادات المسارات لعمليات التتبُّع الجديدة، ولكن ليس في جلسات "أدوات مطوّري البرامج" التالية.

عرض نشاط سلسلة المحادثات الرئيسية

استخدِم مسار الرئيسي لعرض النشاط الذي حدث في سلسلة التعليمات الرئيسية للصفحة.

انقر على حدث للاطّلاع على مزيد من المعلومات عنه في علامة التبويب الملخّص، بما في ذلك على سبيل المثال لا الحصر: المدة (ومدة التنفيذ الذاتي) والرابط المؤدي إلى السطر المقابل في النص البرمجي المصدر وعنوان URL الأصلي (مع اسم العنصر، إذا كان معروفًا) وتتبُّع تسلسل استدعاء الدوال البرمجية، إن وُجد، وتفاصيل التوقيت في رسم بياني دائري.

تحدّد لوحة الأداء الحدث المحدّد باللون الأزرق.

يعرض هذا المثال مزيدًا من المعلومات حول حدث استدعاء الدالة get في علامة التبويب ملخّص.

التمييز بين الأحداث التابعة للطرف الأول والطرف الثالث

يمكن أن يؤثر الاعتماد المفرط على الرموز البرمجية التابعة لجهات خارجية سلبًا في أداء التحميل. يمكن أن تساعدك لوحة الأداء في التمييز بصريًا بين أحداث الطرف الأول والطرف الثالث في التتبُّع، ما يتيح لك اتّخاذ قرار مدروس بشأن تقليل تحميل الرموز البرمجية التابعة لجهات خارجية أو تأجيله، ومنح الأولوية لمحتوى صفحتك.

للتركيز فقط على أداء الرمز البرمجي الخاص بالطرف الأول، اتّبِع الخطوات التالية:

1. تأكَّد من عدم اختيار أي شيء في تتبُّع الأداء أو في علامة التبويب الإحصاءات. لإجراء ذلك، انقر على مساحة فارغة في التتبُّع.
2. ضَع علامة في المربّع check_box تعتيم الجهات الخارجية في شريط الإجراءات في أعلى الصفحة. تُظهر لوحة الأداء الأحداث المرتبطة بالجهات الخارجية باللون الرمادي في تتبُّع الأداء وتُبرز الأحداث المرتبطة بالطرف الأول فقط.

تمييز الأحداث باستخدام جدول "الطرف الأول أو الجهة الخارجية"

ضمن نطاق محدّد في نظرة عامة على المخطط الزمني وعند عدم اختيار أي من الأحداث، تعرض علامة التبويب ملخّص جدولاً للطرف الأول / الطرف الثالث يسرد أحجام النقل المعنيّة وأوقات سلسلة التعليمات الرئيسية لما يلي:

• جهة تابعة للطرف الأول تحمل شارة 1st party
• جميع الكيانات التابعة لجهات خارجية التي تم رصدها في النطاق المحدّد، بدون علامة
• الإضافات التي تحمل شارات Extension
• كيانات أخرى ([unattributed])

للاطّلاع على الأحداث ذات الصلة التي تم تمييزها في التتبُّع وتعتيم بقية الأحداث، مرِّر مؤشر الماوس فوق الكيانات في الجدول. لإبقاء أحداث كيان معيّن مميّزة، اختَر الكيان في الجدول. لإزالة التمييز، انقر على أي مساحة فارغة في التتبُّع.

لفتح الأنشطة المجمّعة حسب هذا الكيان في علامة التبويب تصاعدي، مرِّر مؤشر الماوس فوق الكيان في الجدول وانقر على account_tree تصاعدي بجانبه.

قراءة الرسم البياني المفصّل لأداء الرموز

تمثّل لوحة الأداء نشاط سلسلة التعليمات الرئيسية في رسم بياني مفصّل لأداء الرموز. يمثّل المحور السيني التسجيل بمرور الوقت. يمثّل المحور الصادي حزمة التنفيذ. تتسبّب الأحداث في الأعلى في حدوث الأحداث أدناه.

يعرض هذا المثال رسمًا بيانيًا مفصّلاً لأداء الرموز على شكل لهب في المسار الرئيسي. تسبّب حدث click في استدعاء دالة مجهولة. استدعت هذه الدالة بدورها onEndpointClick_، والتي استدعت handleClick_، وهكذا.

تخصّص لوحة الأداء ألوانًا عشوائية للنصوص البرمجية لتقسيم الرسم البياني المفصّل لأداء الرموز وجعله أكثر قابلية للقراءة. في المثال السابق، تم تلوين استدعاءات الدوال من نص برمجي واحد باللون الأزرق الفاتح. وتظهر المكالمات من نص برمجي آخر باللون الوردي الفاتح. يمثّل اللون الأصفر الداكن نشاط البرمجة، ويمثّل الحدث الأرجواني نشاط العرض. هذه الأحداث ذات اللون الأصفر الداكن والأرجواني متسقة في جميع التسجيلات.

يتم أيضًا تمييز المهام التي يستغرق تنفيذها وقتًا طويلاً بمثلث أحمر، مع تظليل الجزء الذي يزيد عن 50 ملي ثانية باللون الأحمر:

في هذا المثال، استغرقت المهمة أكثر من 400 ملي ثانية، لذا تم تظليل الجزء الذي يمثّل آخر 350 ملي ثانية باللون الأحمر، في حين لم يتم تظليل أول 50 ملي ثانية.

بالإضافة إلى ذلك، يعرض المسار الرئيسي معلومات عن ملفات تعريف وحدة المعالجة المركزية التي تم بدء تشغيلها وإيقافها باستخدام دالتي وحدة التحكّم profile() وprofileEnd(). يؤدي استدعاء console.profileEnd() في الرمز البرمجي أو في وحدة التحكّم إلى فتح لوحة الأداء تلقائيًا وعرض التتبُّع المسجَّل.

لإخفاء رسم بياني مفصّل لأداء الرموز لطلبات JavaScript، اطّلِع على إيقاف عيّنات JavaScript. عند إيقاف عيّنات JavaScript، ستظهر لك الأحداث العالية المستوى فقط، مثل Event (click) وFunction Call.

تتبُّع الجهات التي بدأت الحدث

يمكن أن يعرض المسار الرئيسي أسهمًا تربط بين الجهات البادئة التالية والأحداث التي تسبّبت فيها:

• إبطال النمط أو التنسيق -> إعادة احتساب الأنماط أو التنسيق
• طلب إطار صورة متحركة -> تمّ تنشيط إطار الصورة المتحركة
• طلب معاودة الاتصال غير المستخدَمة حاليًا -> تنشيط معاودة الاتصال غير المستخدَمة
• تثبيت موقِّت -> تم تنشيط الموقِّت
• إنشاء WebSocket -> إرسال... وتلقّي تأكيد الاتصال بخادم WebSocket أو محو WebSocket
• جدولة postTask -> تنشيط postTask أو إلغاء postTask

للاطّلاع على الأسهم، ابحث عن المُشغِّل أو الحدث الذي تسبّب فيه في رسم بياني مفصّل لأداء الرموز واختَره.

عند تحديدها، تعرض علامة التبويب "الملخّص" روابط المشغّل للمشغّلات وروابط بدأه للأحداث التي تسبّبت فيها. انقر عليها للتنقّل بين الأحداث ذات الصلة.

إخفاء الدوال وعناصرها الثانوية في مخطّط Flame

لإزالة التشويش من الرسم البياني المفصّل لأداء الرموز في سلسلة التعليمات الرئيسية، يمكنك إخفاء الدوال المحدّدة أو العناصر التابعة لها:

1. في المقطع الصوتي الرئيسي، انقر بزر الماوس الأيمن على دالة واختَر أحد الخيارات التالية أو اضغط على الاختصار المقابل:

   • إخفاء الدالة (H)
   • إخفاء العناصر الثانوية (C)
   • إخفاء العناصر الثانوية المتكررة (R)
   • إعادة ضبط العناصر الثانوية (U)
   • إعادة ضبط عملية التتبّع (T)
   • إضافة نص برمجي إلى قائمة التجاهل (I)

   

   يظهر زر القائمة المنسدلة arrow_drop_down بجانب اسم الدالة التي تتضمّن عناصر فرعية مخفية.

2. للاطّلاع على عدد العناصر الفرعية المخفية، مرِّر مؤشر الماوس فوق زر القائمة المنسدلة arrow_drop_down.

   

3. لإعادة ضبط دالة تتضمّن عناصر فرعية مخفية أو إعادة ضبط الرسم البياني المفصّل لأداء الرموز بالكامل، اختَر الدالة واضغط على U أو انقر بزر الماوس الأيمن على أي دالة واختَر إعادة ضبط التتبُّع على التوالي.

تجاهُل النصوص البرمجية في رسم بياني مفصّل لأداء الرموز

لإضافة نص برمجي إلى قائمة التجاهل، انقر بزر الماوس الأيمن على نص برمجي في الرسم البياني واختَر إضافة نص برمجي إلى قائمة التجاهل.

يصغّر الرسم البياني النصوص البرمجية التي تم تجاهلها، ويضع علامة في قائمة التجاهل عليها، ويضيفها إلى قواعد الاستبعاد المخصّص في الإعدادات الإعدادات > قائمة التجاهل. يتم حفظ النصوص البرمجية التي تم تجاهلها إلى أن تزيلها من التتبُّع أو من قواعد الاستبعاد المخصّصة.

عرض الأنشطة في جدول

بعد تسجيل صفحة، لن تحتاج إلى الاعتماد فقط على المقطع الصوتي الرئيسي لتحليل الأنشطة. توفّر "أدوات مطوري البرامج" أيضًا ثلاثة طرق عرض جدولية لتحليل الأنشطة. تمنحك كل طريقة عرض منظورًا مختلفًا للأنشطة:

• عندما تريد عرض الأنشطة الأساسية التي تتسبّب في معظم العمليات، استخدِم علامة التبويب شجرة المكالمات.
• عندما تريد عرض الأنشطة التي تم قضاء معظم الوقت فيها مباشرةً، استخدِم علامة التبويب من الأسفل للأعلى.
• عندما تريد عرض الأنشطة بالترتيب الذي حدثت به أثناء التسجيل، استخدِم علامة التبويب سجلّ الأحداث.

يمكنك النقر على عنصر في أيّ من الجداول الثلاثة (وفي جدول الطرف الأول / الطرف الثالث في علامة التبويب الملخّص) لإبقاء الأحداث ذات الصلة مميّزة في التتبُّع وتعتيم الباقي أثناء تصفّح تتبُّع الأداء.

لمساعدتك في العثور على ما تبحث عنه بشكل أسرع، تتضمّن علامات التبويب الثلاث أزرارًا للفلترة المتقدّمة بجانب شريط الفلترة:

• match_case مطابقة الحالة:
• ‫regular_expression تعبير عادي
• match_word مطابقة الكلمة بالكامل:

يعرض كل عرض جدولي في لوحة الأداء روابط لأنشطة، مثل استدعاءات الدوال. لمساعدتك في تصحيح الأخطاء، تعثر "أدوات مطوري البرامج" على تعريفات الدوال المقابلة في ملفات المصدر. بالإضافة إلى ذلك، إذا كانت خرائط المصدر المناسبة متوفّرة ومفعّلة، تعثر "أدوات مطوّري البرامج" تلقائيًا على الملفات الأصلية.

انقر على رابط لفتح ملف مصدر في لوحة المصادر.

الأنشطة الجذرية

في ما يلي شرح لمفهوم الأنشطة الجذرية المذكور في علامة التبويب شجرة المكالمات وعلامة التبويب من الأسفل إلى الأعلى وأقسام سجلّ الأحداث.

الأنشطة الجذرية هي الأنشطة التي تجعل المتصفّح ينفّذ بعض المهام. على سبيل المثال، عند النقر على صفحة، يطلق المتصفّح نشاط 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 للعنصر المحدّد في هذا المثال إلى أنّ النشاط بدأ بعد 1573 ملي ثانية من بدء التسجيل.

يمثّل عمود وقت النشاط الذاتي الوقت المستغرَق مباشرةً في هذا النشاط.

تمثّل أعمدة إجمالي الوقت الوقت الذي تم قضاؤه مباشرةً في هذا النشاط أو في أي من أنشطته الفرعية.

انقر على وقت البدء أو الوقت الذاتي أو الوقت الإجمالي لترتيب الجدول حسب هذا العمود.

استخدِم مربّع الفلتر لفلترة الأنشطة حسب الاسم.

استخدِم قائمة المدة لفلترة أي أنشطة استغرقت أقل من ملي ثانية واحدة أو 15 ملي ثانية. يتم ضبط قائمة المدة تلقائيًا على الكل، ما يعني عرض جميع الأنشطة.

أوقِف مربّعات الاختيار التحميل أو كتابة نص برمجي أو العرض أو الرسم لفلترة جميع الأنشطة من هذه الفئات.

عرض علامات الأداء

في تراكب يتضمّن خطوطًا عمودية على مستوى تتبُّع الأداء، يمكنك الاطّلاع على مؤشرات الأداء المهمة، مثل:

• سرعة عرض أول محتوى مرئي (FCP)
• سرعة عرض أكبر محتوى مرئي (LCP)
• الحدث DOMContentLoaded (DCL)
• حدث Onload (L)

مرِّر مؤشر الماوس فوق أسماء العلامات في أسفل التتبُّع للاطّلاع على الطابع الزمني.

عرض التوقيتات المخصّصة

في مسار التوقيتات، يمكنك الاطّلاع على علامات الأداء المخصّصة، مثل:

• performance.mark() المكالمات يظهر أدناه في 813.44 ملي ثانية علامة فردية مع تلميح أداة، تحمل التصنيف بدء تنفيذ JavaScript.
• performance.measure() مكالمة يظهر نطاق أصفر أدناه، ويحمل التصنيف تفاعل بطيء.

اختَر علامة للاطّلاع على مزيد من التفاصيل في علامة التبويب ملخّص، بما في ذلك الطابع الزمني وإجمالي الوقت والوقت الذاتي وكائن detail. بالنسبة إلى مكالمات performance.mark() وperformance.measure()، تعرض علامة التبويب أيضًا عمليات تتبُّع تسلسل استدعاء الدوال البرمجية.

عرض التفاعلات

اطّلِع على تفاعلات المستخدم على مسار التفاعلات لتحديد المشاكل المحتملة في الاستجابة.

للاطّلاع على التفاعلات، اتّبِع الخطوات التالية:

1. افتح "أدوات مطوّري البرامج"، مثلاً على صفحة العرض التوضيحي هذه.
2. افتح لوحة الأداء وابدأ التسجيل.
3. انقر على أحد العناصر (القهوة) وأوقِف التسجيل.
4. ابحث عن مسار التفاعلات في المخطط الزمني.

في هذا المثال، يعرض مسار التفاعلات تفاعل المؤشر. تحتوي التفاعلات على خطوط تشير إلى تأخيرات الإدخال والعرض عند حدود وقت المعالجة. مرِّر مؤشر الماوس فوق التفاعل للاطّلاع على تلميح يتضمّن مهلة الإدخال ووقت المعالجة ومهلة العرض.

يعرض مسار التفاعلات أيضًا تحذيرات مدى استجابة الصفحة لتفاعلات المستخدم (INP) للتفاعلات التي تزيد مدتها عن 200 ملي ثانية في علامة التبويب ملخّص وفي تلميح عند تمرير مؤشر الماوس:

يضع مسار التفاعلات علامة على التفاعلات التي تزيد مدتها عن 200 ملي ثانية باستخدام مثلّث أحمر في أعلى يسار الصفحة.

عرض متغيّرات التصميم

يمكنك الاطّلاع على تغييرات التصميم في مسار تغييرات التصميم. تظهر التحولات على شكل أشكال ماسية أرجوانية ويتم تجميعها في مجموعات (خطوط أرجوانية) استنادًا إلى مدى تقاربها على المخطط الزمني.

لتمييز عنصر تسبّب في حدوث تغيّر في التصميم في إطار العرض، مرِّر مؤشر الماوس فوق المعيّن المقابل.

للاطّلاع على مزيد من المعلومات حول تغيّر أو تغيّرات في التنسيق في علامة التبويب الملخّص مع التوقيتات والنتائج والعناصر والمسبّبات المحتملة، انقر على الشكل الماسي أو المجموعة المقابلة.

لمزيد من المعلومات، يُرجى الاطّلاع على متغيّرات التصميم التراكمية (CLS).

عرض الصور المتحركة

يمكنك عرض الصور المتحركة في مسار الصور المتحركة. تتم تسمية الصور المتحركة كخصائص أو عناصر CSS المقابلة إن وُجدت، على سبيل المثال، transform أو my-element. يتم وضع علامة على الصور المتحركة غير المركّبة بمثلثات حمراء في أعلى يسار الصفحة.

اختَر صورة متحركة للاطّلاع على مزيد من التفاصيل في علامة التبويب الملخّص، بما في ذلك أسباب تعذُّر التركيب.

عرض نشاط وحدة معالجة الرسومات

اطّلِع على نشاط وحدة معالجة الرسومات في قسم وحدة معالجة الرسومات.

عرض نشاط التنقيط

اطّلِع على نشاط التنقيط في قسم مجموعة سلاسل المحادثات.

تحليل عدد اللقطات في الثانية (FPS)

توفّر "أدوات مطوري البرامج في Chrome" طرقًا متعدّدة لتحليل عدد اللقطات في الثانية:

• استخدِم قسم الإطارات للاطّلاع على المدة التي استغرقها إطار معيّن.
• استخدِم مقياس اللقطات في الثانية للحصول على تقدير في الوقت الفعلي لعدد اللقطات في الثانية أثناء تشغيل الصفحة. اطّلِع على عدد اللقطات في الثانية في الوقت الفعلي باستخدام مقياس عدد اللقطات في الثانية.

قسم "الإطارات"

يخبرك قسم الإطارات بالضبط بالمدة التي استغرقها إطار معين.

مرِّر مؤشر الماوس فوق إطار لعرض تلميح يتضمّن مزيدًا من المعلومات عنه.

يعرض هذا المثال تلميحًا عند تمرير مؤشر الماوس فوق إطار.

يمكن أن يعرض قسم الإطارات أربعة أنواع من الإطارات:

1. إطار غير مستخدَم حاليًا (أبيض): لا تغييرات.
2. الإطار (أخضر): تم عرضها على النحو المتوقّع وفي الوقت المناسب.
3. الإطار المعروض جزئيًا (باللون الأصفر مع نمط خطوط متقطّعة عريضة ومتباعدة): بذل Chrome قصارى جهده لعرض بعض التحديثات المرئية على الأقل في الوقت المناسب. على سبيل المثال، في حال تأخّر عمل سلسلة التعليمات الرئيسية لعملية العرض (الرسوم المتحركة على لوحة الرسم) ولكن سلسلة تعليمات التجميع (التمرير) في الوقت المناسب.
4. الإطار الذي تم إسقاطه (باللون الأحمر مع نمط خط متصل كثيف): يتعذّر على Chrome عرض الإطار في وقت معقول.

يعرض هذا المثال تلميحًا عند تمرير مؤشر الماوس فوق إطار معروض جزئيًا.

انقر على إطار لعرض المزيد من المعلومات عنه في علامة التبويب ملخّص. تحدّد "أدوات مطوّري البرامج" الإطار المحدّد باللون الأزرق.

عرض طلبات الشبكة

وسِّع قسم الشبكة لعرض سلسلة من طلبات الشبكة التي حدثت أثناء تسجيل الأداء.

بجانب اسم مسار الشبكة، يظهر مفتاح يتضمّن أنواع الطلبات المرمّزة بالألوان.

يتم وضع علامة على الطلبات التي تحظر العرض باستخدام مثلث أحمر في أعلى يسار الصفحة.

مرِّر مؤشر الماوس فوق طلب للاطّلاع على تلميح يتضمّن ما يلي:

• عنوان URL للطلب وإجمالي الوقت الذي استغرقه تنفيذه
• الأولوية أو تغيير الأولوية، على سبيل المثال، Medium -> High
• تُستخدَم لتحديد ما إذا كان الطلب Render-blocking أم لا.
• تفاصيل حول توقيت الطلبات، كما هو موضّح لاحقًا

عند النقر على طلب، يرسم مسار الشبكة سهمًا من المُنشئ إلى الطلب.

بالإضافة إلى ذلك، تعرض لك لوحة الأداء علامة التبويب الملخّص التي تتضمّن المزيد من المعلومات حول الطلب، بما في ذلك على سبيل المثال لا الحصر الحقلان الأولوية الأولية والأولوية (النهائية). إذا اختلفت قيمهما، يعني ذلك أنّ أولوية جلب الطلب قد تغيّرت أثناء التسجيل. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة تحسين تحميل الموارد باستخدام واجهة برمجة التطبيقات Fetch Priority API.

تعرض علامة التبويب الملخّص أيضًا تفصيلاً لأوقات الطلب.

في هذا المثال، يتم تمثيل طلب www.google.com بخط على اليمين (|–)، وشريط في المنتصف يتضمّن جزءًا داكنًا وجزءًا فاتحًا، وخط على اليسار (–|).

في حال توفّر علامة التبويب الملخّص، ستعرض أيضًا تفاصيل توقيتات الخادم لطلبات الشبكة التي تستخدم تقنيات العرض على جهة الخادم. بالنسبة إلى هذه الطلبات، تحصل لوحة الأداء على البيانات من عنوان الاستجابة Server-Timing.

يمكنك العثور على تفاصيل أخرى حول التوقيت في علامة التبويب الشبكة. انقر بزر الماوس الأيمن على الطلب في مسار الشبكة أو عنوان URL الخاص به في علامة التبويب ملخّص، ثم انقر على عرض في لوحة الشبكة. ستنقلك "أدوات مطوّري البرامج" إلى لوحة الشبكة وتختار الطلب المقابل. افتح علامة التبويب التوقيت.

في ما يلي كيفية ربط هذين التقسيمَين ببعضهما:

• يمثّل الخط الأيسر (|–) كلّ البيانات حتى مجموعة الأحداث Connection start، بما في ذلك هذه المجموعة. بعبارة أخرى، إنّها كل ما يسبق Request Sent.
• الجزء المضيء من الشريط هو Request sent وWaiting for server response.
• الجزء الداكن من الشريط هو Content download.
• ويمثّل الخط الأيمن (–|) الوقت المستغرَق في انتظار سلسلة التعليمات الرئيسية. ولا تظهر في علامة التبويب الشبكة > التوقيت.

عرض مقاييس الذاكرة

فعِّل مربّع الاختيار الذاكرة لعرض مقاييس الذاكرة من آخر تسجيل.

تعرض "أدوات مطوّري Chrome" رسمًا بيانيًا جديدًا للذاكرة، أعلى علامة التبويب الملخّص. يتوفّر أيضًا مخطط جديد أسفل مخطط NET، يُسمى HEAP. يوفّر الرسم البياني HEAP المعلومات نفسها التي يوفّرها خط JS Heap في الرسم البياني الذاكرة.

يعرض هذا المثال مقاييس الذاكرة فوق علامة التبويب الملخّص.

تتوافق الخطوط الملوّنة في الرسم البياني مع مربّعات الاختيار الملوّنة أعلى الرسم البياني. أزِل العلامة من مربّع الاختيار لإخفاء هذه الفئة من الرسم البياني.

لا يعرض الرسم البياني سوى جزء التسجيل الذي تم اختياره. في المثال السابق، لا يعرض الرسم البياني الذاكرة سوى استخدام الذاكرة في بداية التسجيل، أي حتى حوالي 1000 ملي ثانية.

عرض مدة جزء من تسجيل

عند تحليل قسم مثل الشبكة أو الرئيسي، تحتاج أحيانًا إلى تقدير أكثر دقة للمدة التي استغرقتها أحداث معيّنة. اضغط مع الاستمرار على Shift، ثم انقر مع الاستمرار واسحب لليمين أو اليسار لاختيار جزء من التسجيل. في أسفل الجزء الذي اخترته، تعرض "أدوات مطوّري البرامج" المدة التي استغرقها هذا الجزء.

في هذا المثال، يشير الطابع الزمني 488.53ms في أسفل الجزء المحدّد إلى المدة التي استغرقها هذا الجزء.

عرض لقطة شاشة

يُرجى الاطّلاع على أخذ لقطات شاشة أثناء التسجيل لمعرفة كيفية تفعيل لقطات الشاشة.

مرِّر مؤشر الماوس فوق نظرة عامة على المخطط الزمني للاطّلاع على لقطة شاشة توضّح الشكل الذي كانت تظهر به الصفحة خلال تلك اللحظة من التسجيل. نظرة عامة على المخطط الزمني هي القسم الذي يحتوي على الرسومات البيانية لوحدة المعالجة المركزية وعدد اللقطات في الثانية والشبكة.

يمكنك أيضًا عرض لقطات الشاشة من خلال النقر على إطار في قسم الإطارات. تعرض "أدوات مطوّلي البرامج" نسخة صغيرة من لقطة الشاشة في علامة التبويب الملخّص.

يعرض هذا المثال لقطة شاشة للإطار 195.5ms في علامة التبويب ملخّص عند النقر عليه في قسم الإطارات.

انقر على الصورة المصغّرة في علامة التبويب الملخّص لتكبير لقطة الشاشة.

يعرض هذا المثال لقطة شاشة مكبَّرة بعد النقر على الصورة المصغّرة في علامة التبويب الملخّص.

عرض معلومات الطبقات

للاطّلاع على معلومات الطبقات المتقدّمة حول إطار معيّن، اتّبِع الخطوات التالية:

1. فعِّل ميزة "تفعيل قياس سرعة العرض المتقدّم".
2. اختَر إطارًا في قسم الإطارات. تعرض "أدوات مطوّلي البرامج" معلومات حول طبقاتها في علامة التبويب الجديدة الطبقات، بجانب علامة التبويب سجلّ الأحداث.

مرِّر مؤشر الماوس فوق إحدى الطبقات لتمييزها في المخطط.

يعرض هذا المثال الطبقة #39 مميّزة عند تمرير مؤشر الماوس فوقها.

لنقل الرسم التخطيطي:

• انقر على وضع التحريك للتنقّل على طول المحورين X وY.
• انقر على وضع التدوير للتدوير على طول المحور Z.
• انقر على إعادة ضبط التحويل لإعادة المخطّط البياني إلى موضعه الأصلي.

الاطّلاع على تحليل الطبقات أثناء العمل:

عرض محلِّل عملية عرض محتوى الصفحة

للاطّلاع على معلومات متقدّمة حول حدث رسم:

1. تفعيل قياس سرعة العرض المتقدم
2. اختَر حدث رسم في المسار الرئيسي.

تحليل أداء العرض باستخدام علامة التبويب "العرض"

استخدِم ميزات علامة التبويب العرض للمساعدة في تصور أداء عرض صفحتك.

افتح علامة التبويب العرض.

عرض عدد اللقطات في الثانية في الوقت الفعلي باستخدام مقياس عدد اللقطات في الثانية

إحصاءات عرض اللقطات هي نافذة تظهر في أعلى يسار إطار العرض. ويقدّم تقديرًا في الوقت الفعلي لعدد اللقطات في الثانية أثناء تشغيل الصفحة.

يُرجى الاطّلاع على إحصاءات عرض الإطارات.

الاطّلاع على أحداث عرض محتوى الصفحة في الوقت الفعلي باستخدام ميزة "وميض عرض محتوى الصفحة"

استخدِم وميض الطلاء للاطّلاع في الوقت الفعلي على جميع أحداث الطلاء على الصفحة.

يُرجى الاطّلاع على وميض الرسم.

عرض تراكب الطبقات باستخدام "حدود الطبقات"

استخدِم حدود الطبقات لعرض تراكب لحدود الطبقات والمربّعات فوق الصفحة.

حدود الطبقات

العثور على مشاكل في أداء الانتقال في الوقت الفعلي

استخدِم مشاكل أداء الانتقال للأعلى أو للأسفل لتحديد عناصر الصفحة التي تتضمّن متتبِّعات أحداث مرتبطة بالتمرير قد تضرّ بأداء الصفحة. تحدّد "أدوات مطوّري البرامج" العناصر التي قد تتسبّب في مشاكل باللون الأزرق المخضرّ.

يُرجى الاطّلاع على مشاكل في أداء التمرير.