تطورات أدوات مطوري البرامج في Chrome لعام 2013

Arthur Evans

Tim Statler

مقدمة

مع زيادة تعقيد تطبيقات الويب ووظائفها، زادت أيضًا ميزات "أدوات مطوري البرامج في Chrome". في هذه الملخّص عن محاضرة "بول إيريش" في مؤتمر Google I/O لعام 2013 بعنوان التغييرات في أدوات مطوّري البرامج في Chrome لعام 2013، يمكنك الاطّلاع على أحدث الميزات التي تُحدث ثورة في طريقة إنشاء تطبيقات الويب واختبارها.

إذا لم تتمكن من مشاهدة محادثة "بول"، يمكنك مشاهدتها أعلاه (لا تتردّد، سننتظرك) أو يمكنك الانتقال مباشرةً إلى ملخّص الميزات:

• تتيح لك Workspaces استخدام "أدوات مطوّري البرامج" كمحرِّر للرمز المصدر.
• إذا كنت تستخدم Sass، ستعجبك إمكانية التعديل المباشر لملفات Sass (‎.scss) ضمن "أدوات المطوّرين" والاطّلاع على التغييرات التي تطرأ على الصفحة على الفور.
• كان من الممكن منذ فترة طويلة تصحيح أخطاء الصفحات عن بُعد على Chrome لأجهزة Android، ولكن توفُّر إضافة ADB يسهّل الاتصال بأجهزة Android. تتيح لك إعادة توجيه المنفذ العكسي الاتصال بسهولة بالمضيف المحلي على جهاز التطوير من جهازك.
• يُعدّ الأداء مصدر قلق دائمًا في تطبيقات الويب، وتحتوي "أدوات المطوّرين" على عدد من الميزات الجديدة لمساعدتك في تتبُّع نقاط التوقف، بما في ذلك الرسم البياني الجديد "مخطّط اللهب" لتحليل أداء وحدة المعالجة المركزية والعديد من الأدوات الجديدة لتصحيح أخطاء الأداء المرتبطة بالعرض واستخدام الذاكرة.

تتوفّر هذه الميزات في الإصدار 28 من Chrome، وهو متوفّر الآن في قناة التحديثات الثابتة.

مساحات العمل

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

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

يؤدي الضغط على Control+S أو Command+S إلى حفظ التغييرات على القرص.

وبالمثل، تظهر التغييرات التي تجريها على أنماط أحد العناصر في كلّ من لوحة "المصادر" ومحرِّر التصميم الخارجي. يُرجى العلم بما يلي:

• لا يتم الاحتفاظ بتغييرات نموذج DOM في لوحة "العناصر". لا يتم حفظ سوى تغييرات التصميم في لوحة "العناصر".
• لا يمكن تغيير سوى الأنماط المحدّدة في ملف CSS خارجي. لا يتم الاحتفاظ بالتغييرات التي يتم إجراؤها على element.style أو على الأنماط المضمّنة على القرص. إذا كانت لديك أنماط مضمّنة، يمكن تغييرها في لوحة "المصادر".
• يتم حفظ تغييرات التصميم في لوحة "العناصر" على الفور، ولا تحتاج إلى الضغط على Control+S أو Command+S.

إضافة مجلّد مساحة عمل

هناك جزءان لاستخدام مساحات العمل: إتاحة محتوى مجلد محلي لخدمة DevTools وربط هذا المجلد بعنوان URL.

لإضافة مجلّد مساحة عمل جديد:

1. في "أدوات مطوّري البرامج"، انقر على الإعدادات لفتح إعدادات "أدوات مطوّري البرامج".
2. انقر على مساحة العمل.
3. انقر على إضافة مجلد.
4. تصفَّح إلى المجلد الذي يحتوي على ملفات مصدر مشروعك وانقر على اختيار.
5. انقر على السماح عندما يُطلب منك ذلك للسماح لأدوات المطوّرين بالوصول الكامل إلى المجلد.

