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

Kayce Basques

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

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

اطّلِع على المزيد من المعلومات أو شاهِد نسخة الفيديو من هذا المستند:

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

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

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

    واجهة مستخدم Live Expression

    الشكل 1. واجهة مستخدم Live Expression

  2. اكتب التعبير الذي تريد تتبُّعه.

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

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

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

    تعبير مباشر محفوظ

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

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

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

اكتب تعبيرًا يُحتسب على أنّه عقدة DOM في وحدة التحكّم، والتقييم الفوري الآن يُبرز تلك العقدة في مساحة العرض.

بعد كتابة document.activeElement في وحدة التحكّم، يتم تمييز عقدة في مساحة العرض.

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

في ما يلي بعض العبارات التي قد تكون مفيدة لك:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

واجهة مستخدم ميزة "الإكمال التلقائي"

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

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

الفاصل عند أحداث AudioContext

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

AudioContext هو جزء من واجهة برمجة التطبيقات Web Audio API، ويمكنك استخدامها لمعالجة الصوت وإنشاء توليفات منه.

أحداث AudioContext في لوحة "النقاط الفاصلة لأداة معالجة الأحداث"

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

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

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

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

واجهة مستخدم ndb

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

اطّلِع على ملف README الخاص بـ ndb لمعرفة المزيد من المعلومات.

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

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

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

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

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