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

Kayce Basques

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

تشمل الميزات الجديدة والتغييرات الرئيسية التي ستطرأ على "أدوات مطوري البرامج" في Chrome 70 ما يلي:

• "التعبيرات المباشرة" في "وحدة التحكّم"
• إبراز عُقد DOM أثناء عملية التقييم الفوري.
• تحسينات لوحة الأداء:
• تصحيح أخطاء أكثر موثوقية
• فعِّل التحكُّم في الشبكة من قائمة الأوامر.
• الإكمال التلقائي لنقاط الإيقاف الشرطية:
• استراحة على AudioContext أحداث.
• تصحيح أخطاء تطبيقات Node.js باستخدام ndb
• نصيحة إضافية: يمكنك قياس تفاعلات المستخدمين في العالم الفعلي باستخدام User Timing API.

اقرأ أو شاهد نسخة الفيديو من هذا المستند:

ميزة "التعبيرات المباشرة" في وحدة التحكّم

يمكنك تثبيت التعبير المباشر أعلى وحدة التحكّم إذا أردت مراقبة قيمته في الوقت الفعلي.

1. انقر على إنشاء تعبير مباشر البث المباشر يتم فتح واجهة مستخدم التعبير.

   

   الشكل 1. واجهة مستخدم التعبير المباشر

2. اكتب التعبير الذي تريد مراقبته.

   

   الشكل 2. تتم كتابة Date.now() في واجهة مستخدم التعبير المباشر

3. انقر خارج واجهة مستخدم "التعبير المباشر" لحفظ التعبير.

   

   الشكل 3. تعبير مباشر محفوظ

يتم تعديل قيم "التعبير المباشر" كل 250 مللي ثانية.

إبراز عُقد DOM أثناء عملية التقييم الحر

اكتب الآن تعبيرًا يتم تقييمه إلى عقدة DOM في وحدة التحكّم وفي التقييم الدقيق. يبرز هذه العقدة في إطار العرض.

الشكل 4. وبما أن التعبير الحالي يتم تقييمه إلى عقدة، يتم تمييز هذه العقدة في إطار العرض

في ما يلي بعض التعابير التي قد تجدها مفيدة:

• document.activeElement لتمييز العقدة التي يتم التركيز عليها حاليًا.
• document.querySelector(s) لتمييز عقدة عشوائية، حيث s هي أداة اختيار لغة CSS. هذا النمط يعادل تمرير مؤشر الماوس فوق عقدة في شجرة نموذج العناصر في المستند.
• $0 لتمييز أي عقدة مختارة حاليًا في شجرة DOM.
• $0.parentElement لتمييز العنصر الرئيسي للعقدة المحدَّدة حاليًا.

تحسينات لوحة الأداء

عند تحليل صفحة كبيرة، استغرقت معالجة لوحة الأداء في السابق عشرات الثواني تصور البيانات. قد يؤدي أيضًا النقر على حدث لمعرفة المزيد عنه في علامة التبويب "الملخص" في بعض الأحيان استغرق عدة ثوانٍ للتحميل. تتم المعالجة والتمثيل المرئي للبيانات بشكل أسرع في Chrome 70.

الشكل 5. معالجة بيانات الأداء وتحميلها

تصحيح أخطاء أكثر موثوقية

يصلح الإصدار 70 من Chrome بعض الأخطاء التي كانت تتسبب في اختفاء نقاط التوقف أو عدم تشغيلها.

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

تفعيل التحكُّم في الشبكة من قائمة الأوامر

يمكنك الآن ضبط تقييد الشبكة على شبكة الجيل الثالث السريعة أو شبكة الجيل الثالث البطيئة من قائمة الأوامر.

الشكل 6. أوامر تقييد الشبكة في قائمة الأوامر

نقاط الإيقاف المشروطة للإكمال التلقائي

استخدِم واجهة مستخدم الإكمال التلقائي لكتابة تعبيرات النقطة الفاصلة الشرطية بشكل أسرع.

الشكل 7. واجهة مستخدم الإكمال التلقائي

هل تعلم؟ وأصبحت واجهة المستخدم للإكمال التلقائي ممكنة بفضل CodeMirror، الذي يشغل أيضًا وحدة التحكم.

عرض استراحة على أحداث AudioContext

يمكنك استخدام لوحة النقاط الفاصلة لمستمعي الحدث للتوقف مؤقتًا عند السطر الأول من AudioContext. معالِج أحداث مراحل النشاط

AudioContext هو جزء من Web Audio API الذي يمكنك استخدامه لمعالجة الصوت وتجميعه.

الشكل 8. أحداث AudioContext في لوحة النقاط الفاصلة لأداة معالجة الأحداث

تصحيح أخطاء تطبيقات Node.js باستخدام ndb

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

• اكتشاف العمليات الثانوية وإرفاقها
• يجب وضع نقاط الإيقاف قبل الوحدات.
• تعديل الملفات في واجهة مستخدم "أدوات مطوّري البرامج"
• يتم تجاهل جميع النصوص البرمجية خارج دليل العمل الحالي تلقائيًا.

الشكل 9. واجهة مستخدم ndb

راجع دليل ndb's README لمزيد من المعلومات.

نصيحة إضافية: يمكنك قياس تفاعلات المستخدمين في العالم الفعلي باستخدام User Timing API.

هل تريد قياس المدة التي يستغرقها المستخدمون الحقيقيون لإكمال الرحلات المهمة على صفحاتك؟ ضع في اعتبارك قياس الرمز باستخدام User Timing API.

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

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

بعد ذلك، يمكنك تحديد نهاية الرحلة وحساب مدتها عند النقر فوق الزر:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

يمكنك أيضًا استخراج القياسات، ما يسهِّل إرسالها إلى خدمة الإحصاءات لديك إلى جمع بيانات مجمّعة ومجهولة الهوية:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

تعمل أدوات مطوّري البرامج تلقائيًا على ترميز قياسات وقت المستخدم في قسم وقت المستخدم في تسجيلات الأداء

الشكل 10. قسم وقت المستخدم

ويكون ذلك مفيدًا أيضًا عند تصحيح أخطاء الرموز أو تحسينها. على سبيل المثال، إذا كنت تريد تحسين مرحلة معيّنة من دورة حياتك، اتصل بالرقم window.performance.mark() في بداية ونهاية دورة الحياة. ويقوم React بذلك في وضع التطوير.

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

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

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

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