تعرِض لوحة "المصادر" مجلد مساحة العمل الجديد إلى جانب المصادر التي تم تحميلها من خلال المضيف المحلي. يمكنك الآن تعديل الملفات مباشرةً ضمن مجلد مساحة العمل، وستبقى هذه التغييرات محفوظة على القرص.

ربط مجلد بعنوان URL

بعد إضافة مجلّد مساحة عمل، يمكنك ربطه بعنوان URL. عندما يحمِّل Chrome عنوان URL المحدّد، تعرِض لوحة "المصادر" محتويات مجلد مساحة العمل بدلاً من محتويات مجلد الشبكة.

لتعيين مجلد مساحة عمل إلى عنوان URL، اتّبِع الخطوات التالية:

1. في لوحة "المصادر"، انقر بزر الماوس الأيمن أو اضغط على Ctrl ‏+ انقر على ملف في مجلد مساحة عمل.
2. اختَر الربط بمورد شبكة.

   

3. اختَر مورد الشبكة المقابل من الصفحة التي يتم تحميلها حاليًا.

   

4. أعِد تحميل الصفحة في Chrome.

من المفترض أن تعرض لوحة "المصادر" الآن محتويات مجلد مساحة العمل على الجهاز فقط لموقعك الإلكتروني، وليس مصادر المضيف المحلي، كما هو موضّح أدناه.

ملاحظة: إذا استمر ظهور مصادر الخادم المحلي، أعِد تحميل الصفحة في Chrome.

هناك طريقتان أخريان لربط مجلّد شبكة بمجلد مساحة عمل:

• انقر بزر الماوس الأيمن (أو اضغط على Ctrl ‏+ انقر) على أحد موارد الشبكة واختَر ربط بمورد نظام الملفات.
• أضِف عمليات الربط يدويًا في علامة التبويب "مساحة العمل" من مربّع الحوار "إعدادات DevTools".

تصحيح أخطاء خريطة المصدر في Sass/CSS

يتيح لك تصحيح أخطاء Sass (CSS Source Map) تعديل ملفات Sass (‎.scss) مباشرةً في لوحة "المصادر"، وعرض النتائج بدون الحاجة إلى مغادرة "أدوات المطوّر" أو إعادة تحميل الصفحة. عند فحص عنصر يتم توفير أنماطه من خلال ملف CSS تم إنشاؤه باستخدام Sass، تعرض لوحة "العناصر" رابطًا إلى ملف ‎ .scss، وليس ملف ‎ .css الذي تم إنشاؤه.

يؤدي النقر على الرابط إلى فتح ملف SCSS (القابل للتعديل) في لوحة "المصادر". يمكنك إجراء أي تغييرات تريدها على هذا الملف.

عند حفظ التغييرات في ملف SCSS (في DevTools أو في مكان آخر)، يُعيد مُجمِّع Sass إنشاء ملفات CSS. بعد ذلك، تُعيد أدوات المطوّر تحميل ملف CSS الذي تم إنشاؤه حديثًا.

ملاحظة: من الناحية الفنية، من المفترض أن تعمل هذه الميزة مع أي مُعالج CSS مُسبَق يتوافق مع خرائط المصادر. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة العمل مع أدوات معالجة CSS في مستندات "أدوات المطوّرين".

استخدام ميزة تصحيح أخطاء Sass

لاستخدام تصحيح أخطاء Sass في Chrome، يجب أن يكون لديك الإصدار التجريبي من مُجمِّع Sass، وهو الإصدار الوحيد الذي يتيح حاليًا إنشاء خريطة المصدر.

gem install sass -v '>=3.3.0alpha' --pre

عليك أيضًا تفعيل ميزة تصحيح أخطاء Sass في تجارب "أدوات مطوّري البرامج":

1. افتح about:flags في Chrome.
2. فعِّل تفعيل تجارب أدوات المطوّرين.
3. أعِد تشغيل Chrome.
4. افتح إعدادات أدوات مطوّري البرامج وانقر على التجارب.
5. فعِّل التوافق مع Sass (أو تصحيح أخطاء ملف أسلوب Sass، استنادًا إلى إصدار المتصفّح الذي تستخدمه).

