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

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

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

يمكنك مشاهدة نسخة الفيديو من ملاحظات الإصدار هذه أدناه أو مواصلة القراءة لمعرفة المزيد.

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

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

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

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

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

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

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

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

يمكنك الاطّلاع على حديث "أدوات المطوّرين" من مؤتمر Google I/O لعام 2017 أدناه لمعرفة المزيد حول دمج 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 الوجهات غير المتزامنة التي يمكن الانتقال إليها باللون الأخضر.

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

التغييرات

معاينات أكثر إفادةً للعناصر في "وحدة التحكّم"

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

الشكل 6 الطريقة التي كانت تستخدمها "وحدة التحكّم" لمعاينة العناصر

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

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

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

• يصف العنوان محتوى كل عنصر.
• يصف العنوان الفرعي الذي يظهر تحت العنوان النطاق الذي تم استخراج العنصر منه.
• مرِّر مؤشر الماوس فوق سياق إطار iframe لتظليله في إطار العرض.

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

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

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

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

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

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

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

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

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

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

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

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

يمكنك مشاهدة المحاضرة التي ألقاها Paul Irish أدناه للتعرّف على المزيد حول ما عمل عليه فريق DevTools خلال العام الماضي والمواضيع المهمة التي سيعمل عليها في المستقبل القريب.

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

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

التواصل مع فريق Chrome DevTools

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

• يمكنك إرسال الملاحظات وطلبات الميزات إلينا على crbug.com.
• يمكنك الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" باستخدام more_vert المزيد من الخيارات > مساعدة > الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" في "أدوات مطوّري البرامج".
• يمكنك نشر تغريدة على ‎@ChromeDevTools.
• يمكنك إضافة تعليقات على فيديوهات "الميزات الجديدة في أدوات مطوّري البرامج" على YouTube أو فيديوهات "نصائح حول أدوات مطوّري البرامج" على YouTube.

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

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