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

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

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

تسجيل الأداء

يمكنك تسجيل وقت التشغيل أو أداء التحميل.

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

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

1. انتقِل إلى الصفحة التي تريد تحليلها.
2. انقر على علامة التبويب الأداء في "أدوات مطوري البرامج".

3. انقر على رمز تسجيل .

   

4. التفاعل مع الصفحة: تسجّل أدوات مطوّري البرامج جميع أنشطة الصفحة التي تحدث نتيجة لتفاعلاتك.

5. انقر على تسجيل مرة أخرى أو انقر على إيقاف لإيقاف التسجيل.

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

سجِّل أداء التحميل عندما تريد تحليل أداء الصفحة أثناء تحميلها، على عكس الركض.

1. انتقِل إلى الصفحة التي تريد تحليلها.
2. افتح لوحة الأداء في "أدوات مطوري البرامج".

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

   

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

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

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

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

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

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

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

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

انقر على Capture settings (إعدادات الالتقاط) لعرض المزيد من الإعدادات المرتبطة بكيفية تسجيل أدوات مطوّري البرامج لتسجيلات الأداء.

إيقاف نماذج JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لمعرفة كيفية التفاعل مع معلومات الطلاء، يمكنك الاطّلاع على عرض الطبقات وعرض محلّل رسم الألوان.

محاكاة تزامن الأجهزة

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

لمحاكاة تزامن الأجهزة:

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

تعرض "أدوات مطوري البرامج" رمز تحذير بجانب علامة التبويب الأداء لتذكيرك بتفعيل محاكاة تزامن الجهاز.

للعودة إلى القيمة التلقائية البالغة 10، انقر على زر عودة .

حفظ تسجيل

لحفظ تسجيل، انقر بزر الماوس الأيمن واختَر حفظ الملف الشخصي.

تحميل تسجيل

لتحميل تسجيل، انقر بزر الماوس الأيمن واختَر تحميل الملف الشخصي.

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

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

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

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

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

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

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

ضمن شريط الإجراءات في لوحة الأداء وفي أعلى التسجيل، يمكنك رؤية قسم نظرة عامة على المخطط الزمني الذي يتضمّن الرسمين البيانيين وحدة المعالجة المركزية (CPU) وNET.

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

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

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

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

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

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

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

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

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

تمرير رسم بياني لهب متوهج طويل

لتمرير مخطط شعلة طويل في المسار الرئيسي أو أي من جيرانه، انقر مع الاستمرار ثم اسحب في أي اتجاه حتى يظهر ما تبحث عنه.

أنشطة البحث

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

• نظام التشغيل macOS: Command+F
• نظاما التشغيل Windows وLinux: Control+F

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

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

• انقر على زر expand_less السابق أو expand_less التالي.
• اضغط على Shift+Enter لتحديد السابق أو Enter لتحديد التالي.

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

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

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

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

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

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

يمكنك النقر على حدث لعرض مزيد من المعلومات عنه في علامة التبويب الملخّص. توضِّح لوحة الأداء الحدث المحدَّد باللون الأزرق.

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

قراءة مخطط اللهب

تمثل لوحة الأداء نشاط سلسلة المحادثات الرئيسية في رسم بياني نقطي. يمثل المحور س التسجيل بمرور الوقت. يمثل المحور ص مكدس الاستدعاءات. أما الأحداث الظاهرة في أعلى الصفحة، فتؤدي إلى وقوع الأحداث الواردة أدناه.

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

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

يتم أيضًا تمييز المهام الطويلة من خلال مثلث أحمر، ويظلّ الجزء الذي يتجاوز طوله 50 مللي ثانية باللون الأحمر:

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

بالإضافة إلى ذلك، يعرض المسار الرئيسي معلومات عن الملفات التعريفية الخاصة بوحدة المعالجة المركزية (CPU) التي بدأت وتوقفت بوظائف وحدة التحكّم profile() وprofileEnd().

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

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

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

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

لمشاهدة الأسهم، ابحث عن أحد العناصر المبتدئة في الرسم البياني الواقي الحراري وانقر عليه.

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

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

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

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

• match_case مطابقة حالة الأحرف
• regular_expression التعبير العادي.
• match_word مطابقة الكلمة بالكامل

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

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

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

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

إنّ الأنشطة الجذر هي تلك التي تؤدي إلى تنفيذ المتصفّح لبعض الإجراءات. على سبيل المثال، عند النقر على إحدى الصفحات، ينشط المتصفّح نشاط Event باعتباره النشاط الجذر. قد يؤدي Event هذا إلى تنفيذ معالج.

في الرسم البياني الدائري الرئيسي، تظهر أنشطة الجذر في أعلى الرسم البياني. في علامتَي التبويب شجرة المكالمات وسجل الأحداث، تكون الأنشطة الجذر هي العناصر ذات المستوى الأعلى.

اطّلِع على علامة التبويب "شجرة المكالمات" للحصول على مثال على الأنشطة الجذر.

علامة التبويب "شجرة المكالمات"

استخدِم علامة التبويب شجرة المكالمات للاطّلاع على الأنشطة الجذر التي تؤدي إلى أكبر قدر من العمل.

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

في هذا المثال، تكون الأنشطة ذات المستوى الأعلى في عمود النشاط، مثل Event وPaint وComposite Layers، هي أنشطة الجذر. يمثل التداخل تكديس الاستدعاءات. في هذا المثال، تسبب Event في Function Call، ما تسبب في button.addEventListener، ما تسبب في b، وهكذا.

يمثل الوقت الذاتي الوقت المستغرق في هذا النشاط مباشرةً. إجمالي الوقت هو الوقت المستغرَق في هذا النشاط أو أي من عناصره الثانوية.

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

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