بعد تثبيت Sass، ابدأ مُجمِّع Sass للتتبّع عن التغييرات في ملفات Sass المصدر وإنشاء ملفات خريطة المصدر لكل ملف CSS تم إنشاؤه، على سبيل المثال:

sass --watch **--sourcemap** sass/styles.scss:styles.css

إذا كنت تستخدم Compass، يُرجى العِلم أنّ Compass لا يتوافق بعد مع الإصدار التجريبي من Sass، لذا لا يمكنك استخدام تصحيح أخطاء Sass مع Compass.

آلية العمل

ينشئ مُجمِّع Sass ملف خريطة مصدر (ملف ‎.map) لكل ملف مصدر SCSS يعالجه، بالإضافة إلى ملف CSS المجمَّع. ملف خريطة المصدر هو ملف JSON يحدِّد عمليات الربط بين ملف ‎ .scss وملفات ‎ .css. يحتوي كل ملف CSS على تعليق توضيحي يحدّد عنوان URL لملف خريطة المصدر، ويتم تضمينه في تعليق خاص:

/*# sourceMappingURL=<url>; */

على سبيل المثال، في ملف SCSS التالي:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

تُنشئ Sass ملف CSS على النحو التالي، مع التعليق التوضيحي sourceMappingURL:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

في ما يلي مثال على ملف خريطة المصدر:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

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

تتوفّر ميزتان جديدتان في "أدوات مطوّري البرامج" تسهِّلان إعداد عملية تصحيح الأخطاء عن بُعد على Chrome لأجهزة Android، وهما إضافة ADB وإعادة توجيه المنفذ.

تعمل إضافة ADB Chrome على تبسيط عملية إعداد تصحيح الأخطاء عن بُعد. وتوفّر هذه الميزة المزايا التالية:

• تُجمِّع أداة Android Debug Bridge (ADB) كي لا تحتاج إلى تثبيتها.
• ولا يلزم التفاعل مع سطر الأوامر.
• واجهة مستخدم لبدء البرنامج الخفي ADB وإيقافه بسهولة، وعرض الأجهزة المتصلة

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

استخدام إضافة ADB

أولاً، ثبِّت إضافة ADB Chrome من "سوق Chrome الإلكتروني". انقر على إضافة إلى Chrome لتثبيت الإضافة.

ملاحظة: لا يمكن تثبيت الإضافات من "سوق Chrome الإلكتروني" على نظام التشغيل Windows 8. إذا واجهت أي مشاكل في التثبيت من "سوق Chrome الإلكتروني"، يُرجى الاطّلاع على تصحيح الأخطاء عن بُعد على Android للحصول على تعليمات تثبيت بديلة.

بعد التثبيت، يظهر رمز قائمة Android رمادي في Chrome. لبدء ADB، انقر على الرمز ثم على بدء ADB.

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

انقر على عرض الأجهزة لفتح صفحة about:inspect التي تعرض كل جهاز متصل وعلامات التبويب الخاصة به. لفحص علامة تبويب في "أدوات المطوّر"، انقر على رابط "فحص" بجانب عنوان URL الخاص بها.

إذا لم تظهر لك أي أجهزة متصلة، تأكَّد من أنّ جهازك متصل بجهاز USB ومن أنّ ميزة تصحيح أخطاء USB مفعَّلة في إعدادات Chrome لأجهزة Android. للحصول على مزيد من التعليمات التفصيلية وخطوات تحديد المشاكل وحلّها، يُرجى الاطّلاع على مقالة تصحيح الأخطاء عن بُعد على Android.

إعادة توجيه المنفذ العكسي (ميزة تجريبية)

