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