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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

Live Expressions في وحدة التحكّم

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

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

    واجهة مستخدم ميزة "التعبير المباشر"

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

  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، وهي الأداة التي تتيح أيضًا استخدام وحدة التحكّم.

إيقاف التنفيذ عند أحداث 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;

تضع "أدوات مطوّري Chrome" علامات تلقائيًا على قياسات "توقيت المستخدم" في قسم توقيت المستخدم ضمن تسجيلات "الأداء".

قسم "وقت المستخدم"

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

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

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

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

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

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

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

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