عادةً ما يكون لديك خادم ويب يعمل على جهاز التطوير المحلي، وتريد الاتصال بهذا الموقع الإلكتروني من جهازك. إذا كان جهاز التطوير والجهاز متصلَين بالشبكة نفسها، سيكون هذا الإجراء بسيطًا. ولكن في بعض الحالات، مثل شبكات الشركات المحظورة، قد لا يكون ذلك ممكنًا بدون بعض الحيل الذكية في نظام أسماء النطاقات. تتيح لك ميزة جديدة في Chrome لأجهزة Android تُعرف باسم إعادة توجيه المنفذ تنفيذ ذلك بسهولة. وتعمل هذه الميزة من خلال إنشاء منفذ TCP مستمع على جهازك يعيد توجيه حركة المرور عبر USB إلى منفذ TCP معيّن على جهاز التطوير.

لاستخدام هذه الميزة، ستحتاج إلى ما يلي:

• تثبيت الإصدار 28 من Chrome أو إصدار أحدث على جهاز التطوير
• تثبيت الإصدار التجريبي من Chrome لأجهزة Android على جهازك
• تثبيت Android Debug Bridge (إضافة ADB Chrome أو حزمة Android SDK الكاملة) على جهاز المطوّر

لاستخدام ميزة إعادة توجيه المنفذ العكسي، يجب أن يكون جهازك متصلاً لتصحيح الأخطاء عن بُعد، كما هو موضّح في قسم استخدام إضافة ADB. بعد ذلك، عليك تفعيل إعادة توجيه المنفذ العكسي وإضافة قاعدة لإعادة توجيه المنفذ لتطبيقك.

أولاً، فعِّل إعادة توجيه المنفذ العكسي:

1. افتح Chrome على جهاز التطوير.
2. في about:flags، فعِّل تفعيل تجارب أدوات المطوّرين وأعِد تشغيل Chrome.
3. افتح about:inspect. من المفترض أن يظهر لك جهازك الجوّال وقائمة بعلامات التبويب المفتوحة عليه.
4. انقر على رابط "فحص" بجانب أيّ من المواقع الإلكترونية المدرَجة.
5. في نافذة DevTools التي تفتح، افتح لوحة الإعدادات.
6. ضمن "التجارب"، فعِّل تفعيل إعادة توجيه المنفذ العكسي.
7. أغلِق نافذة "أدوات مطوّري البرامج" وأعِد الانتقال إلى about:inspect.

بعد ذلك، أضِف قاعدة لإعادة توجيه المنفذ:

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

   

5. في Chrome لأجهزة Android، افتح localhost:، حيث يكون هو القيمة التي أدخلتها في حقل منفذ الجهاز (القيمة التلقائية هي 8080).

من المفترض أن يظهر لك المحتوى الذي يعرضه جهاز التطوير.

عرض رسم بياني مفصّل لأداء الرموز لملفّات تحليل JavaScript

يوفّر عرض "مخطّط اللهب" الجديد تمثيلاً مرئيًا لمعالجة JavaScript بمرور الوقت، مثل تلك المتوفّرة في لوحتَي "المخطط الزمني" و"الشبكة".

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

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

• الاسم: اسم الدالة.
• الوقت المستغرَق في تنفيذ الدالة: المدة التي استغرقها إكمال الطلب الحالي للدالة، بما في ذلك العبارات الواردة في الدالة نفسها فقط، ولا يشمل ذلك أي دوال تمّ استدعاؤها.
• الوقت الإجمالي: الوقت الذي استغرقه إكمال الاستدعاء الحالي لهذه الدالة وأي دوالّ استدعت هذه الدالة.
• وقت النشاط الفردي المُجمَّع: الوقت المجمَّع لجميع عمليات استدعاء الدالة في التسجيل، بدون تضمين الدوال التي تستدعيها هذه الدالة
• إجمالي الوقت المجمّع: إجمالي الوقت المجمّع لجميع عمليات استدعاء الدالة، بما في ذلك الدوال التي تستدعيها هذه الدالة.

يؤدي النقر على أحد وحدات الدوال إلى فتح ملف JavaScript الذي يحتوي عليه في لوحة "المصادر"، في السطر الذي تم تعريف الدالة فيه.

