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

Kayce Basques

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

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

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

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

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

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

    واجهة مستخدم 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 من "أدوات المطوّرين" تجاهل ملف TypeScript معيّن أثناء التنقّل في الرمز البرمجي، وبدلاً من ذلك، ستتجاهل "أدوات المطوّرين" ملف JavaScript المجمّع بالكامل. تعالج هذه الإصلاحات أيضًا مشكلة كانت تؤدي إلى بطء تشغيل لوحة "المصادر" بشكل عام.

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

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

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

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

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

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

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

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

هل تعلم؟ تتوفّر واجهة مستخدم ميزة "الإكمال التلقائي" بفضل CodeMirror، الذي يشغّل أيضًا Console.

التوقف عند أحداث AudioContext

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

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

أحداث 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 ذلك في وضع التطوير.

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

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

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

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

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

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