الميزات الجديدة في أدوات مطوّري البرامج (Chrome 60)

Kayce Basques

مرحبًا تشمل الميزات الجديدة والتغييرات الرئيسية التي ستطرأ على "أدوات مطوّري البرامج" في الإصدار 60 من Chrome ما يلي:

يمكنك الاطّلاع على نسخة الفيديو من ملاحظات الإصدار هذه أدناه أو المتابعة للتعرّف على مزيد من المعلومات.

الميزات الجديدة

لوحة "عمليات التدقيق" الجديدة المستندة إلى Lighthouse

تستند الآن لوحة "عمليات التدقيق" إلى Lighthouse. توفّر أداة Lighthouse مجموعة شاملة من الاختبارات لقياس جودة صفحات الويب.

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

تقرير Lighthouse

الشكل 1: تقرير Lighthouse

لتدقيق صفحة، اتّبِع الخطوات التالية:

  1. انقر على علامة التبويب عمليات التدقيق.
  2. انقر على إجراء عملية تدقيق.
  3. انقر على تنفيذ التدقيق. يُعدّ Lighthouse أدوات المطوّرين لمحاكاة جهاز جوّال، ويُجري مجموعة من الاختبارات على الصفحة، ثم يعرض النتائج في لوحة عمليات التدقيق.

Lighthouse في مؤتمر Google I/O لعام 2017

يمكنك الاطّلاع على محادثة "أدوات المطوّرين" من مؤتمر Google I/O لعام 2017 أدناه لمعرفة المزيد عن دمج Lighthouse في "أدوات المطوّرين".

المساهمة في أداة Lighthouse

Lighthouse هو مشروع مفتوح المصدر. للاطّلاع على مزيد من المعلومات حول آلية عمل Lighthouse وكيفية المساهمة في تطويره، يمكنك الاطّلاع على المحادثة حول Lighthouse من مؤتمر Google I/O لعام 2017 أدناه.

هل لديك فكرة عن عملية تدقيق في Lighthouse؟ يمكنك نشرها هنا.

الشارات التابعة لجهات خارجية

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

تمرير مؤشر الماوس فوق شارة تابعة لجهة خارجية في لوحة "الشبكة"

الشكل 2: تمرير مؤشر الماوس فوق شارة تابعة لجهة خارجية في لوحة "الشبكة"

تمرير مؤشر الماوس فوق شارة جهة خارجية في "وحدة التحكّم"

الشكل 3 تمرير مؤشر الماوس فوق شارة جهة خارجية في "وحدة التحكّم"

لتفعيل الشارات التابعة لجهات خارجية، اتّبِع الخطوات التالية:

  1. افتح قائمة الأوامر.
  2. نفِّذ الأمر Show third party badges.

استخدِم خيار التجميع حسب المنتج في علامتَي التبويب عرض المكالمات ومن الأسفل إلى الأعلى لتجميع أنشطة تسجيل الأداء حسب الكيانات التابعة لجهات خارجية التي تسبّبت في الأنشطة. اطّلِع على البدء باستخدام تحليل أداء وقت التشغيل للتعرّف على كيفية تحليل الأداء باستخدام أدوات مطوّري البرامج.

التجميع حسب المنتج في علامة التبويب "من الأسفل إلى الأعلى"

الشكل 4 التجميع حسب المنتج في علامة التبويب من الأسفل إلى الأعلى

إيماءة جديدة للانتقال إلى "هنا"

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

عند التنقّل في التعليمات البرمجية، اضغط مع الاستمرار على Command (في نظام التشغيل Mac) أو Control (في نظام التشغيل Windows أو Linux) ثم انقر للمتابعة إلى سطر التعليمات البرمجية هذا. تُبرز أدوات المطوّرين الوجهات التي يمكن الانتقال إليها باللون الأزرق.

المتابعة إلى هنا

الشكل 5 المتابعة وصولاً إلى هنا

اطّلِع على مقالة البدء بتصحيح أخطاء JavaScript للتعرّف على أساسيات تصحيح الأخطاء في "أدوات مطوّري البرامج".

الانتقال إلى وضع "غير متزامن"

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

تعمل الإيماءة الجديدة للانتقال إلى هنا أيضًا مع الرموز البرمجية غير المتزامنة. عند الضغط مع الاستمرار على Command (نظام التشغيل Mac) أو Control (نظاما التشغيل Windows وLinux)، تُبرز أداة DevTools باللون الأخضر المَواضع التي يمكن الانتقال إليها غير المتزامنة.

يمكنك الاطّلاع على العرض الترويجي أدناه من محادثة "أدوات المطوّرين" في مؤتمر I/O كمثال.