لاستخدام الرسم البياني للّهب:

1. في DevTools، انقر على علامة التبويب الملفات الشخصية.
2. اختَر تسجيل لقطات وحدة المعالجة المركزية في JavaScript وانقر على بدء.
3. عند الانتهاء من جمع البيانات، انقر على إيقاف.
4. في عرض الملف الشخصي، اختَر الرسم البياني Flame Chart.

   

خمس ميزات رئيسية لقياس الأداء

في ما يلي ميزات جديدة متعددة لفحص مشاكل الأداء، وهي تكملة لهذا الاستطلاع حول التطورات الثورية في "أدوات مطوّري البرامج":

• وضع الرسم المستمر
• عرض المستطيلات وحدود الطبقات في Paint
• مقياس عدد اللقطات في الثانية
• العثور على تصاميم متزامنة قسرية (تعذُّر معالجة التنسيق)
• تتبُّع تخصيص العناصر

وضع الرسم المستمر

وضع الرسم المستمر هو خيار في إعدادات "أدوات مطوّري البرامج" (العرض > تفعيل إعادة رسم الصفحة باستمرار) يساعدك في تحديد تكلفة عرض العناصر الفردية أو أنماط CSS.

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

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

لتفعيل وضع الرسم المستمر، اتّبِع الخطوات التالية:

1. افتح إعدادات "أدوات مطوّري البرامج". 1.في علامة التبويب الإعدادات العامة، ضمن العرض، فعِّل تفعيل إعادة رسم الصفحة باستمرار.

ملاحظة: إذا لم يظهر لك هذا الخيار في "الإعدادات"، افتح about:flags وفعِّل التركيب باستخدام وحدة معالجة الرسومات في جميع الصفحات وأعِد تشغيل Chrome.

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

عرض مستطيلات الطلاء وحدود الطبقات

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

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

مقياس عدد اللقطات في الثانية

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

لإظهار مقياس عدد اللقطات في الثانية:

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

يمكنك فرض ظهور مقياس عدد اللقطات في الثانية دائمًا من خلال فتح about:flags وتفعيل عداد عدد اللقطات في الثانية وإعادة تشغيل Chrome.

العثور على تصاميم متزامنة قسرية (تعذُّر معالجة التنسيق)

لزيادة أداء العرض إلى أقصى حد، يُجمِّع Chrome عادةً تغييرات التنسيق التي يطلبها تطبيقك ويحدِّد موعدًا لإجراء خطوة تنسيق لاحتساب التغييرات المطلوبة وعرضها بشكل غير متزامن. ومع ذلك، إذا طلب أحد التطبيقات قيمة خاصية تعتمد على التنسيق (مثل offsetHeight أو offsetWidth)، يضطر Chrome إلى تنفيذ تنسيق الصفحة على الفور وبطريقة متزامنة. يمكن أن تؤدي هذه التنسيقات المتزامنة القسرية إلى خفض أداء العرض بشكل كبير، خاصةً عند تنفيذها بشكل متكرّر على أشجار DOM كبيرة. ويُعرف هذا السيناريو أيضًا باسم "تعذُّر تنسيق الصفحة".

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

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

اطّلِع على العرض التوضيحي للمخطط الزمني: تحديد التنسيقات المتزامنة القسرية للحصول على مزيد من المعلومات.

تتبُّع تخصيص العناصر

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

لتتبُّع عمليات تخصيص العناصر:

1. في DevTools، انقر على علامة التبويب الملفات الشخصية.
2. اختَر تسجيل عمليات تخصيص الذاكرة وانقر على بدء.
3. عند الانتهاء من جمع البيانات، انقر على إيقاف تسجيل الملف الشخصي للمساحة السخية (الدائرة الحمراء في الزاوية اليسرى السفلية من لوحة وضع الملفات الشخصية).

تحليل الأداء (ميزة تجريبية)

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

لاستخدام ميزة "الملف الشخصي على شبكة البحث":

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