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

Kayce Basques

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

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

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

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

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

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

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

    الشكل 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 لتمييز العنصر الرئيسي للعقدة المحدَّدة حاليًا.

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

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

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

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

راجع دليل 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.

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

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

الإصدار 128 من Chrome

الإصدار 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