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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

إيماءة جديدة لميزة "المتابعة من هنا"

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

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

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

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

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

التعرّف على الدوال البرمجية غير المتزامنة

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

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

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

التغييرات

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

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

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

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

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

الشكل 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 أو Dev أو Beta كمتصفّح تطوير تلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار أحدث واجهات برمجة التطبيقات لمنصة الويب، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يواجهها المستخدمون.

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

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

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

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