هل يبدو هذا مألوفًا؟ أنت بصدد تصحيح أخطاء مشكلة في الأداء في "أدوات مطوّري البرامج في Chrome"، ولكنّ الكم الهائل من المعلومات في لوحة "الأداء" يجعل من الصعب التركيز على الأجزاء الأكثر صلة وقابلية للتنفيذ فقط. قد يكون من الصعب التنقّل بين المخطط الزمني ورسم المخطّط البياني للوقود والعديد من مسارات البيانات المختلفة. على الرغم من مدى فعالية لوحة "الأداء"، يجب ألا تؤثر فائدتها في سهولة استخدامها.
في إطار المبادرة التي أطلقناها لتحسين أدوات تحسين الأداء في Chrome، أطلقنا مؤخرًا ثلاث ميزات جديدة تهدف إلى تقليل كثافة المعلومات ومساعدة المطوّرين في تخصيص سير عملهم:
- إخفاء الأجزاء غير ذات الصلة بالمخطط الزمني
- إخفاء الأجزاء غير ذات الصلة من الرسم البياني المفصّل لأداء الرموز
- إخفاء الأغاني غير ذات الصلة
في هذه المقالة، سنلقي نظرة عن كثب على كل ميزة من هذه الميزات ونوضّح كيفية استخدامها للتركيز على المعلومات الأكثر أهمية فقط.
إخفاء الأجزاء غير ذات الصلة من المخطط الزمني
يتم قياس أداء الويب بالمللي ثانية، لذا حتى إذا كان تسجيل الأداء يمتد لبضع ثوانٍ فقط، هناك فرص كثيرة لخسارة ترتيبك.
في الإصدار 122 من Chrome، أضفنا إمكانية إنشاء مسار تنقّل. تتيح لك هذه الميزة تقييد حدود المخطط الزمني بحيث لا تتمكّن من التكبير أو التصغير إلا داخل منطقة الاهتمام التي تحدّدها بنفسك. يمكن أن يكون تقييد المخطط الزمني بهذه الطريقة مفيدًا بشكل خاص إذا كنت تحاول تصحيح أخطاء مشاكل الاستجابة، على سبيل المثال، حتى تتمكّن من التركيز على تفاعل واحد أو مهمة طويلة مثيرة للمشاكل.
تعرض لقطة الشاشة السابقة لقطة مقرّبة من النظرة العامة على المخطط الزمني، والتي تعرض نشاط سلسلة المحادثات الرئيسية، مثل تنفيذ النصوص البرمجية وعمل العرض التقديمي. عند وضع المؤشر فوقه، يظهر زر جديد سيضبط حدود المخطط الزمني على النافذة الحالية. يتم تصنيف الزر حسب عرض الفترة الزمنية بالمللي ثانية ورمز . تظهر علامات التنقّل فوق النظرة العامة على المخطط الزمني، ويتم تصنيف كل منها حسب حجم نافذتها الزمنية.
لاستخدام هذه الميزة:
- يمكنك تكبير الجدول الزمني وتصغيره للوصول إلى منطقة تهمّك.
- انقر على رمز العدسة المكبِّرة في النظرة العامة على المخطط الزمني لتثبيت المخطط الزمني وضبط مسار تنقّل.
- كرِّر هذه الخطوات حسب الحاجة لتكبير منطقة مُدمجة من الاهتمام.
- انقر على علامات التنقّل للرجوع إلى المناطق السابقة التي تهمّك أو النطاق الكامل للجدول الزمني.
يساعد اقتصاص الجدول الزمني في ضمان عدم الانتقال عن طريق الخطأ إلى جزء غير ذي صلة من الجدول الزمني. ومع ذلك، يمكنك النقر على علامات التنقّل لتصغير الشاشة مرة أخرى عند الحاجة. ومن المزايا الأخرى أنّ النظرة العامة على المخطط الزمني ستظل متوافقة مع المسارات التالية. يمكن أن يسهّل ذلك بشكل كبير رصد فرص التحسين في الأداء، مثل عمليات إعادة التدفق القسري وتحديد السبب الأساسي لها في مخطّط "الشرارة".
إخفاء الأجزاء غير ذات الصلة من الرسم البياني المفصّل لأداء الرموز
إنّ تحليل نشاط سلسلة التعليمات الرئيسية ليس بالأمر السهل. يُعرف هذا الجزء من لوحة "الأداء" باسم رسم بياني للوقود، وذلك بسبب طول تسلسلات المكالمات وكثرة عددها. في بعض الحالات القصوى، يمكن أن تكون هذه الحِزم غير قابلة للاستخدام لدرجة أنّه من الصعب فهم كلّ شيء والتركيز على ما تحاول تحسينه.
بدءًا من الإصدار 124 من Chrome، يمكنك تخصيص الإدخالات التي تريد إخفاءها في مخطّط "المسارات الناجحة"، ما يتيح لك التركيز على المعلومات الأكثر ملاءمةً للتنفيذ.
عند النقر بزر الماوس الأيمن على دالة في مخطّط المخطّطات البيانية، تظهر قائمة سياق تتضمّن عدة خيارات لإخفاء الإدخالات:
- إخفاء الدالة: إزالة الدالة المحدّدة من مخطّط "الشرارة" وستتم ترقية العناصر الثانوية للظهور مباشرةً بعد الوظيفة الرئيسية.
- إخفاء العناصر الفرعية: يمكنك تقليم مخطّط "الشرارة" في الدالة المحدّدة، ما يؤدي إلى إخفاء جميع عناصرها الفرعية.
- إخفاء العناصر الفرعية المتكرّرة: إزالة جميع نُسخ الدالة المحدّدة من بقية الرسم البياني للمسار
هناك أيضًا العديد من اختصارات لوحة المفاتيح المفيدة التي يمكنك استخدامها عند اختيار إحدى الدوالّ:
- H: إخفاء الدالة المحددة
- ج: إخفاء العناصر الفرعية للدالة المحددة
- R: إخفاء نُسخ الدالة المحدّدة لاحقًا في الحزمة
- U: عرض العناصر الفرعية المخفية للدالة المحددة
إخفاء النصوص البرمجية غير ذات الصلة نهائيًا
يخفي خيار إضافة نص برمجي إلى قائمة التجاهل الدالة المحدّدة من الرسم البياني للخطّ البياني، بالإضافة إلى كل الدوال الأخرى المحدّدة في ملف النص البرمجي نفسه. تتم أيضًا إضافة النص البرمجي إلى قائمة التجاهل التي يستخدمها مصحِّح أخطاء DevTools للتخطّي فوق الدوال وتجاهل الاستثناءات التي تأتي من النص البرمجي.
يتم الاحتفاظ بالنصوص البرمجية التي تمت إضافتها إلى قائمة التجاهل، لذا سيستمر إخفاؤها من مخطّط "مسار استدعاء الدوال البرمجية" في عمليات التتبّع الجديدة. إنّ النصوص البرمجية التي لا يمكنك التحكّم فيها هي مرشّحات جيدة لقائمة التجاهل. من ناحية أخرى، يكون إخفاء الدوالّ الفردية مؤقتًا في التتبُّع الحالي ويعتمد أكثر على الموقف. على سبيل المثال، قد تحتاج إلى إخفاء حزمة مزعجة من طلبات الدالة المتكررة لتسهيل استخدام التتبُّع.
لإلغاء قائمة التجاهل أو أي دوال مخفية أخرى في مخطّط "مسار استدعاء الدوال البرمجية"، يمكنك استخدام قائمة السياق لإعادة ضبط الدوال الفرعية للدالة المحدّدة أو إعادة ضبط جميع الدوال المخفية في جميع أنحاء التتبّع. يتم وضع تعليق توضيحي على الدوالّ التي تحتوي على عناصر فرعية مخفية باستخدام الرمز ▼ الذي يعيد أيضًا ضبط العناصر الفرعية عند النقر عليه.
إنّ أيّ عمق وتعقيد غير ضروريَين يمكنك إزالتهما من مخطّط "الشعلة" سيجعلانه أكثر سهولة في الاستخدام. إنّ إمكانية تخصيص الإدخالات التي تظهر لك عند الحاجة هي ميزة تحسينية تناسب احتياجاتك وتساعدك في التركيز على المعلومات الأكثر أهمية للمهمة التي تنفّذها.
إخفاء الأغاني غير ذات الصلة
يشكّل نشاط سلسلة التعليمات الرئيسية مسارًا واحدًا فقط من لوحة "الأداء". تعرض المسارات في لوحة "الأداء" نشاط إحدى العمليات، ويتمّ محاذاة جميعها مع مخطط زمني شائع للمساعدة في تصحيح الأخطاء. بالإضافة إلى المسار الرئيسي، تتوفّر مسارات فردية للإطارات الفرعية والمهام والعمليات الأخرى التي تستخدمها الصفحة، بالإضافة إلى مسارات الشبكة والإطارات والرسوم المتحرّكة والتفاعلات. وهناك المزيد من المسارات التي ترصد نشاط عمليات Chrome ذات المستوى الأدنى، مثل IO ووحدة معالجة الرسومات وCompositor. هذه معلومات كثيرة. ومع ذلك، في معظم سير العمل المتعلّقة بالأداء، لن تهتم إلا بالمعلومات الواردة من بضع مقاطع صوتية في كل مرة.
اعتبارًا من الإصدار 125 من Chrome، يتوفّر وضع إعدادات جديد يتيح لك إخفاء الأغاني غير المطلوبة أو إعادة ترتيبها حسب رغبتك. على سبيل المثال، إذا كنت تعمل على تحسين تفاعل بطيء، يمكنك اختيار إخفاء كل المقاطع باستثناء التفاعلات والرئيسية ووحدة معالجة الرسومات.
لتعديل المقاطع الصوتية، انقر بزر الماوس الأيمن على اسم أي مقطع صوتي واختَر Configure tracks (ضبط المقاطع الصوتية)…. سيؤدي ذلك إلى فتح وضع الضبط، حيث ستتمكّن من عرض مسارات فردية أو إخفاؤها أو إعادة ترتيبها. انقر على الزر إنهاء ضبط قنوات الإصدار لحفظ إعداداتك المفضّلة.
من خلال ضبط المقاطع الصوتية، يمكنك التحكّم في الطريقة التي تعرِض بها لوحة "الأداء" المعلومات المهمة في سير عملك. يمكنك استخدام هذه الإعدادات لإخفاء النشاط من العمليات غير ذات الصلة، ونقل المقاطع الصوتية بطريقة توفّر لك أسهل طريقة للوصول إلى البيانات التي تحتاج إليها.
ملخص
تقدّم لك هذه الميزات الثلاث عناصر تحكّم جديدة وميسرة لتخصيص سير عمل الأداء. باستخدام هذه الميزات وخفض مقدار الضوضاء، ستتمكّن من العثور على ما تبحث عنه وفهم البيانات بشكل أفضل.
يهمّنا معرفة ما يناسبك أو كيفية تحسين تجربتك. يُرجى إعلامنا إذا كانت لديك أي أسئلة أو ملاحظات عامة من خلال التواصل معنا على @ChromeDevTools. إذا لم تعمل إحدى الميزات أو كان لديك اقتراح بشأن ميزات جديدة، يُرجى ترك تعليق على هذه المشكلة المفتوحة.
هذه ليست سوى بداية مبادرتنا لتحسين أدوات تحسين الأداء في Chrome، ويسعدنا مشاركة كل ما نخطط له لجعل لوحة "الأداء" أسهل استخدامًا وأكثر فعالية من أي وقت مضى. سننشر في منشورنا التالي مجموعة الميزات التالية هنا في مدوّنة Chrome للمطوّرين. في هذه الأثناء، يمكنك الاطّلاع على صفحة الميزات الجديدة في Chrome للاطّلاع على كل الميزات الجديدة في أدوات مطوّري البرامج وChrome.