التغييرات

معاينات أكثر إفادةً للعناصر في Console

في السابق، عند تسجيل عنصر أو تقييمه في وحدة التحكّم، كانت وحدة التحكّم تعرض فقط رمز Object، وهو رمز غير مفيد بشكل خاص. تقدّم Console الآن المزيد من المعلومات حول محتوى العنصر.

كيفية استخدام Console لمعاينة العناصر

الشكل 6 كيفية استخدام Console لمعاينة العناصر

كيفية معاينة Console للعناصر الآن

الشكل 7 كيفية معاينة Console للعناصر الآن

قائمة اختيار سياق أكثر إفادة في وحدة التحكّم

تقدّم الآن قائمة "اختيار السياق" في Console المزيد من المعلومات عن السياقات المتاحة.

  • يصف العنوان كل عنصر.
  • يصف العنوان الفرعي أسفل العنوان النطاق الذي جاء منه العنصر.
  • مرِّر مؤشر الماوس فوق سياق iframe لتتمييزه في إطار العرض.

قائمة "اختيار السياق" الجديدة

الشكل 8 عند تمرير مؤشر الماوس فوق إطار iframe في قائمة "اختيار السياق" الجديدة، يتم تمييزه في مجال العرض

تحديثات في الوقت الفعلي في علامة التبويب "التغطية"

عند تسجيل تغطية الرمز في الإصدار 59 من Chrome، كانت علامة التبويب التغطية تعرض فقط "جارٍ التسجيل"، بدون إمكانية الاطّلاع على الرمز الذي كان يتم استخدامه. تعرِض لك الآن علامة التبويب التغطية في الوقت الفعلي الرمز البرمجي المستخدَم.

تحميل صفحة والتفاعل معها باستخدام علامة التبويب "التغطية" القديمة

الشكل 9 تحميل صفحة والتفاعل معها باستخدام علامة التبويب التغطية القديمة

تحميل صفحة والتفاعل معها باستخدام علامة التبويب "التغطية" الجديدة

الشكل 10 تحميل صفحة والتفاعل معها باستخدام علامة التبويب التغطية الجديدة

خيارات أبسط لضبط الحدّ الأقصى المسموح به لعرض نطاق الشبكة

تم تبسيط قوائم الحدّ من سرعة الشبكة في لوحتَي الشبكة والأداء لتشمل ثلاثة خيارات فقط: غير متصل بالإنترنت وشبكة الجيل الثالث البطيئة، وهي شائعة في أماكن مثل الهند، وشبكة الجيل الثالث السريعة، وهي شائعة في أماكن مثل الولايات المتحدة.

خيارات ضبط الحدّ الأقصى المسموح لعرض نطاق الشبكة الجديدة

الشكل 11 خيارات ضبط الحدّ الأقصى المسموح لعرض نطاق الشبكة الجديدة

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

تسلسلات استدعاء الدوال البرمجية غير المتزامنة مفعَّلة تلقائيًا

تمت إزالة مربّع الاختيار غير المتزامن من لوحة المصادر. أصبحت عمليات تتبُّع تسلسل استدعاء الدوال البرمجية غير المتزامنة مفعّلة الآن بشكل تلقائي. في السابق، كان هذا الخيار اختياريًا بسبب زيادة الأداء. أصبحت هذه الميزة الآن منخفضة بما يكفي لتفعيلها تلقائيًا. إذا كنت تفضّل إيقاف عمليات تتبُّع تسلسل استدعاء الدوال البرمجية غير المتزامنة، يمكنك إيقافها في الإعدادات أو عن طريق تنفيذ الأمر Do not capture async stack traces في قائمة الأوامر.

"أدوات مطوّري البرامج" في مؤتمر Google I/O لعام 2017

يمكنك الاطّلاع على المحادثة التي أجراها "بول آيرش" أدناه لمعرفة المزيد من المعلومات حول ما كان يعمل عليه فريق DevTools خلال العام الماضي والمواضيع الرئيسية التي سيتناولها في المستقبل القريب.

تنزيل قنوات المعاينة

ننصحك باستخدام إصدار Canary أو Dev أو الإصدار التجريبي من Chrome كمتصفّح التطوير التلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار واجهات برمجة تطبيقات منصات الويب المتطوّرة، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يعثر عليها المستخدمون.

التواصل مع فريق "أدوات مطوّري البرامج في Chrome"

استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر مرتبط بـ "أدوات مطوّري البرامج".

الميزات الجديدة في "أدوات المطوّرين"

قائمة بكل ما تم تناوله في سلسلة الميزات الجديدة في أدوات مطوّري البرامج