الميزات الجديدة في أدوات مطوّري البرامج (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.

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

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

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