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

Kayce Basques

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

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

افتح لوحة الشبكة، ثم اضغط على 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() إلى الحافظة.

نسخ الرمز المكافئ لـ 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 خيارات جديدة لضبط عمليات التدقيق

عرض عمليات التتبّع

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

زر "عرض سجلّ التتبّع"

الشكل 7 زر عرض سجلّ التتبّع

إيقاف الحلقات المتكرّرة

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

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

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

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

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

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

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

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

اختيار أجهزة JavaScript الافتراضية في لوحة "الذاكرة"

تعرض لوحة الذاكرة الآن بوضوح جميع نُسخ Java Virtual Machine المرتبطة بصفحة معيّنة، بدلاً من إخفائها في القائمة المنسدلة الهدف كما في السابق.

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

الشكل 9 في واجهة المستخدم القديمة على يمين الصفحة، تكون نُسخ JavaScript VM مخفية خلف القائمة المنسدلة الهدف، في حين تظهر في واجهة المستخدم الجديدة على يمين الصفحة في جدول اختيار مثيل JavaScript VM.

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

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

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

نافذتان من DevTools جنبًا إلى جنب، توضِّحان تغيير الاسم

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

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

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

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

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

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

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

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

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

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

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

الرسوم البيانية للأداء لكل عملية في تسجيل الأداء

الشكل 13 الرسوم البيانية التفصيلية لأداء كل عملية في تسجيل الأداء

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

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

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

استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر مرتبط بـ "أدوات مطوّري البرامج".

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

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