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

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

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

تسجيل الأداء

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

تسجيل أداء بيئة التشغيل

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

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

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

   

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

التحكُّم في الشبكة أثناء التسجيل

للتحكّم في الشبكة أثناء التسجيل:

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

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

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

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

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

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

لعرض إحصاءات أدوات اختيار قواعد CSS أثناء أحداث إعادة احتساب النمط التي يتم تنفيذها لفترة طويلة:

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

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

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

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

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

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

محاكاة مستوى التزامن في الجهاز

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

لمحاكاة مستوى التزامن في الجهاز:

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

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

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

حفظ تسجيل

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

تحميل تسجيل

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

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

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

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

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

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

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

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

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

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

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

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_more التالي.
• اضغط على Shift+Enter لاختيار السابق أو Enter لاختيار التالي.

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

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

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

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

تغيير ترتيب الأغاني وإخفاؤها

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

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

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

شاهِد الفيديو لمعرفة كيفية تنفيذ سير العمل هذا.

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

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

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

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

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

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

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

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

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

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

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

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

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

تتبع الأشخاص الذين بدأوا الأحداث

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

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

لرؤية الأسهم، اعثر على الحدث البادئ أو الحدث الذي تسبب فيه في مخطط اللهب واختره.

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

إخفاء الدوال وعناصرها في الرسم البياني اللامع

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

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، ما تسبّب في تسبّب b، وما إلى ذلك.button.addEventListener

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

في مسار المواعيد، يمكنك الاطّلاع على العلامات المهمة، مثل:

• سرعة عرض الصفحة (FP)
• سرعة عرض أول محتوى مرئي (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 ملي ثانية بمثلث أحمر في أعلى يسار الصفحة.

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

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

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

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

تحليل اللقطات في الثانية

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لا يعرض الرسم البياني سوى منطقة التسجيل المحدّدة. في المثال السابق، يعرض الرسم البياني الذاكرة استخدام الذاكرة فقط في بداية التسجيل، بما يصل إلى علامة 1,000 ملي ثانية تقريبًا.

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

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

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

عرض لقطة شاشة

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

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

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

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

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

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

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

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

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

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

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

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

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

إليك أمثلة على تحليل الطبقات:

عرض أداة تحليل عرض محتوى الصفحة

لعرض معلومات متقدّمة عن حدث عرض محتوى الصفحة:

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

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

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

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

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

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

اطّلِع على إحصاءات العرض للإطارات.

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

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

راجِع مقالة تمييز أجزاء صفحة الويب المطلوب عرضها.

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

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

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

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

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

راجِع مشاكل متعلقة بأداء الانتقال في الصفحة.