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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الشكل 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

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

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

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

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

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

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

الإصدار 127 من Chrome

الإصدار 126 من Chrome

الإصدار 125 من Chrome

الإصدار 124 من Chrome

الإصدار 123 من Chrome

الإصدار 122 من Chrome

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من Chrome

الإصدار 118 من Chrome

الإصدار 117 من Chrome

الإصدار 116 من Chrome

الإصدار 115 من Chrome

الإصدار 114 من Chrome

الإصدار 113 من Chrome

الإصدار 112 من Chrome

الإصدار 111 من Chrome

الإصدار 110 من Chrome

الإصدار 109 من Chrome

الإصدار 108 من Chrome

الإصدار 107 من Chrome

الإصدار 106 من Chrome

الإصدار 105 من Chrome

الإصدار 104 من Chrome

الإصدار 103 من Chrome

الإصدار 102 من Chrome

الإصدار 101 من Chrome

الإصدار 100 من Chrome

الإصدار 99 من Chrome

الإصدار 98 من Chrome

الإصدار 97 من Chrome

الإصدار 96 من Chrome

الإصدار 95 من Chrome

الإصدار 94 من Chrome

الإصدار 93 من Chrome

الإصدار 92 من Chrome

الإصدار 91 من Chrome

الإصدار 90 من Chrome

الإصدار 89 من Chrome

الإصدار 88 من Chrome

الإصدار 87 من Chrome

الإصدار 86 من Chrome

الإصدار 85 من Chrome

الإصدار 84 من Chrome

الإصدار 83 من Chrome

الإصدار 82 من Chrome

تم إلغاء الإصدار 82 من Chrome.

الإصدار 81 من Chrome

الإصدار 80 من Chrome

الإصدار 79 من Chrome

الإصدار 78 من Chrome

الإصدار 77 من Chrome

الإصدار 76 من Chrome

الإصدار 75 من Chrome

الإصدار 74 من Chrome

الإصدار 73 من Chrome

الإصدار 72 من Chrome

الإصدار 71 من Chrome

Chrome 70

الإصدار 68 من Chrome

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

الإصدار 64 من Chrome

الإصدار 63 من Chrome

الإصدار 62 من Chrome

الإصدار 61 من Chrome

الإصدار 60 من Chrome

الإصدار 59 من Chrome