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

Kayce Basques

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

نسخة الفيديو الخاصة بملاحظات الإصدار:

افتح لوحة الشبكة، ثم اضغط على Command+F (نظام التشغيل Mac) أو Control+F (أنظمة التشغيل Windows وLinux وChromeOS) لفتح جزء بحث الشبكة الجديد. تبحث "أدوات مطوّري البرامج" في العناوين ونصوص جميع طلبات الشبكة لطلب البحث الذي تقدمه.

البحث عن النص "cache-control" مع الجزء الجديد "بحث الشبكة".

الشكل 1. البحث عن النص cache-control باستخدام الجزء الجديد "بحث الشبكة"

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

طلب بحث تعبير عادي في جزء "البحث في الشبكة".

الشكل 2. طلب بحث تعبير عادي في جزء "البحث في الشبكة".

أصبحت واجهة المستخدم ضمن لوحة البحث العام تتطابق الآن مع واجهة المستخدم في جزء البحث في الشبكة الجديد. الميزة الآن نتائج ذات مطبوعات جميلة للمساعدة في سهولة قراءة المحتوى.

واجهة المستخدم القديمة والجديدة.

الشكل 3. واجهة المستخدم القديمة على اليمين وواجهة المستخدم الجديدة على اليمين

اضغط على Command+Option+F (نظام التشغيل Mac) أو Control+Shift+F (لأنظمة التشغيل Windows وLinux وChromeOS) لفتح الخيار عالمي البحث: يمكنك أيضًا فتحه من خلال قائمة الأوامر.

معاينات قيم متغيّرات CSS في لوحة الأنماط

عند ضبط قيمة سمة اللون في CSS، مثل background-color أو color، على CSS يعرض أدوات مطوري البرامج الآن معاينة لهذا اللون.

مثال على قيم ألوان متغير CSS

الشكل 4. في واجهة المستخدم القديمة على اليمين، لا توجد معاينة ألوان بجوار color: var(--main-color)، بينما في واجهة المستخدم الجديدة على اليمين

نسخ النص كاسترجاع

انقر بزر الماوس الأيمن على طلب شبكة ثم اختَر نسخ > النسخ بتنسيق الجلب لنسخ رمز مكافئ لـ fetch() لهذا الطلب في الحافظة.

نَسخ الرمز المكافِئ لطلب معيَّن (Fetch()).

الشكل 5. جارٍ نسخ الرمز المكافئ لـ fetch() لطلب

تنتج أدوات مطوّري البرامج رمزًا برمجيًا على النحو التالي:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

تعديلات لوحة عمليات التدقيق

عمليات التدقيق الجديدة

تتضمّن لوحة عمليات التدقيق عمليتي تدقيق جديدتين، بما في ذلك:

خيارات الضبط الجديدة

يمكنك الآن ضبط لوحة عمليات التدقيق من أجل:

  • الاحتفاظ بإعدادات وكيل المستخدم وإطار عرض جهاز سطح المكتب. وبعبارة أخرى، يمكنك منع عمليات التدقيق اللوحة من محاكاة جهاز محمول.
  • إيقاف تقييد الشبكة ووحدة المعالجة المركزية (CPU)
  • احتفِظ بمساحة التخزين، مثل LocalStorage وIndexedDB، في جميع عمليات التدقيق.

خيارات ضبط التدقيق الجديدة.

الشكل 6. خيارات ضبط التدقيق الجديدة

عرض آثار الأنشطة

بعد تدقيق الصفحة، انقر على عرض بيانات التتبُّع لعرض بيانات أداء التحميل التي تطبَّق عليها تدقيقك. استنادًا إلى لوحة الأداء.

زر View Trace

الشكل 7. زر عرض بيانات التتبُّع

إيقاف التكرارات اللانهائية

إذا كنت تستخدم التكرارات الحلقية for أو do...while المتكررة أو يتكرر كثيرًا، من المحتمل أنك نفذت حلقة لانهائية عن طريق الخطأ أثناء تطوير موقعك. لإيقاف التكرار اللانهائي، يمكنك الآن:

  1. افتح لوحة المصادر.
  2. انقر على رمز إيقاف مؤقت إيقاف مؤقت. يتغير الزر إلى استئناف تنفيذ النص البرمجي استئناف.
  3. الضغط مع الاستمرار على استئناف تنفيذ النص البرمجي استئناف ثم اختيار إيقاف طلب JavaScript الحالي إيقاف

