المقدّمة
شهد "أدوات مطوري البرامج في Chrome" زيادةً في مدى تعقيد تطبيقات الويب ووظائفها. في هذا الملخص من مؤتمر Google I/O لعام 2013 بعنوان Chrome DevTools Revolutions 2013، ألقِ نظرة على أحدث الميزات التي تُحدث تغييرًا جذريًا في طريقة إنشاء تطبيقات الويب واختبارها.
إذا فاتك محاضرة بول، يمكنك مشاهدتها أعلاه (تابع، وننتظرها) أو يمكنك الانتقال مباشرةً إلى ملخّص الميزة:
- تتيح لك Workspace استخدام "أدوات مطوري البرامج" كأداة لتعديل الرموز المصدر.
- إذا كنت تستخدم Sass، ستحب إمكانية التعديل المباشر لملفات Sass (.scss) ضمن أدوات مطوّري البرامج وستظهر التغييرات على الفور في الصفحة.
- أصبح من الممكن لبعض الوقت تصحيح أخطاء الصفحات عن بُعد في متصفح Chrome لنظام Android، ولكن إضافة ADB تجعل الاتصال بأجهزة Android أكثر بساطة. تتيح لك إعادة توجيه المنفذ العكسي الاتصال بسهولة بالمضيف المحلي على جهاز التطوير من جهازك.
- فالأداء دائمًا ما يمثل مصدر قلق في تطبيقات الويب، وتحتوي أدوات مطوري البرامج على عدد من الميزات الجديدة التي تساعدك في تتبع أوجه القصور، بما في ذلك العرض المرئي الجديد لـ "مخطط الرسومات" لتحديد ملامح وحدة المعالجة المركزية (CPU)، والعديد من الأدوات الجديدة لتصحيح مشاكل الأداء المتعلقة بالعرض واستخدام الذاكرة.
تتوفّر هذه الميزات في إصدار Chrome 28، بينما تتوفّر الآن في قناة التحديث الثابتة.
مساحات العمل
تتيح لك مساحات العمل ربط الموارد المعروضة من خادم ويب محلي بالملفات المتوفّرة على القرص، بحيث يمكنك تعديل أي نوع من الملفات المصدر في لوحة "المصادر" والاحتفاظ بهذه التغييرات على القرص. وبالمثل، تظهر التغييرات التي تجريها في المحرر الخارجي على الفور في لوحة المصادر.
توضِّح لقطة الشاشة أدناه مثالاً على مساحات العمل قيد التنفيذ. يتم تحميل موقع "تقويم Google" عبر مضيف محلي، بينما تعرض لوحة "المصادر" طريقة عرض نظام الملفات المحلي للمجلد الجذر للموقع الإلكتروني. وتظل التعديلات التي تجريها على الملفات في هذا المجلد محفوظة على القرص. في لقطة الشاشة أدناه، تم إجراء بعض التغييرات غير المحفوظة على Calendar.css، لذا يتم وضع علامة النجمة بجوار اسم الملف.
يؤدي الضغط على Control+S أو Command+S إلى استمرار حدوث التغييرات على القرص.
وبالمثل، تنعكس التغييرات التي تجريها على أنماط العنصر في لوحة "العناصر" في كل من لوحة "المصادر" والمحرّر الخارجي. تجدر الإشارة إلى ما يلي:
- لا يستمر حدوث تغييرات DOM في لوحة "العناصر". لا يتم الاحتفاظ إلا بتغييرات النمط في لوحة "العناصر".
- لا يمكن تغيير سوى الأنماط المحددة في ملف CSS خارجي. لا تتم عملية التغييرات التي يتم إجراؤها على item.style أو إلى الأنماط المضمنة مرة أخرى على القرص. إذا كانت لديك أنماط مضمّنة، يمكن تغييرها في لوحة "المصادر".
- ويتم الاحتفاظ بتغييرات النمط في لوحة "العناصر" على الفور، ولن تحتاج إلى الضغط على
Control+SأوCommand+S.
إضافة مجلد مساحة عمل
هناك جزءان لاستخدام مساحات العمل: إتاحة محتوى مجلد محلي لأدوات مطوّري البرامج وربط هذا المجلد بعنوان URL.
لإضافة مجلد جديد لمساحة العمل:
- في "أدوات مطوري البرامج"، انقر على رمز الإعدادات
لفتح إعدادات "أدوات مطوري البرامج". - انقر على مساحة العمل.
- انقر على إضافة مجلد.
- انتقِل إلى المجلد الذي يحتوي على ملفات المصدر لمشروعك وانقر على اختيار.
- عندما يُطلب منك، انقر على Allow (سماح) للسماح لأدوات مطوّري البرامج بالوصول الكامل إلى المجلد.
تعرض لوحة "المصادر" مجلد مساحة العمل الجديد مع المصادر التي تم تحميلها من خلال المضيف المحلي. يمكنك الآن تعديل الملفات مباشرةً في مجلد Workspace، وستظل هذه التغييرات سارية على القرص.
ربط مجلد بعنوان URL
بعد إضافة مجلد Workspace، يمكنك ربطه بعنوان URL. عند تحميل Chrome لعنوان URL المحدد، تعرض لوحة "المصادر" محتويات مجلد مساحة العمل بدلاً من محتويات مجلد الشبكة.
لربط مجلد مساحة عمل بعنوان URL:
- في لوحة "المصادر"، انقر بزر الماوس الأيمن أو انقر على Control مع النقر على ملف في مجلد مساحة العمل.
- اختَر الربط بمورد الشبكة.
- اختَر مورد الشبكة المقابل من الصفحة التي يتم تحميلها حاليًا.
- أعِد تحميل الصفحة في Chrome.
من المفترض أن تعرض لوحة "المصادر" الآن محتوى مجلد مساحة العمل المحلية لموقعك الإلكتروني فقط، وليس مصادر المضيف المحلي، كما هو موضّح أدناه.
هناك طريقتان أخريان لربط مجلد شبكة بمجلد مساحة عمل:
- انقر بزر الماوس الأيمن (أو Control+النقر) على مورد الشبكة واختر ربط لمورد نظام الملف.
- يمكنك إضافة عمليات الربط يدويًا في علامة التبويب "مساحة العمل" ضمن مربّع حوار "إعدادات أدوات مطوّري البرامج".
تصحيح أخطاء خريطة مصدر Sass/CSS
يتيح لك تصحيح أخطاء Sass (خريطة مصدر CSS) التعديل المباشر لملفات Sass (.scss) في لوحة "المصادر" وعرض النتائج بدون الحاجة إلى مغادرة أدوات مطوّري البرامج أو إعادة تحميل الصفحة. عند فحص عنصر يتم توفير أنماطه بواسطة ملف CSS تم إنشاؤه من خلال Sass، تعرض لوحة العناصر رابطًا إلى ملف scss.، وليس ملف .css الذي تم إنشاؤه.
يؤدي النقر على الرابط إلى فتح ملف SCSS (قابل للتعديل) في لوحة "المصادر". يمكنك إجراء أي تغييرات تريدها على هذا الملف.
عند حفظ التغييرات في ملف SCSS (في أدوات مطوّري البرامج أو في أي مكان آخر)، يعيد برنامج Sass البرمجي إنشاء ملفات CSS. بعد ذلك، تُعيد أدوات مطوري البرامج تحميل ملف CSS الذي تم إنشاؤه حديثًا.
استخدام تصحيح الأخطاء عبر Sass
لاستخدام تصحيح الأخطاء من خلال Sass في Chrome، يجب أن يكون لديك إصدار تجريبي من برنامج Sass البرمجي، وهو الإصدار الوحيد الذي يتيح حاليًا إنشاء خرائط المصدر.
gem install sass -v '>=3.3.0alpha' --pre
عليك أيضًا تفعيل ميزة "تصحيح أخطاء Sass" في تجارب "أدوات مطوّري البرامج":
- افتح about:flags في Chrome.
- فعِّل تفعيل تجارب "أدوات المطوّرين".
- أعِد تشغيل متصفِّح Chrome.
- افتح إعدادات أدوات مطوّري البرامج وانقر على التجارب.
- فعِّل دعم Sass (أو تصحيح أخطاء ورقة أنماط Sass، بناءً على إصدار المتصفح الذي تستخدمه).
بعد تثبيت Sass، ابدأ المحول البرمجي Sass لمراقبة التغييرات التي تطرأ على ملفات مصدر Sass وإنشاء ملفات خريطة المصدر لكل ملف CSS تم إنشاؤه، على سبيل المثال:
sass --watch **--sourcemap** sass/styles.scss:styles.css
إذا كنت تستخدم Compass، يُرجى ملاحظة أن Compass لا يتوفر بعد الإصدار التجريبي من Sass، لذلك لا يمكنك استخدام تصحيح الأخطاء من خلال Sass مع Compass.
آلية العمل
ولكل ملف مصدر SCSS تتم معالجته، يُنشئ مجمِّع Sass ملف خريطة مصدر (ملف .map) بالإضافة إلى ملف 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
أولاً، عليك تثبيت إضافة AADB Chrome من "سوق Chrome الإلكتروني". انقر على إضافة إلى Chrome لتثبيت الإضافة.
بعد التثبيت، يظهر رمز قائمة Android رمادي في Chrome. لبدء ADB، انقر على الرمز، ثم انقر على Start ADB (بدء ADB).
بعد بدء تشغيل ADB، يتحول رمز القائمة إلى اللون الأخضر ويعرض عدد الأجهزة المتصلة حاليًا، إن توفّرت.
انقر على عرض الأجهزة لفتح صفحة about:inspect التي تعرض كل جهاز متصل وعلامات التبويب التابعة له. لفحص علامة تبويب في "أدوات مطوري البرامج"، انقر على الرابط "فحص" بجانب عنوان URL الخاص بها.
إذا لم تظهر لك أي أجهزة متصلة، تأكَّد من اتصال جهازك بمنفذ USB ومن تفعيل ميزة تصحيح أخطاء الجهاز عبر USB في إعدادات Chrome لنظام التشغيل Android. للحصول على مزيد من الإرشادات التفصيلية وخطوات تحديد المشاكل وحلّها، يُرجى الاطّلاع على تصحيح الأخطاء عن بُعد على نظام التشغيل Android.
إعادة توجيه المنفذ العكسي (تجريبي)
بشكل عام، لديك خادم ويب يعمل على جهاز التطوير المحلي وتريد الاتصال بهذا الموقع من جهازك. إذا كان جهاز التطوير والجهاز متصلين بالشبكة نفسها، فهذا أمر بسيط. ولكن في بعض الحالات، مثل شبكات الشركات المحدودة، قد لا يكون ذلك ممكنًا بدون بعض الحيل الذكية لنظام أسماء النطاقات. هناك ميزة جديدة في Chrome لنظام التشغيل Android تُسمى إعادة توجيه المنفذ العكسي وتسهل تنفيذ هذه العملية. وتعمل هذه الميزة من خلال إنشاء منفذ TCP للاستماع على جهازك والذي يعيد توجيه الزيارات عبر USB إلى منفذ TCP معين على جهاز التطوير.
لاستخدام هذه الميزة، ستحتاج إلى ما يلي:
- تثبيت الإصدار 28 من Chrome أو الإصدارات الأحدث على جهاز التطوير
- الإصدار التجريبي من متصفِّح Chrome لنظام التشغيل Android مثبَّت على جهازك
- Android Debug Bridge (إضافة AADB Chrome أو حزمة تطوير البرامج (SDK) الكاملة لنظام التشغيل Android) تم تثبيته على جهاز التطوير
لاستخدام إعادة توجيه المنفذ العكسي، يجب أن يكون جهازك متصلاً لتصحيح الأخطاء عن بُعد، كما هو موضح في "استخدام إضافة ADB". بعد ذلك، يجب تفعيل ميزة "إعادة توجيه المنفذ العكسي" وإضافة قاعدة إعادة توجيه منفذ لتطبيقك.
أولاً، فعِّل إعادة توجيه المنفذ العكسي:
- افتح Chrome على جهاز التطوير.
- في about:flags، فعِّل تفعيل تجارب أدوات المطوّرين وأعِد تشغيل Chrome.
- افتح about:inspect. من المفترض أن يظهر جهازك الجوّال وقائمة بعلامات التبويب المفتوحة.
- انقر على الرابط "فحص" بجانب أي من المواقع الإلكترونية المدرجة.
- في نافذة "أدوات مطوري البرامج" التي تفتح، افتح لوحة "الإعدادات".
- ضمن "التجارب"، فعِّل تفعيل إعادة توجيه المنفذ العكسي.
- أغلِق نافذة "أدوات مطوري البرامج" وارجع إلى about:inspect.
ثم أضِف قاعدة إعادة توجيه المنفذ:
- انقر على الرابط "فحص" مرة أخرى لفتح "أدوات مطوري البرامج"، ثم افتح إعدادات "أدوات مطوري البرامج" مرة أخرى.
- انقر على علامة التبويب إعادة توجيه المنفذ.
- في حقل منفذ الجهاز، أدخِل رقم المنفذ الذي يجب أن يتصل به Chrome على جهاز Android (القيم التلقائية هي 8080).
- في الحقل Target (الهدف)، أضِف رقم المنفذ الذي يتم تشغيل تطبيق الويب عليه على جهاز التطوير.
- في متصفِّح Chrome لنظام التشغيل Android، افتح localhost:
، حيث هي القيمة التي أدخلتها في حقل منفذ الجهاز (القيمة التلقائية هي 8080).
من المفترض أن يظهر لك المحتوى الذي يعرضه جهاز التطوير.
تصور الرسم البياني الموجز للملفات الشخصية في JavaScript
توفّر طريقة عرض "الرسم البياني الدائري" الجديدة تمثيلاً مرئيًا لمعالجة JavaScript بمرور الوقت، على غرار التمثيل البصري للبيانات في لوحتَي "المخطط الزمني" و"الشبكة".
المحور الأفقي هو الوقت والمحور الرأسي هو مكدس الاستدعاءات. في أعلى اللوحة، اطّلِع على نظرة عامة تُظهر التسجيل بكامله، ويمكنك "تكبير" منطقة من النظرة العامة من خلال اختيارها بالماوس، كما هو موضّح أدناه. يتقلص المقياس الزمني لعرض التفاصيل وفقًا لذلك.
في عرض التفاصيل، يتم تمثيل تكديس الاستدعاءات كحزمة من الدوال "blocks". أما الكتلة الواقعة فوق مجموعة أخرى، تُسمى كتلة الدالة السفلية. يؤدي تحريك مؤشر الماوس فوق كتلة معينة إلى عرض اسم الدالة وبيانات التوقيت:
- الاسم - اسم الدالة.
- الوقت الذاتي: المدة التي استغرقها إكمال الاستدعاء الحالي للدالة، بما في ذلك العبارات في الدالة نفسها فقط، ولا يشمل أي وظائف استدعتها.
- الوقت الإجمالي: الوقت المستغرَق لإكمال الاستدعاء الحالي لهذه الدالة وأي وظائف تم استدعاؤها.
- الوقت الإجمالي المجمَّع: هو الوقت الإجمالي لجميع عمليات استدعاء الوظيفة خلال التسجيل، لا يشمل الدوال التي تستدعيها هذه الدالة.
- الوقت الإجمالي المجمّع - الوقت الإجمالي المجمَّع لجميع عمليات استدعاء الدالة، بما في ذلك الدوال التي تستدعيها هذه الدالة.
يؤدي النقر على كتلة دالة إلى فتح ملف JavaScript الذي يحتوي عليها في لوحة "المصادر"، عند السطر الذي يتم تعريف الدالة فيه.
لاستخدام المخطط اللهب:
- في "أدوات مطوري البرامج"، انقر على علامة التبويب الملفات الشخصية.
- اختَر تسجيل الملف الشخصي لوحدة المعالجة المركزية (CPU) في JavaScript وانقر على بدء.
- عند الانتهاء من جمع البيانات، انقر على إيقاف.
- في عرض الملف الشخصي، اختَر العرض المرئي الرسم البياني الفلكي.
خمس ميزات رئيسية لقياس الأداء
على سبيل المثال، يشكّل تلخيص هذا الاستطلاع للتطورات الثورية في "أدوات مطوري البرامج" عدة ميزات جديدة للتحقّق من مشاكل الأداء:
- وضع "الرسم المستمر"
- إظهار مستطيلات الطلاء وحدود الطبقات
- مقياس عدد اللقطات في الثانية
- العثور على التنسيقات المتزامنة التي تم فرضها (تجزئة التنسيق)
- تتبُّع تخصيص العناصر
وضع "الرسم المستمر"
"وضع الرسم المستمر" هو خيار في إعدادات أدوات مطوّري البرامج (العرض > تفعيل إعادة عرض الصفحات باستمرار) يساعدك في تحديد تكلفة العرض للعناصر الفردية أو أنماط CSS.
عادةً، لا يرسم Chrome إلا على الشاشة استجابةً لتغيير في التنسيق أو النمط، ولا يرسم سوى مناطق الشاشة التي تحتاج إلى تحديث. عند تفعيل إعادة عرض الصفحة المستمرة، تتم إعادة طلاء الشاشة بأكملها باستمرار. توضح شاشة العرض الأمامية الوقت الذي يستغرقه Chrome لطلاء الصفحة، بالإضافة إلى نطاق الأوقات، بالإضافة إلى رسم بياني يعرض توزيع أوقات عرض الشاشة الحديثة. يشير الخط الأفقي عبر المدرج التكراري إلى علامة 16.6 ملي ثانية.
وتتمثل الفائدة من استخدام هذا في أنه يمكنك التنقل في شجرة DOM في لوحة "العناصر" وإخفاء عناصر فردية (اضغط على المفتاح H لإخفاء العنصر المحدد حاليًا)، أو إيقاف أنماط CSS لأحد العناصر. يمكنك معرفة مقدار الوقت الذي تتم فيه إضافة عنصر أو نمط واحد إلى "وزن" عرض الصفحة، إن توفّرت، من خلال ملاحظة التغييرات التي طرأت على مدة عرض الصفحة. إذا أدى إخفاء عنصر واحد إلى تقليل أوقات الطلاء بشكل كبير، فأنت تعلم أن عليك التركيز على تصميم هذا العنصر أو بنائه.
لتفعيل "وضع الرسم المستمر"، عليك اتّباع الخطوات التالية:
- افتح إعدادات "أدوات مطوري البرامج". 1- في علامة التبويب الإعدادات العامة، ضمن العرض، فعِّل الإعداد تفعيل إعادة عرض الصفحات باستمرار.
لمزيد من المعلومات، يُرجى الاطّلاع على مقالة تحديد معلومات حول أوقات العرض الطويلة باستخدام "وضع الرسم المستمر" في أدوات مطوّري البرامج.
عرض مستطيلات الطلاء وحدود الطبقات
هناك خيار آخر في أدوات مطوري البرامج وهو عرض المناطق المستطيلة من الشاشة التي يتم رسمها. (الإعدادات > العرض > عرض مستطيلات الطلاء). على سبيل المثال، في لقطة الشاشة أسفل مستطيل طلاء، يتم رسمه فوق المنطقة التي تم فيها تطبيق تأثير التمرير CSS على الرسم الأرجواني. وهذا جيد، لأنه جزء صغير نسبيًا من الشاشة.
وتريد تجنب ممارسات التصميم والتطوير التي تؤدي إلى إعادة عرض الشاشة بالكامل. على سبيل المثال، في لقطة الشاشة التالية، يتنقّل المستخدم في الصفحة. يحيط أحد مستطيلات الطلاء بشريط التمرير، ويحيط آخر ببقية الصفحة بالكامل. في هذه الحالة، فإن الجاني هو صورة الخلفية على عنصر الجسم. يتم ضبط موضع الصورة على "ثابت" في CSS، ما يتطلّب من Chrome إعادة عرض الصفحة بأكملها عند كل عملية تمرير.
مقياس عدد اللقطات في الثانية
يعرض مقياس عدد اللقطات في الثانية عدد اللقطات الحالي في الصفحة، والحد الأدنى والأقصى لعدد اللقطات في الثانية، ورسم بياني شريطي يوضّح عدد اللقطات في الثانية بمرور الوقت، ومدرّجًا تكراريًا يوضّح تغيُّر عدد اللقطات في الثانية.
لعرض مقياس عدد اللقطات في الثانية:
- افتح إعدادات "أدوات مطوري البرامج".
- انقر على إعدادات عامة.
- ضمن العرض، فعِّل فرض التركيب المسرّع وإظهار مقياس عدد اللقطات في الثانية.
ويمكنك فرض ظهور مقياس عدد اللقطات في الثانية دائمًا من خلال فتح about:flags وتشغيل عدّاد عدد اللقطات في الثانية ثم إعادة تشغيل Chrome.
العثور على التنسيقات المتزامنة التي تم فرضها (تجزئة التنسيق)
لزيادة أداء العرض إلى أقصى حد، يرسل Chrome عادةً تغييرات التنسيق التي يطلبها تطبيقك ويجدول تمريرة تصميم لحساب التغييرات المطلوبة وعرضها بشكل غير متزامن. ومع ذلك، إذا طلب أحد التطبيقات قيمة خاصية تعتمد على التنسيق (مثل offsetHeight أو offsetWidth)، يتم فرض تنسيق الصفحة على Chrome على الفور وبشكل متزامن. هذه ما يُطلق عليه اسم التنسيقات المتزامنة المفروضة قد تحد من أداء العرض بشكل كبير، خصوصًا عند تنفيذها بشكل متكرر على أشجار DOM الكبيرة. يطلق على هذا السيناريو أيضًا "إلغاء التخطيط".
ينبّهك "تسجيل المخطط الزمني" عندما يرصد تنسيقًا متزامنًا إجباريًا مع رمز تحذير أصفر بجانب سجلّ المخطط الزمني المقابل. يؤدي تمرير مؤشر الماوس فوق أحد هذه السجلات إلى عرض تتبعات تسلسل استدعاء الدوال البرمجية للرمز الذي أدى إلى إبطال التنسيق، والرمز الذي فرض التنسيق.
تعرض هذه النافذة المنبثقة أيضًا عدد العُقد التي تحتاج إلى تنسيق وحجم شجرة إعادة التخطيط ونطاق التنسيق وجذر التنسيق.
راجع العرض التوضيحي للمخطط الزمني: تشخيص التنسيقات المتزامنة التي تم فرضها للحصول على مزيد من المعلومات.
تتبُّع تخصيص العناصر
تتبُّع تخصيص العناصر هو نوع جديد من الملفات الشخصية للذاكرة يعرض التخصيص بمرور الوقت. عند بدء تتبُّع التخصيص، تحصل أدوات مطوّري البرامج على لقطات متعدّدة باستمرار بمرور الوقت. يوضّح ملف تخصيص كومة الذاكرة المؤقتة مكان إنشاء العناصر ويحدد مسار الاحتفاظ.
لتتبّع عمليات تخصيص العناصر:
- في "أدوات مطوري البرامج"، انقر على علامة التبويب الملفات الشخصية.
- اختَر تسجيل عمليات تخصيص كومة الذاكرة المؤقتة وانقر على بدء.
- عند الانتهاء من جمع البيانات، انقر على إيقاف تسجيل الملف التعريفي لكومة الذاكرة المؤقتة (الدائرة الحمراء في أسفل يمين جزء التحليل).
إنشاء مواصفات لوحة الرسم (تجريبي)
وأخيرًا، إليك ميزة تجريبية بالكامل لاستكشافها. يتيح لك إنشاء مواصفات لوحة الرسم تسجيل وتشغيل مكالمات WebGL التي تم إجراؤها على أحد عناصر لوحة الرسم. ويمكنك التنقّل بين مكالمات WebGL أو مجموعات اتصال فردية والاطّلاع على النتائج المعروضة. ويمكنك أيضًا معرفة الوقت المستغرق لإعادة تشغيل هذه المكالمات المحددة.
لاستخدام تحديد مواصفات لوحة الرسم:
- فعِّل ميزة فحص لوحة الرسم في علامة التبويب التجارب ضمن إعدادات "أدوات مطوّري البرامج". (إذا لم تظهر لك علامة التبويب هذه، افتح about:flags، وشغِّل تفعيل تجارب أدوات المطوّرين وأعِد تشغيل Chrome.)
- انقر على علامة التبويب الملفات الشخصية.
- اختَر التقاط إطار لوحة الرسم وانقر على أخذ لقطة.
- يمكنك الآن استكشاف المكالمات المستخدمة لإنشاء إطار لوحة الرسم.
