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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يتم تحديث قيم Live Expression كل 250 مللي ثانية.

تمييز عُقد DOM أثناء تقييم Eager

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

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

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

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

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

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

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

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

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

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

يُصلح Chrome 70 بعض الأخطاء التي كانت تتسبب في اختفاء نقاط التوقف أو عدم تشغيلها.

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

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

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

أوامر تقييد الشبكة في قائمة الأوامر.

الشكل 6. أوامر تقييد الشبكة في قائمة الأوامر

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

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

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

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

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

أخذ استراحة أثناء أحداث AudioContext

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

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

أحداث 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() في بداية دالة دورة الحياة ونهايتها. تؤدي ميزة "التفاعل" إلى تنفيذ ذلك في وضع التطوير.

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

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

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

يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".

  • يمكنك إرسال اقتراحات أو ملاحظات إلينا عبر crbug.com.
  • يمكنك الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية   المزيد > مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج".
  • يمكنك نشر تغريدة على @ChromeDevTool.
  • يمكنك إضافة تعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج في فيديوهات YouTube حول الميزات الجديدة.

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

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

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

Chrome 100

إصدار Chrome 99

Chrome 98

97 من Chrome

الإصدار 96 من Chrome

Chrome 95

Chrome 94

Chrome 93

الإصدار 92 من Chrome

الإصدار 91 من Chrome

90 Chrome

إصدار Chrome 89

إصدار Chrome 88

الإصدار 87 من Chrome

إصدار 86 من Chrome

الإصدار 85 من Chrome

إصدار 84 من Chrome

إصدار Chrome 83

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

إصدار Chrome 68

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

إصدار 64 من Chrome

إصدار 63 من Chrome

إصدار 62 من Chrome

إصدار 61 من Chrome

إصدار 60 من Chrome

الإصدار 59 من Chrome