يتم ضبط القائمة التجميع تلقائيًا على بدون تجميع. استخدم قائمة التجميع لترتيب جدول النشاط بناءً على معايير مختلفة.

انقر على عرض حزمة Heaviest Stack لإظهار جدول آخر على يسار جدول الأنشطة. انقر على نشاط لتعبئة جدول Haviest Stack. يعرض جدول الحزمة ذات الوزن الثقيل العناصر الثانوية للنشاط المحدد التي استغرق تنفيذها وقتًا أطول.

علامة التبويب من أسفل إلى أعلى

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

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

من خلال الرسم البياني الموجز الرئيسي لهذا المثال، يمكنك ملاحظة أنّ تنفيذ الطلبات الثلاثة التي تم إجراؤها إلى wait() كل الوقت تقريبًا. وفقًا لذلك، فإن النشاط الأعلى في علامة التبويب من أسفل إلى أعلى هو wait. في الرسم البياني الدائري، يشير اللون الأصفر أسفل الاستدعاءات إلى wait إلى الآلاف من طلبات Minor GC. بناءً على ذلك، سيظهر لك في علامة التبويب من أسفل إلى أعلى، إنّ النشاط التالي الأغلى هو Minor GC.

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

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

علامة التبويب "سجل الأحداث"

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

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

ويمثّل عمود وقت البدء النقطة التي بدأ فيها النشاط مقارنةً ببداية التسجيل. يعني وقت بدء 1573.0 ms للعنصر المحدد في هذا المثال أن النشاط بدأ بعد 1573 ملي ثانية من بدء التسجيل.

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

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

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

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

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

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

عرض التوقيتات

في مسار التوقيتات، يمكنك عرض العلامات المهمة مثل:

• سرعة عرض أول جزء من المحتوى على الصفحة (FP)
• سرعة عرض أول محتوى مرئي (FCP)
• سرعة عرض أكبر محتوى مرئي (LCP)
• حدث DOMContentLoaded (DCL)
• الحدث Onload (L)
• مكالماتك المخصّصة performance.mark(). في ما يلي علامة فردية تتضمّن تلميحًا عند 813.44 ملي ثانية، وتحمل عنوان بدء تشغيل JavaScript.
• مكالماتك المخصّصة performance.measure(). في ما يلي نطاق أصفر يحمل عبارة تفاعل بطيء.

للاطّلاع على مزيد من التفاصيل في علامة التبويب الملخّص، اختَر علامة. للاطّلاع على الطابع الزمني للعلامة، مرِّر مؤشر الماوس فوقه على مسار التوقيتات.

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

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

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

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

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

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

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

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

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

عرض نشاط الصور النقطية

يمكنك عرض نشاط الصور النقطية في قسم النقاط النقطية.

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

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

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

قسم الإطارات

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

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

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

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

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

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

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

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

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

يتم ترميز الطلبات بالألوان على النحو التالي:

• HTML: أزرق
• CSS: أرجواني
• JS: أصفر
• الصور: أخضر

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

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

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

في المثال السابق، يتم تمثيل طلب www.google.com بخط على اليسار، وشريط في المنتصف يحتوي على جزء مظلم وجزء فاتح وخط على اليمين. تعرض لقطة الشاشة التالية التمثيل المقابل للطلب نفسه في علامة التبويب التوقيت ضمن لوحة الشبكة. في ما يلي كيفية ربط هذين التمثيلين ببعضهما البعض:

• ويشير السطر الأيمن إلى كل ما يصل إلى مجموعة الأحداث Connection Start، بشكل شامل. بعبارة أخرى، هذا كل شيء قبل Request Sent، بشكل حصري.
• الجزء الفاتح من الشريط هو Request Sent وWaiting (TTFB).
• يبلغ الجزء الداكن من الشريط Content Download.
• الخط الأيمن هو في الأساس الوقت الذي يقضيه في انتظار سلسلة التعليمات الرئيسية. وهذا لا يتم تمثيله في علامة تبويب التوقيت.

يعرض هذا المثال تمثيل شريط الأسطر لطلب www.google.com.

يعرض هذا المثال تمثيل علامة التبويب التوقيت لطلب www.google.com.

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

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

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

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

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

لا يعرض الرسم البياني إلا منطقة التسجيل التي تم اختيارها فقط. في المثال السابق، يعرض الرسم البياني الذاكرة استخدام الذاكرة فقط عند بداية التسجيل، حتى علامة 1000 ملي ثانية تقريبًا.

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

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

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

عرض لقطة شاشة

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

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

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

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

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

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

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

لعرض معلومات الطبقات المتقدمة حول إطار ما:

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

مرِّر مؤشر الماوس فوق طبقة لتمييزها في المخطّط البياني.

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

لنقل المخطّط:

• انقر على وضع العرض الشامل للتحرك على المحورين "س" و"ص".
• انقر على وضع التدوير للتدوير على المحور Z.
• انقر على إعادة تعيين التحويل لإعادة تعيين الرسم التخطيطي إلى موضعه الأصلي.

الاطّلاع على تحليل الطبقات عمليًا:

الاطّلاع على محلّل عرض الرسم

للاطّلاع على معلومات متقدّمة حول حدث عرض التغييرات، يمكنك اتّباع الخطوات التالية:

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

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

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

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

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

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

ويمكنك الاطّلاع على إحصاءات عرض اللقطات في الثانية.

شاهِد فعاليات الرسم في الوقت الفعلي باستخدام Paint Flashing

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

راجِع وميض الألوان.

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

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

راجع حدود الطبقات.

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

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

راجِع مشاكل الأداء أثناء الانتقال للأسفل.