في الفيديو أعلاه، يتم تعديل الساعة من خلال موقّت لمدة setInterval(). النقر على بدء تعمل حلقة Infinite Loop على تشغيل حلقة do...while لا تتوقف أبدًا. ويتم استئناف الفاصل الزمني لأنه لم يتم كان يتم تشغيله عندما تم إيقاف إيقاف اتصال JavaScript الحالي إيقاف المحددة.

"وقت المستخدم" في علامات التبويب "الأداء"

عند الاطّلاع على تسجيل "أداء"، انقر على قسم وقت المستخدم لعرض وقت المستخدم. في علامات التبويب ملخّص ومن أسفل إلى أعلى وشجرة المكالمات وسجلّ الأحداث.

عرض مقاييس "وقت المستخدم" في علامة التبويب "من أسفل إلى أعلى"

الشكل 8. عرض مقاييس وقت المستخدم في علامة التبويب من أسفل إلى أعلى أما الشريط الأزرق على يسار ويشير قسم وقت المستخدم إلى أنه تم اختياره.

بوجهٍ عام، يمكنك الآن اختيار أيٍّ من الأقسام (سلسلة المحادثات الرئيسية ووقت المستخدم ووحدة معالجة الرسومات). ScriptStreamer وما إلى ذلك) واعرض نشاط هذا القسم في علامات التبويب.

اختيار مثيلات الجهاز الافتراضي للغة JavaScript في لوحة الذاكرة

تعرض لوحة الذاكرة الآن بوضوح جميع مثيلات جهاز JavaScript الافتراضي المرتبطة بالصفحة. بدلاً من إخفائها خلف القائمة المنسدلة الاستهداف كما في السابق.

لقطات شاشة قبل وبعد عرض لوحة "الذاكرة"

الشكل 9. في واجهة المستخدم القديمة على اليمين، تكون مثيلات الأجهزة الافتراضية في JavaScript مخفية خلف القائمة المنسدلة استهداف، بينما في واجهة المستخدم الجديدة على اليسار يتم عرضها في القائمة المنسدلة اختيار جدول مثيل جهاز افتراضي للغة JavaScript

بجانب المثيل developers.google.com، تتوفّر قيمتان: 8.7 MB و13.3 MB. اليسار تشير إلى الذاكرة المخصّصة بسبب JavaScript. تمثل القيمة الصحيحة جميع ذاكرة نظام التشغيل التي يتم تخصيصها بسبب ذلك الجهاز الافتراضي (VM). وتشمل القيمة اليمنى القيمة اليسرى. في "إدارة المهام" في Chrome، تتوافق القيمة اليسرى مع JavaScript Memory والقيمة الصحيحة. يتجاوب مع Memory Footprint.

تمت إعادة تسمية علامة تبويب "الشبكة" إلى علامة تبويب "الصفحة".

في لوحة المصادر، تم تغيير اسم علامة التبويب الشبكة إلى علامة التبويب الصفحة.

نافذتا أدوات مطوري البرامج جنبًا إلى جنب تعرضان التغيير في الاسم.

الشكل 10. في واجهة المستخدم القديمة على اليمين، يُطلق على علامة التبويب التي تعرض موارد الصفحة اسم الشبكة، بينما في واجهة المستخدم الجديدة على اليسار تُسمى الصفحة

تعديلات المظهر الداكن

يتوفر Chrome 67 مع عدد من التغييرات الطفيفة على نظام ألوان المظهر الداكن. على سبيل المثال، وأصبحت أيقونات نقاط التوقف وسطر التنفيذ الحالي باللون الأخضر.

لقطة شاشة لرمز نقطة الإيقاف الجديد والسطر الحالي لنظام ألوان التنفيذ.

الشكل 11. لقطة شاشة لرمز نقطة الإيقاف الجديد والخط الحالي لنظام ألوان التنفيذ

شهادة الشفافية في لوحة الأمان

تعرض لوحة الأمان الآن معلومات شفافية الشهادة.

معلومات شفافية الشهادة في لوحة الأمان.

الشكل 12. معلومات حول شفافية شهادة الاعتماد في لوحة الأمان

"عزل الموقع" في لوحة الأداء

إذا فعّلت ميزة عزل المواقع الإلكترونية، ستعرِض لوحة الأداء الآن مخططًا شعبيًا كل عملية حتى تتمكن من رؤية العمل الإجمالي الذي تسببه كل عملية.

يشير إلى مخططات الشهب لكل عملية في تسجيل الأداء.

الشكل 13. مخططات اللهب لكل عملية في تسجيل الأداء

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

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

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

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