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